Fixed darkmode flicker on init

Author: MTobisch

docs/_includes/head.html

@@ -15,4 +15,12 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+  
+  <script>
+    // Immediately apply darkmode styling if relevant to prevent flickering
+    let currentTheme = localStorage.getItem('theme');
+    if (currentTheme && currentTheme === 'dark') {
+      document.documentElement.setAttribute("data-theme", 'dark');
+    }
+  </script>
 </head>

docs/css/default.scss

@@ -234,12 +234,13 @@ table {
   border-spacing: 0px;
 
   th, td {
-    padding: calc(var(--spacing-unit) * 20 * .01) calc(var(--spacing-unit) * .5);
+    padding: calc(var(--spacing-unit) * 18 * .01) calc(var(--spacing-unit) * .5);
     font-size: 0.9em;
   }
 
   // Colors
   th {
+    color:  var(--table-header-text-color);
     background-color: var(--table-header-bg-color);
   }
 

docs/css/dm.scss

@@ -10,7 +10,7 @@ $dm-brand-color-dark:      darken($dm-brand-color, 15%) !default;
 
 $dm-text-color:               #d4d3df !default;
 $dm-title-color:              #eee !default;
-$dm-background-color-1:       #27272e !default;
+$dm-background-color-1:       #2b2b32 !default;
 $dm-background-color-2:       #3e3e48 !default;
 $dm-background-color-code:    #343640 !default;
 $dm-background-color-hover:   #dddddd0f !default;
@@ -19,10 +19,11 @@ $dm-link-base-color:       lighten($dm-brand-color, 5%) !default;
 $dm-link-visited-color:    $dm-link-base-color !default;
 $dm-link-hover-color:      $dm-text-color !default;
 
-$dm-table-header-bg-color:  lighten($dm-background-color-1, 10%) !default;
-$dm-table-zebra-color-1:    lighten($dm-background-color-1, 4%) !default;
-$dm-table-zebra-color-2:    lighten($dm-background-color-1, 4%) !default;
-$dm-table-border-color:   #00000014 !default;
+$dm-table-header-text-color:  $dm-text-color !default;
+$dm-table-header-bg-color:    lighten($dm-background-color-1, 12%) !default;
+$dm-table-zebra-color-1:      lighten($dm-background-color-1, 6%) !default;
+$dm-table-zebra-color-2:      lighten($dm-background-color-1, 4%) !default;
+$dm-table-border-color:     #00000014 !default;
 
 @mixin darkmode-colors {
   --brand-color: #{$lm-brand-color};
@@ -41,6 +42,7 @@ $dm-table-border-color:   #00000014 !default;
   --link-visited-color: #{$dm-link-visited-color};
   --link-hover-color: #{$dm-link-hover-color};
 
+  --table-header-text-color: #{$dm-table-header-text-color};
   --table-header-bg-color: #{$dm-table-header-bg-color};
   --table-zebra-color-1: #{$dm-table-zebra-color-1};
   --table-zebra-color-2: #{$dm-table-zebra-color-2};

docs/css/lm.scss

@@ -19,10 +19,11 @@ $lm-link-base-color:       $lm-brand-color !default;
 $lm-link-visited-color:    darken($lm-link-base-color, 15%) !default;
 $lm-link-hover-color:      $lm-text-color !default;
 
-$lm-table-header-bg-color:  lighten($lm-brand-color, 39%) !default;
-$lm-table-zebra-color-1:    lighten($lm-brand-color, 45%) !default;
-$lm-table-zebra-color-2:    lighten($lm-brand-color, 47%) !default;
-$lm-table-border-color:   #00000014 !default;
+$lm-table-header-text-color:  white !default;
+$lm-table-header-bg-color:      #555561 !default;
+$lm-table-zebra-color-1:        darken($lm-background-color-1, 4%) !default;
+$lm-table-zebra-color-2:        darken($lm-background-color-1, 2%) !default;
+$lm-table-border-color:       #00000014 !default;
 
 @mixin lightmode-colors {
   --brand-color: #{$lm-brand-color};
@@ -41,6 +42,7 @@ $lm-table-border-color:   #00000014 !default;
   --link-visited-color: #{$lm-link-visited-color};
   --link-hover-color: #{$lm-link-hover-color};
 
+  --table-header-text-color: #{$lm-table-header-text-color};
   --table-header-bg-color: #{$lm-table-header-bg-color};
   --table-zebra-color-1: #{$lm-table-zebra-color-1};
   --table-zebra-color-2: #{$lm-table-zebra-color-2};