Feature/mkdocs version bump (#240)

* fix links (#239)

Co-authored-by: hay-kot <hay-kot@pm.me>

* fix #238

* bump mkdocs version

* light/dark toggle

* light/dark mode css

* API_DOCS defaults to True

* disable build on push for master

Co-authored-by: hay-kot <hay-kot@pm.me>

docs/docs/assets/stylesheets/custom.css

@@ -1,14 +1,20 @@
-:root {
+[data-md-color-scheme="mealie"] {
   --md-primary-fg-color: #e58325;
   --md-primary-fg-color--light: #e58325;
-  --md-primary-fg-color--dark: #e58325;
   --md-accent-fg-color: #e58325;
+  --md-custom-h2-color: #333;
   --md-accent-fg-color--light: #e58325;
-  --md-accent-fg-color--dark: #e58325;
+  --md-default-accent-bg-color: #f7fafc;
 }
 
-body {
-  background: var(--md-primary-bg-color);
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: #e58325;
+  --md-primary-fg-color--dark: #e58325;
+  --md-accent-fg-color: #e58325;
+  --md-accent-fg-color--dark: #e58325;
+  --md-custom-h2-color: rgb(167, 167, 167);
+  --md-default-bg-color: #1a1b1b;
+  --md-default-accent-bg-color: #1f1e1e;
 }
 
 /* frontpage elements */

docs/docs/overrides/home.html

@@ -16,7 +16,6 @@
 
     .tx-container {
         padding-top: .0rem;
-        background: var(--md-primary-bg-color)
     }
 
     .tx-hero {
@@ -27,7 +26,7 @@
     .tx-hero h1 {
         margin-bottom: 1rem;
         font-family: "Roboto";
-        color: #30353a;
+        color: var(--md-custom-h2-color);
         font-weight: 500
     }
 
@@ -68,7 +67,7 @@
     }
 
     .feature-container {
-        background-color: #F7FAFC;
+        background-color: var(--md-default-accent-bg-color);
     }
 
     .top-hr {
@@ -85,7 +84,7 @@
     }
 
     .feature-item h2 {
-        color: #333;
+        color: var(--md-custom-h2-color);
         font-weight: 300;
         font-size: 25px;
         white-space: nowrap;
@@ -102,7 +101,7 @@
         line-height: 1.8em;
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
-        color: #111;
+        color: var(--webkit-print-color-adjust);
         margin: 0 0 10px;
         display: block;
     }
@@ -162,11 +161,6 @@
             flex: 1;
             min-width: 0;
         }
-
-        /* .feature-item:hover {
-            background-color: #fea55247;
-            border-radius: 3px;
-        } */
     }
 
     .hr {

docs/mkdocs.yml

@@ -1,8 +1,22 @@
 site_name: Mealie
 demo_url: https://mealie-demo.hay-kot.dev/
 theme:
+  palette:
+    # Light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: mealie
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
   custom_dir: docs/overrides
   features:
+    - navigation.top
     - navigation.instant
     - navigation.expand
     - navigation.sections