From 885c0f4dce14e6cd2d1ac611ea8c8b57f9534117 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Sat, 22 Oct 2022 13:59:21 +0800 Subject: [PATCH] fix darkmode --- source/css/_common/blur.styl | 3 + source/css/_common/device.styl | 2 + source/css/_layout/sidebar/footer.styl | 2 + source/css/_layout/tag-plugins/common.styl | 79 ++++++++++++---------- source/css/_plugins/comments/twikoo.styl | 16 +++-- source/css/_plugins/comments/valine.styl | 4 ++ 6 files changed, 64 insertions(+), 42 deletions(-) diff --git a/source/css/_common/blur.styl b/source/css/_common/blur.styl index ce5282f..da826eb 100644 --- a/source/css/_common/blur.styl +++ b/source/css/_common/blur.styl @@ -5,6 +5,9 @@ if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) :root --blur-bg: alpha(black, .5) +if hexo-config('style.darkmode') == 'always' + :root + --blur-bg: alpha(black, .5) .blur background: var(--blur-bg) diff --git a/source/css/_common/device.styl b/source/css/_common/device.styl index 8f74863..c302d81 100644 --- a/source/css/_common/device.styl +++ b/source/css/_common/device.styl @@ -24,6 +24,8 @@ if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) --blur-bg: alpha(#555, .6) + if hexo-config('style.darkmode') == 'always' + --blur-bg: alpha(#555, .6) .sidebar-toggle.mobile cursor: pointer diff --git a/source/css/_layout/sidebar/footer.styl b/source/css/_layout/sidebar/footer.styl index 7583ff3..167ddbf 100644 --- a/source/css/_layout/sidebar/footer.styl +++ b/source/css/_layout/sidebar/footer.styl @@ -26,6 +26,8 @@ if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) box-shadow: none + if hexo-config('style.darkmode') == 'always' + box-shadow: none .proj-wrap display: grid diff --git a/source/css/_layout/tag-plugins/common.styl b/source/css/_layout/tag-plugins/common.styl index 3b90149..d279f15 100644 --- a/source/css/_layout/tag-plugins/common.styl +++ b/source/css/_layout/tag-plugins/common.styl @@ -47,43 +47,48 @@ --theme-bg: #444 color: var(--card) !important +set_darkmode_tags() + .tag-plugin[color='red'] + --theme-border: mix($c-red, $dark-card, 80) + --theme-bg: mix($c-red, $dark-card, 10) + + .tag-plugin[color='orange'] + --theme-border: mix($c-orange, $dark-card, 80) + --theme-bg: mix($c-orange, $dark-card, 10) + + .tag-plugin[color='yellow'] + --theme-border: mix($c-yellow, $dark-card, 80) + --theme-bg: mix($c-yellow, $dark-card, 10) + + .tag-plugin[color='green'] + --theme-border: mix($c-green, $dark-card, 80) + --theme-bg: mix($c-green, $dark-card, 10) + + .tag-plugin[color='cyan'] + --theme-border: mix($c-cyan, $dark-card, 80) + --theme-bg: mix($c-cyan, $dark-card, 10) + + .tag-plugin[color='blue'] + --theme-border: mix($c-blue, $dark-card, 80) + --theme-bg: mix($c-blue, $dark-card, 10) + + .tag-plugin[color='purple'] + --theme-border: mix($c-purple, $dark-card, 80) + --theme-bg: mix($c-purple, $dark-card, 10) + + .tag-plugin[color='light'] + --theme-border: white + --theme-bg: #ddd + color: var(--card) !important + + .tag-plugin[color='dark'] + --theme-border: black + --theme-bg: #222 + color: var(--text-p1) !important + if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) - .tag-plugin[color='red'] - --theme-border: mix($c-red, $dark-card, 80) - --theme-bg: mix($c-red, $dark-card, 10) + set_darkmode_tags() - .tag-plugin[color='orange'] - --theme-border: mix($c-orange, $dark-card, 80) - --theme-bg: mix($c-orange, $dark-card, 10) - - .tag-plugin[color='yellow'] - --theme-border: mix($c-yellow, $dark-card, 80) - --theme-bg: mix($c-yellow, $dark-card, 10) - - .tag-plugin[color='green'] - --theme-border: mix($c-green, $dark-card, 80) - --theme-bg: mix($c-green, $dark-card, 10) - - .tag-plugin[color='cyan'] - --theme-border: mix($c-cyan, $dark-card, 80) - --theme-bg: mix($c-cyan, $dark-card, 10) - - .tag-plugin[color='blue'] - --theme-border: mix($c-blue, $dark-card, 80) - --theme-bg: mix($c-blue, $dark-card, 10) - - .tag-plugin[color='purple'] - --theme-border: mix($c-purple, $dark-card, 80) - --theme-bg: mix($c-purple, $dark-card, 10) - - - .tag-plugin[color='light'] - --theme-border: white - --theme-bg: #ddd - color: var(--card) !important - - .tag-plugin[color='dark'] - --theme-border: black - --theme-bg: #222 - color: var(--text-p1) !important +if hexo-config('style.darkmode') == 'always' + set_darkmode_tags() \ No newline at end of file diff --git a/source/css/_plugins/comments/twikoo.styl b/source/css/_plugins/comments/twikoo.styl index da04335..039d1e8 100644 --- a/source/css/_plugins/comments/twikoo.styl +++ b/source/css/_plugins/comments/twikoo.styl @@ -106,10 +106,16 @@ .tk-comments-no color: var(--text-p1); +set_darkmode_comments() + .cmt-body.twikoo + --twikoo-lighttext: #f2b94b; + --twikoo-secondtext: #a1a2b8; + --twikoo-emoji-background: darken($dark-block, 1); + --twikoo-theme: #409eff; + if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) - .cmt-body.twikoo - --twikoo-lighttext: #f2b94b; - --twikoo-secondtext: #a1a2b8; - --twikoo-emoji-background: darken($dark-block, 1); - --twikoo-theme: #409eff; + set_darkmode_comments() + +if hexo-config('style.darkmode') == 'always' + set_darkmode_comments() \ No newline at end of file diff --git a/source/css/_plugins/comments/valine.styl b/source/css/_plugins/comments/valine.styl index 40d1f46..e575d78 100644 --- a/source/css/_plugins/comments/valine.styl +++ b/source/css/_plugins/comments/valine.styl @@ -49,12 +49,16 @@ if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) box-shadow: none + if hexo-config('style.darkmode') == 'always' + box-shadow: none &:active background: linear-gradient(145deg, #eee, #fff) box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4) if hexo-config('style.darkmode') == 'auto' @media (prefers-color-scheme: dark) box-shadow: none + if hexo-config('style.darkmode') == 'always' + box-shadow: none .vedit .vctrl span padding: 0