apply marker color

apps/app/src/components/SearchPage/SearchPageBase.module.scss

@@ -9,6 +9,8 @@
 
 .search-result-content :global  {
   .highlighted-keyword {
-    background:linear-gradient(transparent 40%, #FCF0C0 40%);
+    background:linear-gradient(
+      transparent 40%,
+      var(--grw-marker-bg, var(--grw-marker-bg-yellow)) 40%);
   }
 }

apps/app/src/styles/_marker.scss

@@ -2,22 +2,18 @@
 
 // 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;
-  }
+  --grw-marker-bg-yellow: #FFFA90;
+  --grw-marker-bg-red: #FFAADD;
+  --grw-marker-bg-blue: #9AE0FF;
+  --grw-marker-bg-cyan: #88FFF0;
+  --grw-marker-bg-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;
-  }
+  --grw-marker-bg-yellow: #888000;
+  --grw-marker-bg-red: #900066;
+  --grw-marker-bg-blue: #0A6A9A;
+  --grw-marker-bg-cyan: #008888;
+  --grw-marker-bg-green: #007000;
 }

packages/preset-themes/src/styles/default.scss

@@ -28,6 +28,9 @@
   --grw-wiki-link-color-rgb: var(--grw-highlight-700-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-600-rgb);
   --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
+
+  // change marker color
+  // --grw-marker-bg: var(--grw-marker-bg-red);
 }
 
 :root[data-bs-theme='dark'] {
@@ -58,4 +61,7 @@
   --grw-wiki-link-color-rgb: var(--grw-highlight-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb);
   --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
+
+  // change marker color
+  // --grw-marker-bg: var(--grw-marker-bg-red);
 }