Create _marker.scss

apps/app/src/styles/_marker.scss

@@ -0,0 +1,23 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
+// Light mode color
+@include bs.color-mode(light) {
+  :root {
+    --grw-marker-yellow: #FFFA90;
+    --grw-marker-red: #FFAADD;
+    --grw-marker-blue: #9AE0FF;
+    --grw-marker-cyan: #88FFF0;
+    --grw-marker-green: #B8FF9A;
+  }
+}
+
+// dark mode color
+@include bs.color-mode(dark) {
+  :root {
+    --grw-marker-yellow: #888000;
+    --grw-marker-red: #900066;
+    --grw-marker-blue: #0A6A9A;
+    --grw-marker-cyan: #008888;
+    --grw-marker-green: #007000;
+  }
+}

apps/app/src/styles/_variables.scss

@@ -1,10 +1,3 @@
-// == Marker Color
-$grw-marker-yellow: #ff6;
-$grw-marker-red: #f6c;
-$grw-marker-blue: #6cf;
-$grw-marker-cyan: #6ff;
-$grw-marker-green: #6f6;
-
 // == Layout
 $grw-sidebar-nav-width: 48px;
 $grw-navbar-bottom-height: 62px;

apps/app/src/styles/style-app.scss

@@ -25,7 +25,7 @@
 @import 'mirror_mode';
 @import 'modal';
 @import 'share-link';
-
+@import 'marker';
 
 /*
  * for Guest User Mode