diff --git a/README.md b/README.md
index 681f995..e4aed02 100644
--- a/README.md
+++ b/README.md
@@ -62,9 +62,12 @@
| 名称 | 配置项 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- | :--- |
-| 背景图片链接 | `backgroundImage` | `string` | `/assets/Moonlit-Scenery.webp` | 目前仅支持单张背景图片（eg: https://test.com/1.png） |
+| 背景图片链接 | `backgroundImage` | `string` | `/assets/Moonlit-Scenery.webp` | 目前仅支持单张背景图片（eg: https://test.com/1.png ） |
+| 启用视频背景 | `enableVedioBackground` | `switch` | `false` | 启用后将使用视频作为背景 |
+| 视频背景链接 | `vedioBackgroundUrl` | `string` | `/assets/Mortis_1080p30fps2Mbps.mp4` | 视频背景链接（eg: https://test.com/1.mp4 ），建议使用无声视频，且视频文件较大时可能会影响加载速度 |
+| 启用磨砂玻璃效果 | `enableBlur` | `switch` | `true` | 启用后将使主要容器拥有磨砂玻璃效果 |
| 磨砂玻璃模糊值 | `blurValue` | `number` | `10` | 调整模糊值大小，数值越大模糊效果越明显，建议值为 5-20，为 0 则表示不启用模糊效果 |
-| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)） |
+| 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“\|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)） |
| 标签默认颜色列表 | `tagDefaultColorList` | `string` | `ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red` | 标签默认颜色列表，展示的标签将按顺序调用该颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color ，改完没有生效则说明填写有误） |
| 启用 localStorage 配置 | `enableLocalStorage` | `switch` | `true` | 启用后将优先使用用户浏览器本地配置的视图和外观设置。关闭后将强制使用下方的主题配置，本地可调整但刷新即恢复 |
| 默认展示视图 | `selectedDefaultView` | `select` | `grid` | 设置默认展示视图为网格或表格 |
@@ -78,7 +81,7 @@
| 启用标题栏左侧 Logo | `enableLogo` | `switch` | `false` | 启用后默认在标题栏左侧显示 Logo |
| Logo 图片链接 | `logoUrl` | `string` | `/assets/logo.png` | Logo 图片链接（eg: https://test.com/logo.png） |
| 启用标题栏标题 | `enableTitle` | `switch` | `true` | 启用后默认在顶栏左侧显示标题 |
-| 标题栏标题文本 | `titleText` | `string` | | 标题栏左侧显示的文本（留空则使用站点标题） |
+| 标题栏标题文本 | `titleText` | `string` | | 标题栏左侧显示的文本（留空则使用站点标题） |
| 启用搜索按钮 | `enableSearchButton` | `switch` | `true` | 启用后默认在标题栏右侧显示搜索按钮 |
| 启用管理按钮 | `enableAdminButton` | `switch` | `true` | 启用后默认在标题栏右侧显示管理按钮 |
diff --git a/komari-theme.json b/komari-theme.json
index 9abf8b2..572c6c2 100644
--- a/komari-theme.json
+++ b/komari-theme.json
@@ -20,6 +20,27 @@
"default": "/assets/Moonlit-Scenery.webp",
"help": "目前仅支持单张背景图片（eg: https://test.com/1.png）"
},
+ {
+ "key": "enableVedioBackground",
+ "name": "启用视频背景",
+ "type": "switch",
+ "default": false,
+ "help": "启用后将使用视频作为背景"
+ },
+ {
+ "key": "vedioBackgroundUrl",
+ "name": "视频背景链接",
+ "type": "string",
+ "default": "/assets/Mortis_1080p30fps2Mbps.mp4",
+ "help": "视频背景链接（eg: https://test.com/1.mp4），建议使用无声视频，且视频文件较大时可能会影响加载速度"
+ },
+ {
+ "key": "enableBlur",
+ "name": "启用磨砂玻璃效果",
+ "type": "switch",
+ "default": true,
+ "help": "启用后将使主要容器拥有磨砂玻璃效果"
+ },
{
"key": "blurValue",
"name": "磨砂玻璃模糊值",
diff --git a/public/assets/Mortis_1080p30fps2Mbps.mp4 b/public/assets/Mortis_1080p30fps2Mbps.mp4
new file mode 100644
index 0000000..26efc1a
Binary files /dev/null and b/public/assets/Mortis_1080p30fps2Mbps.mp4 differ
diff --git a/src/components/sections/Header.tsx b/src/components/sections/Header.tsx
index efdcedb..a54401e 100644
--- a/src/components/sections/Header.tsx
+++ b/src/components/sections/Header.tsx
@@ -13,7 +13,7 @@ import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { useIsMobile } from "@/hooks/useMobile";
import { useConfigItem } from "@/config";
-import type { Appearance } from "@/hooks/useTheme";
+import { useTheme } from "@/hooks/useTheme";
import {
DropdownMenu,
DropdownMenuContent,
@@ -24,8 +24,6 @@ import {
interface HeaderProps {
viewMode: "grid" | "table";
setViewMode: (mode: "grid" | "table") => void;
- appearance: Appearance;
- setAppearance: (appearance: Appearance) => void;
searchTerm: string;
setSearchTerm: (term: string) => void;
}
@@ -33,11 +31,10 @@ interface HeaderProps {
export const Header = ({
viewMode,
setViewMode,
- appearance,
- setAppearance,
searchTerm,
setSearchTerm,
}: HeaderProps) => {
+ const { appearance, setAppearance } = useTheme();
const [isSearchOpen, setIsSearchOpen] = useState(false);
const location = useLocation();
const isInstancePage = location.pathname.startsWith("/instance");
@@ -56,8 +53,7 @@ export const Header = ({
}, [sitename]);
const toggleAppearance = () => {
- const newAppearance = appearance === "light" ? "dark" : "light";
- setAppearance(newAppearance);
+ setAppearance(appearance === "light" ? "dark" : "light");
};
return (
diff --git a/src/config/default.ts b/src/config/default.ts
index 2af0c30..247cc6d 100644
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -1,6 +1,8 @@
// 配置类型定义
export interface ConfigOptions {
backgroundImage?: string; // 背景图片URL
+ enableVideoBackground?: boolean; // 是否启用视频背景
+ videoBackgroundUrl?: string; // 视频背景URL
blurValue?: number; // 磨砂玻璃模糊值
blurBackgroundColor?: string; // 磨砂玻璃背景颜色
tagDefaultColorList?: string; // 标签默认颜色列表
@@ -27,6 +29,8 @@ export interface ConfigOptions {
// 默认配置值
export const DEFAULT_CONFIG: ConfigOptions = {
backgroundImage: "/assets/Moonlit-Scenery.webp",
+ enableVideoBackground: false,
+ videoBackgroundUrl: "/assets/Mortis_1080p30fps2Mbps.mp4",
blurValue: 10,
blurBackgroundColor: "rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)",
tagDefaultColorList:
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index e40038e..aca7f8f 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -86,6 +86,16 @@ export const useTheme = () => {
return (defaultColor as Colors) || THEME_DEFAULTS.color;
});
+ useEffect(() => {
+ if (appearance === "system") {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+ .matches
+ ? "dark"
+ : "light";
+ setAppearance(systemTheme);
+ }
+ }, [appearance]);
+
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
diff --git a/src/main.tsx b/src/main.tsx
index 2027f8a..8c6b8c7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -21,7 +21,7 @@ import { useConfigItem } from "@/config";
// 内部应用组件，在 ConfigProvider 内部使用配置
export const AppContent = () => {
- const { appearance, setAppearance, color } = useTheme();
+ const { appearance, color } = useTheme();
const defaultView = useConfigItem("selectedDefaultView");
const enableLocalStorage = useConfigItem("enableLocalStorage");
@@ -36,6 +36,8 @@ export const AppContent = () => {
return defaultView || "grid";
});
const [searchTerm, setSearchTerm] = useState("");
+ const enableVideoBackground = useConfigItem("enableVideoBackground");
+ const videoBackgroundUrl = useConfigItem("videoBackgroundUrl");
useEffect(() => {
if (enableLocalStorage) {
@@ -44,33 +46,44 @@ export const AppContent = () => {
}, [enableLocalStorage, viewMode]);
return (
-
-
-
- }>
-
- }
- />
- } />
- } />
-
-
-
-
-
+ <>
+ {enableVideoBackground && videoBackgroundUrl && (
+
+ )}
+
+
+
+ }>
+
+
+ }
+ />
+ } />
+ } />
+
+
+
+
+
+
);
};