diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index f727034bbd..3f7e4560d7 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -5,13 +5,38 @@
 
 :root > * {
   /* Footer */
-  --md-footer-bg-color:         #3d90ce;
+  --md-footer-bg-color:         #e8e8e8;
+  --md-footer-bg-color--dark:   #cccdcf;
+  --md-footer-fg-color:         #3d90ce;
+  --md-footer-fg-color--light:  #fff;
+
+  /* Background */
+  --md-default-bg-color:        #f1f1f1;
+}
+
+[data-md-color-scheme="slate"] {
+  /* Footer */
+  --md-footer-bg-color:         #2e3136;
+  --md-footer-bg-color--dark:   #262b2f;
+  --md-footer-fg-color:         #3d90ce;
+  --md-footer-fg-color--light:  #fff;
+
+  /* Background */
+  --md-default-bg-color:        #1e2124;
 }
 
 .md-version__list {
   overflow: auto;
 }
 
+.md-header-nav__title {
+  margin-left: 0;
+}
+
+.md-header__title {
+  margin-left: 0;
+}
+
 ul.video-list {
   counter-reset: section;
   list-style: none;
diff --git a/mkdocs.yml b/mkdocs.yml
index 7001e41ce5..ab6b98d7aa 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -59,13 +59,13 @@ theme:
   favicon: img/favicon.ico
   logo: img/lens-logo-icon.svg
   palette:
-    - scheme: default
-      toggle:
-        icon: material/toggle-switch
-        name: Switch to light mode
     - scheme: slate
       toggle:
         icon: material/toggle-switch-off-outline
+        name: Switch to light mode
+    - scheme: default
+      toggle:
+        icon: material/toggle-switch
         name: Switch to dark mode
   features:
     - toc.autohide