apply dark mode colors

packages/core/scss/bootstrap/theming/_root-light.scss

@@ -1,34 +1,4 @@
 & {
-  @each $color, $value in $theme-colors {
-    @if $color == 'primary' or $color == 'secondary' {
-      --#{$prefix}#{$color}: #{$value};
-    }
-  }
-
-  @each $color, $value in $theme-colors-rgb {
-    @if $color == 'primary' or $color == 'secondary' {
-      --#{$prefix}#{$color}-rgb: #{$value};
-    }
-  }
-
-  @each $color, $value in $theme-colors-text {
-    @if $color == 'primary' or $color == 'secondary' {
-      --#{$prefix}#{$color}-text-emphasis: #{$value};
-    }
-  }
-
-  @each $color, $value in $theme-colors-bg-subtle {
-    @if $color == 'primary' or $color == 'secondary' {
-      --#{$prefix}#{$color}-bg-subtle: #{$value};
-    }
-  }
-
-  @each $color, $value in $theme-colors-border-subtle {
-    @if $color == 'primary' or $color == 'secondary' {
-      --#{$prefix}#{$color}-border-subtle: #{$value};
-    }
-  }
-
   // Root and body
   --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};

packages/core/scss/bootstrap/theming/_root.scss

@@ -0,0 +1,31 @@
+& {
+  @each $color, $value in $theme-colors {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-text {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+  }
+}

packages/preset-themes/src/styles/mono-blue.scss

@@ -19,7 +19,7 @@
   $body-tertiary-color:       rgba($body-color, .5);
   $body-tertiary-bg:          $gray-100;
 
-  $body-emphasis-color:       black;
+  $border-color:              $gray-300;
 
   $link-color:                $gray-800;
 
@@ -28,6 +28,7 @@
 
   @import '@growi/core/scss/bootstrap/init-stage-2';
 
+  @import '@growi/core/scss/bootstrap/theming/root';
   @import '@growi/core/scss/bootstrap/theming/root-light';
   @import '@growi/core/scss/bootstrap/theming/apply';
 
@@ -41,6 +42,50 @@
   }
 }
 
+:root[data-bs-theme='dark'] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
+
+  $primary: #439cb9;
+  $secondary: $gray-500;
+  $highlight: #64a9ed;
+
+  @include generate-color-palette('primary', $primary);
+  @include generate-color-palette('highlight', $highlight);
+
+  $body-color-dark:                   $gray-200;
+  $body-bg-dark:                      #16202c;
+
+  $body-secondary-color-dark:         rgba($body-color-dark, .75);
+  $body-secondary-bg-dark:            $gray-800;
+
+  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
+
+  $border-color-dark:                 $gray-700;
+
+  $link-color-dark:                   $gray-300;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/root';
+  @import '@growi/core/scss/bootstrap/theming/root-dark';
+  @import '@growi/core/scss/bootstrap/theming/apply';
+
+  .wiki {
+    a {
+      color: var(--grw-primary-500);
+      &:hover {
+        color: var(--grw-primary-300);
+      }
+    }
+  }
+}
+
 // @use '@growi/core/scss/bootstrap/init' as bs;
 
 // @use './variables' as var;