[HelpDot] Add light mode

docs/_sass/_colors.scss

@@ -1,36 +1,41 @@
-// Product Color Spectrum
-$color-product-dark-100: #061B09;
-$color-product-dark-200: #072419;
-$color-product-dark-300: #0A2E25;
-$color-product-dark-400: #1A3D32;
-$color-product-dark-500: #224F41;
-$color-product-dark-600: #2A604F;
-$color-product-dark-700: #8B9C8F;
-$color-product-dark-800: #AFBBB0;
-$color-product-dark-900: #E7ECE9;
+:root {
+    --color-text: #002e22;
+    --color-button-text: #fff;
+    --color-text-supporting: #76847e;
+    --color-icons: #a2a9a3;
+    --color-borders: #e6e1da;
+    --color-highlightBG: #f8f4f0;
+    --color-row-hover: #f2ede7;
+    --color-appBG: #fcfbf9;
+    --color-success: #03d47c;
+    --color-accent: #03d47c;
+    --color-link: #5ab0ff;
+    --color-link-hovered: #b0d9ff;
+    --color-button-background: #e6e1da;
+    --color-button-background-hover: #d8d1c7;
+    --color-button-success-background: #03d47c;
+    --color-button-success-background-hover: #00a862;
+    --color-overlay: rgba(0, 0, 0, 0.28);
+}
 
-// Colors for Links and Success
-$color-blue200: #B0D9FF;
-$color-blue300: #5AB0FF;
-$color-green400: #03D47C;
-$color-green500: #00a862;
-
-// Overlay BG color
-$color-overlay-background: rgba(26, 61, 50, 0.72);
-
-// UI Colors
-$color-text: $color-product-dark-900;
-$color-text-supporting: $color-product-dark-800;
-$color-icons: $color-product-dark-700;
-$color-borders: $color-product-dark-400;
-$color-highlightBG: $color-product-dark-200;
-$color-row-hover: $color-product-dark-300;
-$color-appBG: $color-product-dark-100;
-$color-success: $color-green400;
-$color-accent : $color-green400;
-$color-link: $color-blue300;
-$color-link-hovered: $color-blue200;
-$color-button-background: $color-product-dark-400;
-$color-button-background-hover: $color-product-dark-500;
-$color-button-success-background: $color-green400;
-$color-button-success-background-hover: $color-green500;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-text: #e7ece9;
+        --color-button-text: #fff;
+        --color-text-supporting: #afbbb0;
+        --color-icons: #8b9c8f;
+        --color-borders: #1a3d32;
+        --color-highlightBG: #072419;
+        --color-row-hover: #0a2e25;
+        --color-appBG: #061b09;
+        --color-success: #03d47c;
+        --color-accent: #03d47c;
+        --color-link: #5ab0ff;
+        --color-link-hovered: #b0d9ff;
+        --color-button-background: #1a3d32;
+        --color-button-background-hover: #224f41;
+        --color-button-success-background: #03d47c;
+        --color-button-success-background-hover: #00a862;
+        --color-overlay: rgba(26, 61, 50, 0.72);
+    }
+}