Add automatic dark theme support via prefers-color-scheme

_sass/custom/custom.scss

@@ -1,12 +1,206 @@
-h1,h2,h3,h4,h5,h6 { color: #4E5B31; }
+/* Define CSS custom properties for theme colors */
+:root {
+  /* Light mode colors (default) */
+  --body-bg: #fff;
+  --body-text: #5c5962;
+  --body-heading: #4E5B31;
+  --link: #6BA539;
+  --sidebar-bg: #f5f6fa;
+  --code-bg: #f5f6fa;
+  --border: #eeebee;
+  --table-bg: #fff;
+  --search-bg: #fff;
+  --base-button: #f7f7f7;
+  --nav-text: #5c5962;
+  --nav-highlight: #eeebee;
+  --aux-nav-bg: #fff;
+}
 
-a[href] { color: #6BA539; }
+/* Dark mode colors - applied when OS prefers dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: #27262b;
+    --body-text: #e6e1e8;
+    --body-heading: #97D700;
+    --link: #97D700;
+    --sidebar-bg: #27262b;
+    --code-bg: #31343f;
+    --border: #44434d;
+    --table-bg: #302d36;
+    --search-bg: #302d36;
+    --base-button: #302d36;
+    --nav-text: #e6e1e8;
+    --nav-highlight: #3d3d3d;
+    --aux-nav-bg: #27262b;
+  }
+}
+
+/* Apply custom properties to elements */
+body {
+  background-color: var(--body-bg);
+  color: var(--body-text);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--body-heading);
+}
+
+a[href] {
+  color: var(--link);
+}
+
+.site-nav,
+.side-bar {
+  background-color: var(--sidebar-bg);
+}
+
+code {
+  background-color: var(--code-bg);
+}
+
+.site-footer {
+  background-color: var(--sidebar-bg);
+  border-color: var(--border);
+}
+
+.site-header {
+  border-color: var(--border);
+}
+
+table {
+  background-color: var(--table-bg);
+  border-color: var(--border);
+}
+
+table th,
+table td {
+  border-color: var(--border);
+}
+
+.search-input {
+  background-color: var(--search-bg);
+  color: var(--body-text);
+}
+
+.btn {
+  background-color: var(--base-button);
+}
+
+pre {
+  background-color: var(--code-bg);
+}
+
+/* Syntax highlighting styles */
+.hljs,
+pre.nohighlight,
+pre code {
+  background-color: var(--code-bg);
+}
+
+/* Dark mode syntax highlighting color adjustments */
+@media (prefers-color-scheme: dark) {
+  .hljs {
+    color: #e6e1e8;
+  }
+
+  .hljs-comment,
+  .hljs-meta {
+    color: #8a8a8a;
+  }
+
+  .hljs-string,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-strong,
+  .hljs-emphasis,
+  .hljs-quote {
+    color: #f5ab78;
+  }
+
+  .hljs-number {
+    color: #7dd3c0;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-type {
+    color: #f286c4;
+  }
+
+  .hljs-literal,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-attribute {
+    color: #6fc3df;
+  }
+
+  .hljs-section,
+  .hljs-name {
+    color: #97D700;
+  }
+
+  .hljs-tag {
+    color: #e6e1e8;
+  }
+
+  .hljs-title,
+  .hljs-attr,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: #bb9af7;
+  }
+
+  .hljs-addition {
+    color: #7dd3c0;
+    background-color: rgba(125, 211, 192, 0.1);
+  }
+
+  .hljs-deletion {
+    color: #f38ba8;
+    background-color: rgba(243, 139, 168, 0.1);
+  }
+}
+
+/* Navigation styling using CSS variables */
+.navigation,
+.nav-list .nav-list-item > a,
+.nav-list .nav-list-item .nav-list-link {
+  color: var(--nav-text);
+}
+
+/* Search results styling using CSS variables */
+.search-result-doc-title {
+  color: var(--body-heading);
+}
+
+.search-result-section {
+  color: var(--body-text);
+}
+
+/* Auxiliary navigation (top right links) */
+.site-header .aux-nav,
+.aux-nav {
+  background-color: var(--aux-nav-bg);
+}
+
+/* Navigation item highlighting/selection */
+.nav-list-item.active > .nav-list-link,
+.nav-list-item .nav-list-link.active,
+.nav-list .nav-list-item > .nav-list-expander:hover,
+.nav-list .nav-list-item > .nav-list-link:hover,
+.nav-list-item.active {
+  background-color: var(--nav-highlight);
+}
 
 /*.nav-list-link {
    text-transform: lowercase;
 }*/
 
-/* OAI greens 
-6BA539
-4E5B31
-97D700 */
+/* 
+ * OAI greens color palette:
+ * 6BA539 - Primary green (light mode)
+ * 4E5B31 - Dark green (light mode headings)
+ * 97D700 - Bright green (dark mode)
+ */