doc auto color palette option and use it :)

jbms · Apr 11, 2024 · 2b1cdc7 · 2b1cdc7
1 parent fc28efc
commit 2b1cdc7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/docs/conf.py b/docs/conf.py
@@ -135,13 +135,20 @@
         "announce.dismiss",
     ],
     "palette": [
+        {
+            "media": "(prefers-color-scheme)",
+            "toggle": {
+                "icon": "material/brightness-auto",
+                "name": "Switch to light mode",
+            },
+        },
         {
             "media": "(prefers-color-scheme: light)",
             "scheme": "default",
             "primary": "light-green",
             "accent": "light-blue",
             "toggle": {
-                "icon": "material/lightbulb-outline",
+                "icon": "material/lightbulb",
                 "name": "Switch to dark mode",
             },
         },
@@ -151,8 +158,8 @@
             "primary": "deep-orange",
             "accent": "lime",
             "toggle": {
-                "icon": "material/lightbulb",
-                "name": "Switch to light mode",
+                "icon": "material/lightbulb-outline",
+                "name": "Switch to system preference",
             },
         },
     ],

diff --git a/docs/customization.rst b/docs/customization.rst
@@ -433,27 +433,35 @@ Configuration Options
 
         .. themeconf:: media (palette preference)
 
-            In order to automatically set the color palette based on the user's system preference, a media
+            In order to automatically set the color palette based on the user's or system's preference, a media
             query can be specified with the ``media`` field.
 
             .. code-block:: python
 
                 html_theme_options = {
                     "palette": [
+                        {
+                            "media": "(prefers-color-scheme)",
+                            "scheme": "default",
+                            "toggle": {
+                                "icon": "material/toggle-switch",
+                                "name": "Switch to light mode",
+                            }
+                        },
                         {
                             "media": "(prefers-color-scheme: light)",
                             "scheme": "default",
                             "toggle": {
-                                "icon": "material/toggle-switch-off-outline",
+                                "icon": "material/toggle-switch",
                                 "name": "Switch to dark mode",
                             }
                         },
                         {
                             "media": "(prefers-color-scheme: dark)",
                             "scheme": "slate",
                             "toggle": {
-                                "icon": "material/toggle-switch",
-                                "name": "Switch to light mode",
+                                "icon": "material/toggle-switch-off-outline",
+                                "name": "Switch to system preference",
                             }
                         },
                     ]