chore: minor style tweaks (#953)

toddbaert · web-flow · commit 9b97c7ebd085 · 2023-10-05T17:40:15.000-04:00
* use same colors as openfeature.dev
* use switch theme toggle
* improve searchability of troubleshooting topic

---------

Signed-off-by: Todd Baert &lt;todd.baert@dynatrace.com&gt;
diff --git a/docs/assets/extra.css b/docs/assets/extra.css
@@ -0,0 +1,20 @@
+/* same trim colors as openfeature.dev */
+:root {
+  --md-primary-fg-color:        #5d5dff;
+  --md-primary-fg-color--light: #5d5dff;
+  --md-primary-fg-color--dark:  #5d5dff;
+  --md-accent-fg-color:        #8d8dff;
+  --md-accent-fg-color--transparent:rgba(141,141,255,0.1);
+}
+
+/* override slate (dark) to match openfeature.dev */
+[data-md-color-scheme="slate"] {
+  --md-default-fg-color:             hsla(240, 15%, 90%, 0.82);
+  --md-default-fg-color--light:      hsla(240, 15%, 90%, 0.56);
+  --md-default-fg-color--lighter:    hsla(240, 15%, 90%, 0.32);
+  --md-default-fg-color--lightest:   hsla(240, 15%, 90%, 0.12);
+  --md-default-bg-color:             hsla(240, 4%, 11%);
+  --md-default-bg-color--light:      hsla(240, 4%, 11%, 0.54);
+  --md-default-bg-color--lighter:    hsla(240, 4%, 11%, 0.26);
+  --md-default-bg-color--lightest:   hsla(240, 4%, 11%, 0.07);
+}
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
@@ -47,7 +47,7 @@ Result:
 
 ---
 
-## Extra/Duplicate Events in File Syncs
+## Extra (Duplicate) Events in File Syncs
 
 When using the file sync, you may notice more events than you'd expect.
 This is attributable to nuances in text editors and the OS/filesystem.
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -6,15 +6,19 @@ theme:
       # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
+      primary: custom
+      accent: custom
       toggle:
-        icon: material/brightness-7
+        icon: material/toggle-switch-outline
         name: Switch to dark mode
 
     # Palette toggle for dark mode
     - media: "(prefers-color-scheme: dark)"
       scheme: slate
+      primary: custom
+      accent: custom
       toggle:
-        icon: material/brightness-4
+        icon: material/toggle-switch-off      
         name: Switch to light mode
   logo: assets/logo-white.svg
   favicon: assets/logo-white.svg
@@ -27,6 +31,8 @@ theme:
     - search.suggest
     - search.highlight
     - search.share
+extra_css:
+  - assets/extra.css
 
 docs_dir: docs
 repo_url: https://github.com/open-feature/flagd
