From d00fda79a5a103d040ad312e9d26b878cf4c37b8 Mon Sep 17 00:00:00 2001 From: XPoet Date: Thu, 2 Apr 2020 20:37:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=97=A5=E9=97=B4/?= =?UTF-8?q?=E5=A4=9C=E9=97=B4=E6=A8=A1=E5=BC=8F=E8=87=AA=E7=94=B1=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layout/_partial/header.ejs | 2 - layout/_partial/scripts.ejs | 2 +- layout/_partial/tools.ejs | 10 +++- .../layout/_partial/article-meta-info.styl | 4 +- source/css/layout/_partial/footer.styl | 4 +- source/css/layout/_partial/header.styl | 22 +++---- source/css/layout/_partial/local-search.styl | 2 +- source/css/layout/_partial/tools.styl | 31 ++++++++-- source/css/layout/archive-content.styl | 4 +- source/css/layout/article-content.styl | 2 +- source/css/layout/common/basic.styl | 12 ++-- source/css/layout/common/markdown.styl | 14 ++--- source/css/layout/common/variables.styl | 55 +++++++++++++----- source/css/layout/home-content.styl | 4 +- source/css/layout/page.styl | 2 +- source/js/common.js | 13 ----- source/js/toggle-mode.js | 57 +++++++++++++++++++ 17 files changed, 168 insertions(+), 72 deletions(-) create mode 100644 source/js/toggle-mode.js diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs index 121f14e..b58dd44 100644 --- a/layout/_partial/header.ejs +++ b/layout/_partial/header.ejs @@ -26,8 +26,6 @@
- -
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index a5376ec..7bdcf42 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -1 +1 @@ -<%- js(['js/main.js', "js/common.js"]) %> \ No newline at end of file +<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %> \ No newline at end of file diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs index 965f72d..e17dd4d 100644 --- a/layout/_partial/tools.ejs +++ b/layout/_partial/tools.ejs @@ -1,6 +1,10 @@
-
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index 4573fe4..940ccdf 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -4,7 +4,7 @@ $article-meta-info-font-size = 12px; .article-meta-info { - color: var(--third-text-color);; + color: var(--third-text-color); font-size: $article-meta-info-font-size; .article-meta-item { @@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px; } a { - color: var(--third-text-color);; + color: var(--third-text-color); &:hover { color: $primary-color; diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl index 759192b..190187d 100644 --- a/source/css/layout/_partial/footer.styl +++ b/source/css/layout/_partial/footer.styl @@ -1,10 +1,10 @@ @require '../common/variables.styl' .footer { - color: var(--third-text-color);; + color: var(--third-text-color); a { - color: var(--third-text-color);; + color: var(--third-text-color); &:hover { color: $primary-color; diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl index c89a500..60b5a94 100644 --- a/source/css/layout/_partial/header.styl +++ b/source/css/layout/_partial/header.styl @@ -8,7 +8,7 @@ display: flex; align-items: center; justify-content: center; - transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1); + transition: all 0.5s ease; .header-content { display: flex; @@ -47,7 +47,7 @@ &:hover { - color: var(--normal-text-color);; + color: var(--normal-text-color); &::after { content: ''; @@ -66,7 +66,7 @@ .active { - color: var(--second-text-color);; + color: var(--second-text-color); font-weight: bold; transition: all 0.5s ease; @@ -97,7 +97,7 @@ height: 2px; margin: 6px 0; position: relative; - background: var(--normal-text-color);; + background: var(--normal-text-color); transition: all 0.3s ease; &::before { @@ -107,7 +107,7 @@ left: 0; width: 100%; height: 2px; - background: var(--normal-text-color);; + background: var(--normal-text-color); transition: all 0.3s ease; } @@ -118,7 +118,7 @@ left: 0; width: 100%; height: 2px; - background: var(--normal-text-color);; + background: var(--normal-text-color); transition: all 0.3s ease; } } @@ -134,7 +134,7 @@ left: 0; transform: scaleY(0); transform-origin: top; - background: var(--background-color);; + background: var(--background-color); transition: all 0.5s ease; z-index: $z-index-2; @@ -154,18 +154,18 @@ border-radius: 20px; text-align: center; line-height: 34px; - color: var(--normal-text-color);; + color: var(--normal-text-color); transition: all 0.5s ease; &:hover { - color: var(--second-text-color);; + color: var(--second-text-color); font-weight: bold; } } .active { border: 1px solid $primary-color; - color: var(--second-text-color);; + color: var(--second-text-color); font-weight: bold; } @@ -224,7 +224,7 @@ .header-wrapper-shrink { - background: var(--background-color);; + background: var(--background-color); box-shadow: 0 1px 2px $border-color; .header-content { diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index 492f0bd..2a8e444 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -27,7 +27,7 @@ $keyword-red = #ff2a2a; z-index: 1001; .search-icon, .popup-btn-close { - color: var(--normal-text-color);; + color: var(--normal-text-color); font-size: $icon-size; padding: 0 10px; } diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl index eb9eee8..19910d6 100644 --- a/source/css/layout/_partial/tools.styl +++ b/source/css/layout/_partial/tools.styl @@ -1,11 +1,34 @@ +@require '../common/variables.styl' + .tools-container { - ul { + + .tools-list { li { cursor: pointer; - i { - font-size: 20px; - margin: 6px 0; + padding: 5px; + border-radius: 50%; + border: 1px solid var(--border-color); + width: 26px; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + margin-bottom: 12px; + + &:hover { + color: var(--primary-color); + border-color: var(--primary-color); } + + &:last-child { + margin-bottom: 0; + } + + i { + transition: all 0.3s ease; + } + } } diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl index 0c69ad2..e21b613 100644 --- a/source/css/layout/archive-content.styl +++ b/source/css/layout/archive-content.styl @@ -12,7 +12,7 @@ $article-date-font-size = 14px; .archive-item-header { .archive-year { font-size: $archive-year-font-size; - color: var(--second-text-color);; + color: var(--second-text-color); font-weight: 600; margin-right: 20px; } @@ -28,7 +28,7 @@ $article-date-font-size = 14px; font-size: $article-title-font-size; a.article-title { - color: var(--normal-text-color);; + color: var(--normal-text-color); &:hover { color: $primary-color; diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index cd5a26c..222618c 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -11,7 +11,7 @@ } a { - color: var(--second-text-color);; + color: var(--second-text-color); } } diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl index 7b64390..bb2815e 100644 --- a/source/css/layout/common/basic.styl +++ b/source/css/layout/common/basic.styl @@ -4,13 +4,14 @@ html, body { margin: 0; padding: 0; - color: var(--normal-text-color);; - background: var(--background-color);; + color: var(--normal-text-color); + background: var(--background-color); font-size: $default-font-size; font-family: $default-font-family; font-weight: $default-font-weight; line-height: $default-font-line-height; -webkit-font-smoothing antialiased; + transition: all 0.5s ease; } ul, li, ol { @@ -33,7 +34,7 @@ p { a { text-decoration: none; - color: var(--normal-text-color);; + color: var(--normal-text-color); } a:hover, a:active { @@ -64,7 +65,7 @@ a:hover, a:active { .article-title-hover-animation { display: inline-block; position: relative; - color: var(--second-text-color);; + color: var(--second-text-color); border-bottom: none; line-height: 1.3; vertical-align: top; @@ -76,7 +77,7 @@ a:hover, a:active { height: 2px; bottom: -4px; left: 0; - background-color: var(--second-text-color);; + background-color: var(--second-text-color); visibility: hidden; transform: scaleX(0); the-transition(); @@ -86,6 +87,7 @@ a:hover, a:active { visibility: visible; transform: scaleX(1); } + } diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl index 25e3fff..f91e2da 100644 --- a/source/css/layout/common/markdown.styl +++ b/source/css/layout/common/markdown.styl @@ -3,7 +3,7 @@ .markdown { blockquote { - border-left: 5px solid var(--normal-text-color);; + border-left: 5px solid var(--normal-text-color); margin: 0; padding: 0 0 0 10px; background: $border-color; @@ -21,39 +21,39 @@ h1 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 2.2em; font-weight: 700; } h2 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 2em; font-weight: 650; } h3 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 1.8em; font-weight: 600; } h4 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 1.6em; font-weight: 550; } h5 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 1.4em; font-weight: 500; } h6 { - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 1.2em; font-weight: 500; } diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl index 6f3da00..dcaa3a2 100644 --- a/source/css/layout/common/variables.styl +++ b/source/css/layout/common/variables.styl @@ -31,6 +31,15 @@ $third-text-color = #9ca3ad; // 第三文本颜色 $normal-text-color = #616161; // 通用文本颜色（默认字体颜色） $border-color = #ccc; // 边框颜色 +// dark mode color +$dark-background-color = #333; // 背景颜色 +$dark-primary-color = #ce3e29; // 主题颜色 +$dark-first-text-color = #eee; // 第一文本颜色 +$dark-second-text-color = #ccc; // 第二文本颜色 +$dark-third-text-color = #aaa; // 第三文本颜色 +$dark-normal-text-color = #bbb; // 通用文本颜色（默认字体颜色） +$dark-border-color = #888; // 边框颜色 + // =============================== // font @@ -45,28 +54,44 @@ $default-font-weight = 400; :root { - --background-color: #fff; - --first-text-color: #3e3d4f; - --second-text-color: #525e6b; - --third-text-color: #9ca3ad; - --normal-text-color: #616161; + --background-color: $background-color; + --primary-color: $primary-color; + --first-text-color: $first-text-color; + --second-text-color: $second-text-color; + --third-text-color: $third-text-color; + --normal-text-color: $normal-text-color; + --border-color: $border-color; } @media (prefers-color-scheme: dark) { :root { - --background-color: #444; - --first-text-color: #edf2f9; - --second-text-color: #e0e3ec; - --third-text-color: #9ca3ad; - --normal-text-color: #f8f8f8; + --background-color: $dark-background-color; + --primary-color: $dark-primary-color; + --first-text-color: $dark-first-text-color; + --second-text-color: $dark-second-text-color; + --third-text-color: $dark-third-text-color; + --normal-text-color: $dark-normal-text-color; + --dark-border-color: $dark-border-color; } } .dark-mode { - --background-color: #444; - --first-text-color: #edf2f9; - --second-text-color: #e0e3ec; - --third-text-color: #9ca3ad; - --normal-text-color: #f8f8f8; + --background-color: $dark-background-color; + --primary-color: $dark-primary-color; + --first-text-color: $dark-first-text-color; + --second-text-color: $dark-second-text-color; + --third-text-color: $dark-third-text-color; + --normal-text-color: $dark-normal-text-color; + --dark-border-color: $dark-border-color; +} + +.light-mode { + --background-color: $background-color; + --primary-color: $primary-color; + --first-text-color: $first-text-color; + --second-text-color: $second-text-color; + --third-text-color: $third-text-color; + --normal-text-color: $normal-text-color; + --border-color: $border-color; } \ No newline at end of file diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl index 4483fce..136bb3d 100644 --- a/source/css/layout/home-content.styl +++ b/source/css/layout/home-content.styl @@ -25,12 +25,12 @@ } font-weight: 600; - color: var(--second-text-color);; + color: var(--second-text-color); font-size: 22px; margin: 0; a { - color: var(--second-text-color);; + color: var(--second-text-color); } } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index f36b059..9822d81 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -30,7 +30,7 @@ .sidebar-tools { position: fixed; - top: $header-height + 30px; + top: $header-height + 50px; right: 5%; transition: all 0.5s ease; } diff --git a/source/js/common.js b/source/js/common.js index ef6b5c0..9e501ad 100644 --- a/source/js/common.js +++ b/source/js/common.js @@ -31,17 +31,4 @@ windowMask.addEventListener('click', function (e) { const searchBtn = document.querySelector('.search-btn'); searchBtn.addEventListener('click', function (e) { - }); - -const modeToggleBtn = document.querySelector('.mode-toggle-btn'); -modeToggleBtn.addEventListener('click', function (e) { - if ( - window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches - ) { - console.log('dark mode'); - } else { - document.body.classList.toggle('dark-mode'); - } -}); \ No newline at end of file diff --git a/source/js/toggle-mode.js b/source/js/toggle-mode.js new file mode 100644 index 0000000..643400f --- /dev/null +++ b/source/js/toggle-mode.js @@ -0,0 +1,57 @@ +/** + * 日间/夜间 模式切换 + */ +const modeToggleBtn = document.querySelector('.mode-toggle-btn'); +const iconDom = modeToggleBtn.querySelector('i'); +const modeConfig = JSON.parse(localStorage.getItem('ils_x')); +if (modeConfig) { + + if (modeConfig.prefersColorScheme === 'dark') { + + if (modeConfig.isDark) { + document.body.classList.remove('light-mode'); + iconDom.className = 'fa fa-lightbulb-o'; + } else { + iconDom.className = 'fa fa-moon-o'; + document.body.classList.add('light-mode'); + } + + } else { + + if (modeConfig.isDark) { + document.body.classList.remove('dark-mode'); + iconDom.className = 'fa fa-moon-o'; + } else { + document.body.classList.add('dark-mode'); + iconDom.className = 'fa fa-lightbulb-o'; + } + + } + +} + +const setItemUtil = (modeClass, prefersColorScheme) => { + document.body.classList.toggle(modeClass); + const isDark = document.body.className.indexOf(modeClass) === -1; + iconDom.className = isDark ? 'fa fa-moon-o' : 'fa fa-lightbulb-o'; + localStorage.setItem('ils_x', JSON.stringify( + { + prefersColorScheme: prefersColorScheme, + isDark: isDark + } + )); + + +}; + +modeToggleBtn.addEventListener('click', function (e) { + + if ( + window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + setItemUtil('light-mode', 'dark'); + } else { + setItemUtil('dark-mode', 'light'); + } + +}); \ No newline at end of file