diff --git a/README.md b/README.md index a23525165..ef41363cb 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ PureAdmin

-暗黑模式 +暗色风格

PureAdmin diff --git a/public/logo.svg b/public/logo.svg index a44a847b9..a63d2b1ab 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/platform-config.json b/public/platform-config.json index 454941ff0..fd89ee1c0 100644 --- a/public/platform-config.json +++ b/public/platform-config.json @@ -9,6 +9,7 @@ "Layout": "vertical", "Theme": "light", "DarkMode": false, + "OverallStyle": "light", "Grey": false, "Weak": false, "HideTabs": false, diff --git a/src/assets/login/avatar.svg b/src/assets/login/avatar.svg index a44a847b9..a63d2b1ab 100644 --- a/src/assets/login/avatar.svg +++ b/src/assets/login/avatar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg/system.svg b/src/assets/svg/system.svg new file mode 100644 index 000000000..9ad39a56e --- /dev/null +++ b/src/assets/svg/system.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg b/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg index 052ed338d..358bd5186 100644 --- a/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg +++ b/src/components/ReFlowChart/src/assets/iconfont/iconfont.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx index 41c08af18..d8d536186 100644 --- a/src/components/ReSegmented/src/index.tsx +++ b/src/components/ReSegmented/src/index.tsx @@ -115,7 +115,13 @@ export default defineComponent({ onClick={event => handleChange({ option, index }, event)} > -

+
{option.icon && !isFunction(option.label) ? ( { }; }); -/** 当网页为暗黑模式时不显示亮白色切换选项 */ +/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */ const showThemeColors = computed(() => { return themeColor => { return themeColor === "light" && isDark.value ? false : true; @@ -162,13 +165,24 @@ const getThemeColor = computed(() => { const themeOptions = computed>(() => { return [ { - label: "亮色", + label: "浅色", icon: dayIcon, + theme: "light", + tip: "清新启航，点亮舒适的工作界面", iconAttrs: { fill: isDark.value ? "#fff" : "#000" } }, { - label: "暗色", + label: "深色", icon: darkIcon, + theme: "dark", + tip: "月光序曲，沉醉于夜的静谧雅致", + iconAttrs: { fill: isDark.value ? "#fff" : "#000" } + }, + { + label: "自动", + icon: systemIcon, + theme: "system", + tip: "同步时光，界面随晨昏自然呼应", iconAttrs: { fill: isDark.value ? "#fff" : "#000" } } ]; @@ -177,10 +191,12 @@ const themeOptions = computed>(() => { const markOptions: Array = [ { label: "灵动", + tip: "灵动标签，添趣生辉", value: "smart" }, { label: "卡片", + tip: "卡片标签，高效浏览", value: "card" } ]; @@ -195,7 +211,8 @@ function setLayoutModel(layout: string) { darkMode: $storage.layout?.darkMode, sidebarStatus: $storage.layout?.sidebarStatus, epThemeColor: $storage.layout?.epThemeColor, - themeColor: layoutTheme.value.theme + themeColor: $storage.layout?.themeColor, + overallStyle: $storage.layout?.overallStyle }; useAppStoreHook().setLayout(layout); } @@ -220,9 +237,34 @@ watch($storage, ({ layout }) => { } }); +const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); + +/** 根据操作系统主题设置平台整体风格 */ +function updateTheme() { + if (overallStyle.value !== "system") return; + if (mediaQueryList.matches) { + dataTheme.value = true; + } else { + dataTheme.value = false; + } + dataThemeChange(overallStyle.value); +} + +function removeMatchMedia() { + mediaQueryList.removeEventListener("change", updateTheme); +} + +/** 监听操作系统主题改变 */ +function watchSystemThemeChange() { + updateTheme(); + removeMatchMedia(); + mediaQueryList.addEventListener("change", updateTheme); +} + onBeforeMount(() => { /* 初始化项目配置 */ nextTick(() => { + watchSystemThemeChange(); settings.greyVal && document.querySelector("html")?.setAttribute("class", "html-grey"); settings.weakVal && @@ -231,6 +273,8 @@ onBeforeMount(() => { settings.hideFooter && hideFooterChange(); }); }); + +onUnmounted(() => removeMatchMedia);