dark mode improvements

tabler · Jun 3, 2023 · c6f83cb · c6f83cb
1 parent 4c88481
commit c6f83cb
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
@@ -1,10 +1,15 @@
+// COLORS
+$bg-surface-dark: #161f32;
+$bg-surface-secondary-dark: #1b293a;
+$bg-surface-tertiary-dark: #131c2e;
+
 //
 // Dark mode
 //
 $darken-dark: darken($dark, 2%) !default;
 $lighten-dark: lighten($dark, 2%) !default;
 $border-color-dark: lighten($dark, 4%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
 $border-dark-color-dark: lighten($dark, 4%) !default;
 $border-color-active-dark: lighten($dark, 12%) !default;
 
@@ -14,4 +19,16 @@ $body-emphasis-color-dark: $white !default;
 
 $code-color-dark: var(--#{$prefix}gray-300) !default;
 $text-secondary-dark: rgba(153, 159, 164, 1) !default;
-
+
+//
+$body-color-dark: $gray-500 !default;
+$body-bg-dark: var(--#{$prefix}surface-secondary-dark) !default;
+$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
+$body-secondary-bg-dark: var(--#{$prefix}bg-surface-dark) !default;
+$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
+$body-tertiary-bg-dark: var(--#{$prefix}bg-surface-tertiary-dark) !default;
+$body-emphasis-color-dark: $white !default;
+$border-color-dark: $gray-700 !default;
+$border-color-translucent-dark: rgba($white, 0.15) !default;
+
+
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
@@ -25,6 +25,9 @@
   --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
   --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
   --#{$prefix}bg-surface-dark: #{$bg-surface-dark};
+  --#{$prefix}bg-surface-secondary-dark: #{$bg-surface-secondary-dark};
+  --#{$prefix}bg-surface-tertiary-dark: #{$bg-surface-tertiary-dark};
+
   --#{$prefix}bg-forms: var(--#{$prefix}bg-surface);
 
   --#{$prefix}border-color: #{$border-color};
@@ -45,7 +48,7 @@
 
   --#{$prefix}dark-mode-border-color: #{$border-color-dark};
   --#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
-  --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
+  // --#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
   --#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
 
   --#{$prefix}page-padding: #{$page-padding};