From f67ff533016305f2b5a4b36f02b24bac2a0c91cf Mon Sep 17 00:00:00 2001 From: BackRunner Date: Thu, 12 Mar 2020 14:14:06 +0800 Subject: [PATCH 1/5] Fix button styles in dark mode (Pisces & Gemini) --- source/css/_variables/Pisces.styl | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 8ea2113b03..6bc72871e2 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -60,6 +60,13 @@ $btn-default-color = $text-color; $btn-default-border-color = $text-color; $btn-default-hover-bg = $black-deep; $btn-default-hover-color = white; +if (hexo-config('darkmode')) { + $btn-default-bg = #2e2e2e; + $btn-default-hover-bg = #4e4e4e; + $btn-default-color = var(--text-color); + $btn-default-border-color = #3e3e3e; + $btn-default-hover-border-color = #4e4e4e; +} // Back to top $b2t-opacity = .6; From f4a1c25f41dce8c184e04312f8ecfdd68a6b55f4 Mon Sep 17 00:00:00 2001 From: BackRunner <12205593+backrunner@users.noreply.github.com> Date: Thu, 12 Mar 2020 14:46:15 +0800 Subject: [PATCH 2/5] Make styles compatible with prefers-color-scheme --- source/css/_variables/Pisces.styl | 36 +++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 6bc72871e2..00f9dbf5da 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -54,19 +54,33 @@ $site-state-item-border-color = $gainsboro; // -------------------------------------------------- // Button -$btn-default-radius = 2px; -$btn-default-bg = white; -$btn-default-color = $text-color; -$btn-default-border-color = $text-color; -$btn-default-hover-bg = $black-deep; -$btn-default-hover-color = white; +:root { + --btn-default-bg: white; + --btn-default-color: $text-color; + --btn-default-border-color: $text-color; + --btn-default-hover-bg: $black-deep; + --btn-default-hover-color: white; + --btn-default-hover-border-color: $black-deep; +} if (hexo-config('darkmode')) { - $btn-default-bg = #2e2e2e; - $btn-default-hover-bg = #4e4e4e; - $btn-default-color = var(--text-color); - $btn-default-border-color = #3e3e3e; - $btn-default-hover-border-color = #4e4e4e; + @media (prefers-color-scheme: dark) { + :root{ + --btn-default-bg: #2e2e2e; + --btn-default-color: var(--text-color); + --btn-default-border-color: #3e3e3e; + --btn-default-hover-bg: #4e4e4e; + --btn-default-hover-color: #4e4e4e; + --btn-default-hover-border-color: #4e4e4e; + } + } } +$btn-default-radius = 2px; +$btn-default-bg = var(--btn-default-bg); +$btn-default-color = var(--btn-default-color); +$btn-default-border-color = var(--btn-default-border-color); +$btn-default-hover-bg = var(--btn-default-hover-bg); +$btn-default-hover-color = var(--btn-default-hover-colo); +$btn-default-hover-border-color = var(--btn-default-hover-border-color); // Back to top $b2t-opacity = .6; From 7dc0cfbcd248e4c83be4d467dd0b9a9e2b11405c Mon Sep 17 00:00:00 2001 From: BackRunner <12205593+backrunner@users.noreply.github.com> Date: Thu, 12 Mar 2020 14:51:10 +0800 Subject: [PATCH 3/5] Fix bug and replace hex color with color variables --- source/css/_variables/Pisces.styl | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 00f9dbf5da..7fb5d2fee3 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -67,10 +67,10 @@ if (hexo-config('darkmode')) { :root{ --btn-default-bg: #2e2e2e; --btn-default-color: var(--text-color); - --btn-default-border-color: #3e3e3e; - --btn-default-hover-bg: #4e4e4e; - --btn-default-hover-color: #4e4e4e; - --btn-default-hover-border-color: #4e4e4e; + --btn-default-border-color: $black-dim; + --btn-default-hover-bg: $black-light; + --btn-default-hover-color: var(--text-color); + --btn-default-hover-border-color: $black-light; } } } @@ -79,7 +79,7 @@ $btn-default-bg = var(--btn-default-bg); $btn-default-color = var(--btn-default-color); $btn-default-border-color = var(--btn-default-border-color); $btn-default-hover-bg = var(--btn-default-hover-bg); -$btn-default-hover-color = var(--btn-default-hover-colo); +$btn-default-hover-color = var(--btn-default-hover-color); $btn-default-hover-border-color = var(--btn-default-hover-border-color); // Back to top From 03249636af33bd1eaf3ae4abbab9113d4fd22f7f Mon Sep 17 00:00:00 2001 From: BackRunner <12205593+backrunner@users.noreply.github.com> Date: Thu, 12 Mar 2020 15:55:28 +0800 Subject: [PATCH 4/5] Move styles to _colors.styl --- source/css/_colors.styl | 12 ++++++++ source/css/_common/scaffolding/buttons.styl | 12 ++++---- source/css/_schemes/Mist/_posts-expand.styl | 4 +-- source/css/_schemes/Muse/_header.styl | 2 +- source/css/_variables/Pisces.styl | 33 ++++----------------- source/css/_variables/base.styl | 20 ++++++++----- 6 files changed, 40 insertions(+), 43 deletions(-) diff --git a/source/css/_colors.styl b/source/css/_colors.styl index e15b1e82b1..6be8b9ef5b 100644 --- a/source/css/_colors.styl +++ b/source/css/_colors.styl @@ -10,6 +10,12 @@ --table-row-odd-bg-color: $table-row-odd-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color; --menu-item-bg-color: $menu-item-bg-color; + --btn-default-bg: $btn-default-bg; + --btn-default-color: $btn-default-color; + --btn-default-border-color: $btn-default-border-color; + --btn-default-hover-bg: $btn-default-hover-bg; + --btn-default-hover-color: $btn-default-hover-color; + --btn-default-hover-border-color: $btn-default-hover-border-color; } if (hexo-config('darkmode')) { @@ -26,6 +32,12 @@ if (hexo-config('darkmode')) { --table-row-odd-bg-color: $table-row-odd-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark; + --btn-default-bg: $btn-default-bg-dark; + --btn-default-color: $btn-default-color-dark; + --btn-default-border-color: $btn-default-border-color-dark; + --btn-default-hover-bg: $btn-default-hover-bg-dark; + --btn-default-hover-color: $btn-default-hover-color-dark; + --btn-default-hover-border-color: $btn-default-hover-border-color-dark; } img { diff --git a/source/css/_common/scaffolding/buttons.styl b/source/css/_common/scaffolding/buttons.styl index 51b5458a35..6c0145da02 100644 --- a/source/css/_common/scaffolding/buttons.styl +++ b/source/css/_common/scaffolding/buttons.styl @@ -1,8 +1,8 @@ .btn { - background: $btn-default-bg; - border: 2px solid $btn-default-border-color; + background: var(--btn-default-bg); + border: 2px solid var(--btn-default-border-color); border-radius: $btn-default-radius; - color: $btn-default-color; + color: var(--btn-default-color); display: inline-block; font-size: $font-size-small; line-height: 2; @@ -12,9 +12,9 @@ the-transition(); &:hover { - background: $btn-default-hover-bg; - border-color: $btn-default-hover-border-color; - color: $btn-default-hover-color; + background: var(--btn-default-hover-bg); + border-color: var(--btn-default-hover-border-color); + color: var(--btn-default-hover-color); } + .btn { diff --git a/source/css/_schemes/Mist/_posts-expand.styl b/source/css/_schemes/Mist/_posts-expand.styl index f4e577bb8a..48d2e131dd 100644 --- a/source/css/_schemes/Mist/_posts-expand.styl +++ b/source/css/_schemes/Mist/_posts-expand.styl @@ -60,12 +60,12 @@ // color: $grey-dim; background: none; border: 0; - border-bottom: 2px solid $btn-default-border-color; + border-bottom: 2px solid var(--btn-default-border-color); padding: 0; transition-property: border; &:hover { - border-bottom-color: $btn-default-hover-border-color; + border-bottom-color: var(--btn-default-hover-border-color); } } } diff --git a/source/css/_schemes/Muse/_header.styl b/source/css/_schemes/Muse/_header.styl index 790b7a7ed7..1a60d3420a 100644 --- a/source/css/_schemes/Muse/_header.styl +++ b/source/css/_schemes/Muse/_header.styl @@ -21,5 +21,5 @@ } .brand { - background: $btn-default-bg; + background: var(--btn-default-bg); } diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 7fb5d2fee3..8ea2113b03 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -54,33 +54,12 @@ $site-state-item-border-color = $gainsboro; // -------------------------------------------------- // Button -:root { - --btn-default-bg: white; - --btn-default-color: $text-color; - --btn-default-border-color: $text-color; - --btn-default-hover-bg: $black-deep; - --btn-default-hover-color: white; - --btn-default-hover-border-color: $black-deep; -} -if (hexo-config('darkmode')) { - @media (prefers-color-scheme: dark) { - :root{ - --btn-default-bg: #2e2e2e; - --btn-default-color: var(--text-color); - --btn-default-border-color: $black-dim; - --btn-default-hover-bg: $black-light; - --btn-default-hover-color: var(--text-color); - --btn-default-hover-border-color: $black-light; - } - } -} -$btn-default-radius = 2px; -$btn-default-bg = var(--btn-default-bg); -$btn-default-color = var(--btn-default-color); -$btn-default-border-color = var(--btn-default-border-color); -$btn-default-hover-bg = var(--btn-default-hover-bg); -$btn-default-hover-color = var(--btn-default-hover-color); -$btn-default-hover-border-color = var(--btn-default-hover-border-color); +$btn-default-radius = 2px; +$btn-default-bg = white; +$btn-default-color = $text-color; +$btn-default-border-color = $text-color; +$btn-default-hover-bg = $black-deep; +$btn-default-hover-color = white; // Back to top $b2t-opacity = .6; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index ee8bc04be1..d1efb1890e 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -137,13 +137,19 @@ $code-background = $gainsboro; // Buttons // -------------------------------------------------- -$btn-default-radius = 0; -$btn-default-bg = $black-deep; -$btn-default-color = white; -$btn-default-border-color = $black-deep; -$btn-default-hover-bg = white; -$btn-default-hover-color = $black-deep; -$btn-default-hover-border-color = $black-deep; +$btn-default-radius = 0; +$btn-default-bg = $black-deep; +$btn-default-bg-dark = $black-deep; +$btn-default-color = white; +$btn-default-color-dark = $text-color-dark; +$btn-default-border-color = $black-deep; +$btn-default-border-color-dark = $black-dim; +$btn-default-hover-bg = white; +$btn-default-hover-bg-dark = $black-light; +$btn-default-hover-color = $black-deep; +$btn-default-hover-color-dark = $text-color-dark; +$btn-default-hover-border-color = $black-deep; +$btn-default-hover-border-color-dark = $black-light; // Pagination From 6c409fbc7a5cd1fa2bb307c7694cd5a72a8a3965 Mon Sep 17 00:00:00 2001 From: BackRunner <12205593+backrunner@users.noreply.github.com> Date: Thu, 12 Mar 2020 16:07:25 +0800 Subject: [PATCH 5/5] fix: Replace $btn-default-*** with var(--btn-default-***) --- source/css/_common/scaffolding/comments.styl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/css/_common/scaffolding/comments.styl b/source/css/_common/scaffolding/comments.styl index fe0b2ee32b..d006bbc36a 100644 --- a/source/css/_common/scaffolding/comments.styl +++ b/source/css/_common/scaffolding/comments.styl @@ -13,9 +13,9 @@ margin: .1em .2em; &.active { - background: $btn-default-hover-bg; - border-color: $btn-default-hover-border-color; - color: $btn-default-hover-color; + background: var(--btn-default-hover-bg); + border-color: var(--btn-default-hover-border-color); + color: var(--btn-default-hover-color); } } }