Add dark color scheme for text selection (#829)

next-theme · Sep 20, 2024 · a9c940e · a9c940e
1 parent 1b85220
commit a9c940e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/source/css/_colors.styl b/source/css/_colors.styl
@@ -3,6 +3,8 @@
   --content-bg-color: $content-bg-color;
   --card-bg-color: $card-bg-color;
   --text-color: $text-color;
+  --selection-bg: $selection-bg;
+  --selection-color: $selection-color;
   --blockquote-color: $blockquote-color;
   --link-color: $link-color;
   --link-hover-color: $link-hover-color;
@@ -35,6 +37,8 @@ if (hexo-config('darkmode')) {
       --content-bg-color: $content-bg-color-dark;
       --card-bg-color: $card-bg-color-dark;
       --text-color: $text-color-dark;
+      --selection-bg: $selection-bg-dark;
+      --selection-color: $selection-color-dark;
       --blockquote-color: $blockquote-color-dark;
       --link-color: $link-color-dark;
       --link-hover-color: $link-hover-color-dark;

diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
@@ -1,6 +1,6 @@
 ::selection {
-  background: $selection-bg;
-  color: $selection-color;
+  background: var(--selection-bg);
+  color: var(--selection-color);
 }
 
 html, body {

diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
@@ -59,6 +59,8 @@ $content-bg-color-dark        = $black-dim;
 // Selection
 $selection-bg                 = $blue-deep;
 $selection-color              = $gainsboro;
+$selection-bg-dark            = $grey;
+$selection-color-dark         = $black-dim;
 
 // Dark mode color
 $card-bg-color                = $whitesmoke;