From b0238605b0fed14cd7f3f633364b382d2ac9351e Mon Sep 17 00:00:00 2001 From: mjsoftware <1406993111@qq.com> Date: Wed, 6 Mar 2024 12:54:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=201.=E4=B8=BA?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=9A=97=E9=BB=91=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E6=97=B6=E7=9A=84=E9=BB=98=E8=AE=A4=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=202.=E8=B0=83=E6=95=B4=E7=BD=91=E9=A1=B5=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=97=B6=E6=9A=97=E9=BB=91=E8=BF=98=E6=98=AF=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=E7=9A=84=E5=88=A4=E5=AE=9A=E6=96=B9=E5=BC=8F=203.=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E7=9A=84=E9=85=8D?= =?UTF-8?q?=E8=89=B2=E6=96=B9=E6=A1=88=EF=BC=8C=E4=BD=86=E6=9C=AA=E5=90=AF?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/theme.less | 77 ++++++++++++++++++++++++++++++++++++ src/js/common.js | 18 ++++----- templates/common/config.html | 14 +------ 3 files changed, 86 insertions(+), 23 deletions(-) diff --git a/src/css/theme.less b/src/css/theme.less index b2f73ff..ddfe2aa 100644 --- a/src/css/theme.less +++ b/src/css/theme.less @@ -108,4 +108,81 @@ html { } } } +} + +//組件高亮 +.color-scheme-light { + /*搜索組件配色 - 高亮*/ + //基础字体大小 + //--halo-search-widget-base-font-size: 1rem; + //基础元素的圆角 + //--halo-search-widget-base-border-radius: ; + //基础字体族 + //--halo-search-widget-base-font-family: ; + //模态层颜色 + //--halo-search-widget-color-modal-layer: ; + //模态内容背景颜色 + //--halo-search-widget-color-modal-content-bg: ; + //表单输入背景颜色 + //--halo-search-widget-color-form-input-bg: ; + //表单输入文字颜色 + //--halo-search-widget-color-form-input: ; + //表单输入占位符颜色 + //--halo-search-widget-color-form-input-placeholder: ; + //表单分隔线颜色 + //--halo-search-widget-color-form-divider: ; + //无结果提示颜色 + //--halo-search-widget-color-result-empty: ; + //结果项背景颜色 + //--halo-search-widget-color-result-item-bg: ; + //结果项悬停背景颜色 + //--halo-search-widget-color-result-item-hover-bg: ; + //结果项标题颜色 + //--halo-search-widget-color-result-item-title: ; + //结果项内容颜色 + //--halo-search-widget-color-result-item-content: ; + //命令键盘项颜色 + //--halo-search-widget-color-command-kbd-item: ; + //命令键盘边框颜色 + //--halo-search-widget-color-command-kbd-border: ; + + +} +//組件暗黑 +.color-scheme-dark { + /*搜索組件配色 - 暗黑*/ + //基础字体大小 + //--halo-search-widget-base-font-size: 1rem; + //基础元素的圆角 + //--halo-search-widget-base-border-radius: ; + //基础字体族 + //--halo-search-widget-base-font-family: ; + //模态层颜色 + //--halo-search-widget-color-modal-layer: ; + //模态内容背景颜色 + //--halo-search-widget-color-modal-content-bg: ; + //表单输入背景颜色 + //--halo-search-widget-color-form-input-bg: ; + //表单输入文字颜色 + //--halo-search-widget-color-form-input: ; + //表单输入占位符颜色 + //--halo-search-widget-color-form-input-placeholder: ; + //表单分隔线颜色 + //--halo-search-widget-color-form-divider: ; + //无结果提示颜色 + //--halo-search-widget-color-result-empty: ; + //结果项背景颜色 + //--halo-search-widget-color-result-item-bg: ; + //结果项悬停背景颜色 + //--halo-search-widget-color-result-item-hover-bg: ; + //结果项标题颜色 + //--halo-search-widget-color-result-item-title: ; + //结果项内容颜色 + //--halo-search-widget-color-result-item-content: ; + //命令键盘项颜色 + //--halo-search-widget-color-command-kbd-item: ; + //命令键盘边框颜色 + //--halo-search-widget-color-command-kbd-border: ; + + } \ No newline at end of file diff --git a/src/js/common.js b/src/js/common.js index 0cbdc03..71668ab 100644 --- a/src/js/common.js +++ b/src/js/common.js @@ -71,17 +71,11 @@ const commonContext = { let isNight = localStorage.getItem('night') || false const applyNight = (isNightValue) => { if (isNightValue) { - document.documentElement.classList.add('night') - // 组件配色方案 - $('html').addClass('color-scheme-dark').removeClass('color-scheme-light') - // document.documentElement.classList.add('color-scheme-dark') - // document.documentElement.classList.remove('color-scheme-light') + // 配色方案 + $('html').addClass('color-scheme-dark').removeClass('color-scheme-light').addClass('night') } else { - document.documentElement.classList.remove('night') - // 组件配色方案 - $('html').addClass('color-scheme-light').removeClass('color-scheme-dark') - // document.documentElement.classList.remove('color-scheme-dark') - // document.documentElement.classList.add('color-scheme-light') + // 配色方案 + $('html').addClass('color-scheme-light').removeClass('color-scheme-dark').removeClass('night') } $('.comment-section>div').each(function () { const shadowDom = this.shadowRoot.querySelectorAll('.halo-comment-widget')[0] @@ -91,10 +85,14 @@ const commonContext = { localStorage.setItem('night', isNightValue) isNight = isNightValue } + //切换按钮 $('#toggle-mode').on('click', () => applyNight(isNight.toString() !== 'true')) + //加载后首选的配色 if (DreamConfig.default_theme === 'system') { window.matchMedia('(prefers-color-scheme: dark)') .addListener((event) => applyNight(event.matches)) + } else { + applyNight(isNight.toString() === 'true') } }, /* 导航条高亮 */ diff --git a/templates/common/config.html b/templates/common/config.html index dcb2619..8fb70cb 100644 --- a/templates/common/config.html +++ b/templates/common/config.html @@ -126,18 +126,6 @@ /** 配置主题模式 */ DreamConfig["default_theme"] = '[(${theme.config.basic_style.default_theme})]'; - (function(){ - let isNight = DreamConfig.default_theme === 'system'? matchMedia('(prefers-color-scheme: dark)').matches : localStorage.getItem('night') || DreamConfig.default_theme === 'night'; - if (isNight.toString() === 'true') { - localStorage.setItem('night', 'true'); - document.documentElement.classList.add('night'); - // 组件配色方案 - document.documentElement.classList.add('color-scheme-dark'); - } else { - localStorage.setItem('night', 'false'); - // 组件配色方案 - document.documentElement.classList.add('color-scheme-light'); - } - })(); + \ No newline at end of file