diff --git a/_config.yml b/_config.yml
index c8d527f..9b19ada 100755
--- a/_config.yml
+++ b/_config.yml
@@ -272,6 +272,9 @@ footer:
# comments:
# icon: '
'
# url: /about/#comments
+ # theme:
+ # icon: default:theme
+ # onclick: 'switchTheme()'
sitemap:
# '博客':
# - '[近期](/)'
diff --git a/_data/icons.yml b/_data/icons.yml
index 826f699..82a27b7 100644
--- a/_data/icons.yml
+++ b/_data/icons.yml
@@ -32,6 +32,7 @@ default:category:
default:upup:
default:tocomment:
+default:theme:
github:logo:
github:repo:
diff --git a/languages/en.yml b/languages/en.yml
index f2b825d..689b444 100755
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -53,6 +53,10 @@ search:
message:
copied: Copied!
+ theme_switched:
+ light: Switched to Light Mode
+ dark: Switched to Dark Mode
+ auto: Switched to Auto Mode
symbol:
comma: ", "
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index d65f4a8..8c45c8c 100755
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -53,6 +53,10 @@ search:
message:
copied: 复制成功
+ theme_switched:
+ light: 切换到浅色模式
+ dark: 切换到深色模式
+ auto: 切换到跟随系统配色
symbol:
comma: "，"
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
index 907c5ef..56420c3 100755
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@@ -53,6 +53,10 @@ search:
message:
copied: 複製成功
+ theme_switched:
+ light: 切換到淺色模式
+ dark: 切換到深色模式
+ auto: 切換到跟隨系統配色
symbol:
comma: "，"
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index debc6dd..90bfb2e 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -22,6 +22,8 @@ function custom_inject() {
+<%- partial('scripts/theme') %>
+
<%- partial('comments/script') %>
diff --git a/layout/_partial/scripts/theme.ejs b/layout/_partial/scripts/theme.ejs
new file mode 100644
index 0000000..8c84a7e
--- /dev/null
+++ b/layout/_partial/scripts/theme.ejs
@@ -0,0 +1,62 @@
+
diff --git a/layout/layout.ejs b/layout/layout.ejs
index e619da8..375ee3e 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -37,7 +37,11 @@ if (theme.style.site && theme.style.site['background-image']) {
}
var html = ``
-html += ``
+if (theme.style.prefers_theme === 'auto') {
+ html += ``
+} else {
+ html += ``
+}
html += partial('_partial/head')
html += ``
html += site_background
diff --git a/source/css/_common/button.styl b/source/css/_common/button.styl
index 924bbd4..ca8bc91 100644
--- a/source/css/_common/button.styl
+++ b/source/css/_common/button.styl
@@ -59,9 +59,9 @@ a.button.start.gradient
&:hover:after
filter: blur(36px)
opacity 1
-
- if theme(dark)
+
+ :root[data-theme="dark"] &
ondark()
- else if theme(auto)
+ :root:not([data-theme]) &
@media (prefers-color-scheme: dark)
ondark()
diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl
index 80e1f67..2bb5de6 100644
--- a/source/css/_common/device.styl
+++ b/source/css/_common/device.styl
@@ -27,9 +27,9 @@
trans1: all
ondark()
--blur-bg: alpha(#000, .4)
- if theme(dark)
+ :root[data-theme="dark"] &
ondark()
- else if theme(auto)
+ :root:not([data-theme]) &
@media (prefers-color-scheme: dark)
ondark()
@@ -52,7 +52,7 @@
// 侧边栏弹出后
.l_body[leftbar] .float-panel, .l_body[rightbar] .float-panel
box-shadow: 0 0 4px -1px $color-theme, 0 0 16px -4px $color-theme, 0 0 32px -12px $color-theme, 0 0 128px -32px $color-theme
-
+
.l_body[leftbar] .float-panel button.leftbar-toggle
background: var(--alpha100)
diff --git a/source/css/_components/partial/article-banner.styl b/source/css/_components/partial/article-banner.styl
index 077fcc4..3690b3e 100644
--- a/source/css/_components/partial/article-banner.styl
+++ b/source/css/_components/partial/article-banner.styl
@@ -26,7 +26,7 @@
.l_body[text-indent] .article.banner .content .bottom.only-title
justify-content: center
-
+
// 动画配置
.article.banner
@@ -50,8 +50,8 @@
--button-hover-bg: rgba(black, 0.05)
ondark()
--button-hover-bg: rgba(white, 0.15)
- if theme(dark)
+ :root[data-theme="dark"] &
ondark()
- else if theme(auto)
+ :root:not([data-theme]) &
@media (prefers-color-scheme: dark)
ondark()
diff --git a/source/css/_components/tag-plugins/common.styl b/source/css/_components/tag-plugins/common.styl
index e82869d..137ebba 100644
--- a/source/css/_components/tag-plugins/common.styl
+++ b/source/css/_components/tag-plugins/common.styl
@@ -109,9 +109,9 @@ _dark_tags()
set_text_black()
-if theme(dark)
+:root[data-theme="dark"]
_dark_tags()
-else if theme(auto)
+:root:not([data-theme])
@media (prefers-color-scheme: dark)
_dark_tags()
diff --git a/source/css/_defines/func.styl b/source/css/_defines/func.styl
index 647f310..f39dce8 100644
--- a/source/css/_defines/func.styl
+++ b/source/css/_defines/func.styl
@@ -113,13 +113,12 @@ hoverable-card()
ondark()
&:hover
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
- if theme(light)
+ :root[data-theme="light"] &
onlight()
- else if theme(dark)
+ :root[data-theme="dark"] &
ondark()
- else
+ :root:not([data-theme]) &
@media (prefers-color-scheme: light)
onlight()
@media (prefers-color-scheme: dark)
ondark()
-
\ No newline at end of file
diff --git a/source/css/_defines/theme.styl b/source/css/_defines/theme.styl
index 7491a66..b0dc823 100644
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@@ -1,3 +1,4 @@
+// Deprecated function. Keep for compatibility.
theme($t)
convert(hexo-config('style.prefers_theme')) == $t
@@ -40,47 +41,45 @@ _common_root()
--theme-link: $color-link
_light_root()
- :root
- --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
- --card: hsl($color-block-h, $color-block-s, 100)
- --block: hsl($color-block-h, $color-block-s, 95)
- --block-border: hsl($color-block-h, $color-block-s, 90)
- --block-hover: hsl($color-block-h, $color-block-s, 92)
- --theme-link-opa: rgba($color-link, 0.2)
- --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
- --alpha20: rgba(white, 0.2)
- --alpha50: rgba(white, 0.5)
- --alpha60: rgba(white, 0.6)
- --alpha75: rgba(white, 0.75)
- --alpha100: white
- _dark_text()
-
+ --site-bg: hsl($color-background-h, $color-background-s, $color-background-l)
+ --card: hsl($color-block-h, $color-block-s, 100)
+ --block: hsl($color-block-h, $color-block-s, 95)
+ --block-border: hsl($color-block-h, $color-block-s, 90)
+ --block-hover: hsl($color-block-h, $color-block-s, 92)
+ --theme-link-opa: rgba($color-link, 0.2)
+ --leftbar-bg: hsl($color-block-h, $color-block-s, 90)
+ --alpha20: rgba(white, 0.2)
+ --alpha50: rgba(white, 0.5)
+ --alpha60: rgba(white, 0.6)
+ --alpha75: rgba(white, 0.75)
+ --alpha100: white
+ _dark_text()
+
_dark_root()
- :root
- --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
- --card: hsl($color-block-h, $color-block-s * 1.2, 24)
- --block: hsl($color-block-h, $color-block-s, 16)
- --block-border: hsl($color-block-h, $color-block-s, 24)
- --block-hover: hsl($color-block-h, $color-block-s, 20)
- --theme-link-opa: rgba($color-link, 0.4)
- --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
- --alpha20: rgba(black, 0.2)
- --alpha50: rgba(black, 0.5)
- --alpha60: rgba(black, 0.6)
- --alpha75: rgba(black, 0.75)
- --alpha100: black
- _light_text()
- @media screen and (max-width: $device-mobile-max)
- --site-bg: black
+ --site-bg: hsl($color-background-h, $color-background-s * 0.5, (100 - $color-background-l) * 2 + 8)
+ --card: hsl($color-block-h, $color-block-s * 1.2, 24)
+ --block: hsl($color-block-h, $color-block-s, 16)
+ --block-border: hsl($color-block-h, $color-block-s, 24)
+ --block-hover: hsl($color-block-h, $color-block-s, 20)
+ --theme-link-opa: rgba($color-link, 0.4)
+ --leftbar-bg: hsl($color-block-h, $color-block-s, 24)
+ --alpha20: rgba(black, 0.2)
+ --alpha50: rgba(black, 0.5)
+ --alpha60: rgba(black, 0.6)
+ --alpha75: rgba(black, 0.75)
+ --alpha100: black
+ _light_text()
+ @media screen and (max-width: $device-mobile-max)
+ --site-bg: black
_common_root()
-// 默认自动模式
-if theme(light)
+
+:root[data-theme="light"]
_light_root()
-else if theme(dark)
+:root[data-theme="dark"]
_dark_root()
-else
+:root:not([data-theme])
@media (prefers-color-scheme: light)
_light_root()
@media (prefers-color-scheme: dark)
- _dark_root()
\ No newline at end of file
+ _dark_root()
diff --git a/source/css/_plugins/comments/waline.styl b/source/css/_plugins/comments/waline.styl
index d1b021b..9d5fdad 100644
--- a/source/css/_plugins/comments/waline.styl
+++ b/source/css/_plugins/comments/waline.styl
@@ -36,7 +36,7 @@
--waline-border: 1px solid var(--waline-border-color);
--waline-avatar-radius: 50%;
--waline-box-shadow: none;
-
+
.cmt-body.waline
ondark()
--waline-white: #000;
@@ -61,8 +61,8 @@
font-size: 1.25em;
color: #fff;
- if theme(dark)
+ :root[data-theme="dark"] &
ondark()
- else if theme(auto)
+ :root:not([data-theme]) &
@media (prefers-color-scheme: dark)
ondark()
diff --git a/source/css/_plugins/mermaid.styl b/source/css/_plugins/mermaid.styl
index 733f6a7..013fc89 100644
--- a/source/css/_plugins/mermaid.styl
+++ b/source/css/_plugins/mermaid.styl
@@ -108,8 +108,8 @@ _dark_mermaid()
fill: #ccc
-if theme(dark)
+:root[data-theme="dark"]
_dark_mermaid()
-else if theme(auto)
+:root:not([data-theme])
@media (prefers-color-scheme: dark)
_dark_mermaid()