diff --git a/docs/assets/stylesheets/theme.css b/docs/assets/stylesheets/theme.css
index 88d407881..3e1134696 100644
--- a/docs/assets/stylesheets/theme.css
+++ b/docs/assets/stylesheets/theme.css
@@ -19,25 +19,62 @@
   --reannz-orange: rgb(241, 128, 0);
   --reannz-purple: rgb(132, 121, 183);
 
-  [data-md-color-scheme="default"] {
-    --md-primary-fg-color: var(--reannz-blue--dark);
-    --md-accent-fg-color: var(--reannz-blue);
-  }
+[data-md-color-scheme="default"] {
+  --md-primary-fg-color: var(--reannz-blue--dark); /* head bar background color */
+  --md-accent-fg-color: var(--reannz-blue); /* hover color for sidebar links */
+  /* --md-accent-bg-color: var(--reannz-orange); */ /* cannot figure what this one does */
+  /* --md-primary-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
+  /*--md-primary-bg-color: var(--reannz-orange); */ /* text/icon color for head bar */
+  /* --md-accent-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
+  /* --md-default-fg-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
+  /* --md-default-bg-color: var(--reannz-orange); */ /* main background color */
+  /* --md-code-fg-color: var(--reannz-orange); */ /* main color for code text */
+  /* --md-code-bg-color: var(--reannz-orange); */ /* main color for code background */
+  /* --md-typeset-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
+}
 
   /* --md-accent-bg-color:                rgb(210,227,235); */
-  [data-md-color-scheme="slate"] {
-    --md-primary-fg-color: var(--reannz-blue--dark);
-    --md-accent-fg-color: var(--reannz-blue--darkish);
-
-    .nt-card-image>img {
-      filter: brightness(0) invert(1);
-    }
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: var(--reannz-blue--dark); /* head bar background color */
+  --md-accent-fg-color: var(--reannz-blue); /* hover color for sidebar links */
+  /* --md-accent-bg-color: var(--reannz-orange); */ /* cannot figure what this one does */
+  /* --md-primary-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
+  /*--md-primary-bg-color: var(--reannz-orange); */ /* text/icon color for head bar */
+  /* --md-accent-fg-color--light: var(--reannz-orange); */ /* cannot figure what this one does */
+  /* --md-default-fg-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
+  /* --md-default-bg-color: var(--reannz-orange); */ /* main background color */
+  /* --md-code-fg-color: var(--reannz-orange); */ /* main color for code text */
+  /* --md-code-bg-color: var(--reannz-orange); */ /* main color for code background */
+  /* --md-typeset-color: var(--reannz-orange); */ /* main text color, sub H1 headers too */
+  --md-typeset-a-color: rgb(0, 206, 255); /* sidebar active link color */
+
+  .nt-card-image>img {
+    filter: brightness(0) invert(1);
   }
+}
 
   --md-status--tutorial: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M 12.02213,22.351816 4.4667277,18.181642 V 11.597159 L 0.14935611,9.182849 12.02213,2.5983658 23.894902,9.182849 v 8.779312 h -2.158685 v -7.572156 l -2.158686,1.207154 v 6.584483 z m 0,-9.108535 L 19.415628,9.182849 12.02213,5.122418 4.6286292,9.182849 Z m 0,6.611918 5.396715,-2.963017 V 12.749445 L 12.02213,15.767333 6.6254139,12.749445 v 4.142737 z m 0,-6.611918 z m 0,2.469181 z m 0,0 z" style="stroke-width:0.0272085" /></svg>');
   --md-admonition-icon--prerequisite: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
   --md-admonition-icon--time: url('data:image/svg+xml;charset=utf-8,<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">  <path d="M 8.4571429,2.2857143 V 0 H 15.314286 V 2.2857143 Z M 10.742857,14.857143 h 2.285714 V 8 H 10.742857 Z M 11.885714,24 Q 9.7714286,24 7.9,23.185714 6.0285714,22.371429 4.6285714,20.971429 3.2285714,19.571429 2.4142857,17.7 1.6,15.828571 1.6,13.714286 1.6,11.6 2.4142857,9.7285714 3.2285714,7.8571429 4.6285714,6.4571429 q 1.4,-1.4 3.2714286,-2.2142858 1.8714286,-0.8142857 3.985714,-0.8142857 1.771429,0 3.4,0.5714286 1.628572,0.5714286 3.057143,1.6571429 l 1.6,-1.6 1.6,1.6 -1.6,1.6 Q 21.028571,8.6857143 21.6,10.314286 q 0.571429,1.628571 0.571429,3.4 0,2.114285 -0.814286,3.985714 -0.814286,1.871429 -2.214286,3.271429 -1.4,1.4 -3.271428,2.214285 Q 14,24 11.885714,24 Z m 0,-2.285714 q 3.314286,0 5.657143,-2.342857 2.342857,-2.342858 2.342857,-5.657143 0,-3.314286 -2.342857,-5.6571431 Q 15.2,5.7142857 11.885714,5.7142857 q -3.3142854,0 -5.6571426,2.3428572 Q 3.8857143,10.4 3.8857143,13.714286 q 0,3.314285 2.3428571,5.657143 2.3428572,2.342857 5.6571426,2.342857 z m 0,-8 z" style="stroke-width:0.0285714"/></svg>');
 }
+
+/* e.g. inactive link text */
+.md-typeset a {
+  color: var(--reannz-blue--shade-negative1);
+}
+
+.md-typeset a:hover {
+  color: var(--reannz-blue);
+}
+
+[data-md-color-scheme="slate"] .md-typeset a:hover {
+  color: rgb(0, 206, 255);
+}
+
+[data-md-color-scheme="slate"] .md-typeset a {
+  color: var(--reannz-blue);
+}
+
 /* Logo biggification */
 /* COMMENTED OUT FOR REANNZ LOGO */
 /* .md-header__button.md-logo img, .md-header__button.md-logo svg {
@@ -106,15 +143,6 @@
   background-color: var(--reannz-black);
 }
 
-/* e.g. inactive link text */
-.md-typeset a {
-  color: var(--reannz-blue--shade-negative1);
-}
-
-.md-typeset a:hover {
-  color: var(--reannz-blue);
-}
-
 /* Make deprecated logo stand out */
 span.md-status.md-status--deprecated {
   filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(330deg) brightness(70%) contrast(1000%);
@@ -155,7 +183,7 @@ span.md-status.md-status--deprecated {
 }
 
 .cards {
-  color: var(--md-typeset-color);
+  color: var(--md-typeset-color); /* I don't think this does anything */
 }
 
 .cards>a {
@@ -179,7 +207,24 @@ span.md-status.md-status--deprecated {
   color: rgba(0, 0, 0, 0.87);
 }
 
-/* Turirial deader */
+[data-md-color-scheme="slate"] .grid.cards>a>img {
+  filter: brightness(0) invert(0.75);
+}
+
+[data-md-color-scheme="slate"] .grid.cards>a:hover>img {
+  filter: invert(0.75);
+}
+
+[data-md-color-scheme="slate"] .grid.cards>a>h3 {
+  color: var(--md-typeset-color);
+}
+
+[data-md-color-scheme="slate"] .grid.cards>a>p {
+  color: var(--md-typeset-color);
+}
+
+
+/* Tutorial header */
 .tutorial-banner {
   display: none;
   background: var(--reannz-green);
@@ -364,7 +409,7 @@ div.quiz-feedback {
   border-style: none;
 }
 
-/* Formattig a bit broke. hide for now */
+/* Formatting a bit broke. hide for now */
 .quiz-header-link{
   display: none;
 }
diff --git a/mkdocs.yml b/mkdocs.yml
index 0cda49fc8..1040b3767 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -12,13 +12,23 @@ theme:
   language: en
   logo: assets/icons/logo_reannz.svg
   palette:
-    - primary: custom
+      # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+      # Palette toggle for light mode
+    - media: "(prefers-color-scheme: light)"
       scheme: default
       toggle:
         icon: material/lightbulb
         name: Switch to dark mode
-    - primary: custom
+      primary: custom
+      # Palette toggle for dark mode
+    - media: "(prefers-color-scheme: dark)"
       scheme: slate
+      primary: custom
+      accent: custom
       toggle:
         icon: material/lightbulb-outline
         name: Switch to light mode