Moved all of the styles in to Flex from my website

static/stylesheet/dark-theme.less

@@ -0,0 +1,114 @@
+// This stylesheet contains style overrides for the dark theme.
+@import "variables.less";
+
+body {
+  background-color: @body-bg-dark-theme;
+  color: @text-color-dark-theme;
+}
+
+hr {
+  color: @solid-dark-grey;
+  background-color: @solid-dark-grey;
+}
+
+aside {
+  background-color: @sidebar-bg-dark-theme;
+  color: @sidebar-text-color;
+
+}
+
+main {
+  nav {
+    border-bottom-color: @nav-border-color-dark-theme;
+  }
+
+  nav, .translations {
+    a {
+      border-color: @nav-border-color-dark-theme;
+    }
+  }
+
+  article {
+    kbd {
+      background-color: #080808;
+      color: @light-grey;
+    }
+
+    *:not(pre) > code {
+      background-color: #080808;
+      border-color: #000;
+    }
+  }
+
+  footer {
+    border-top-color: @footer-border-color-dark-theme;
+  }
+}
+
+div.related-posts {
+  border-color: @rel-post-border-color-dark-theme;
+}
+
+// Admonition
+div.admonition.attention {
+  p, div {
+    color: @admonition-attention-color-dark-theme;
+    background-color: @admonition-attention-bg-color-dark-theme;
+  }
+}
+
+div.admonition.caution {
+  p, div {
+    color: @admonition-caution-color-dark-theme;
+    background-color: @admonition-caution-bg-color-dark-theme;
+  }
+}
+
+div.admonition.danger {
+  p, div {
+    color: @admonition-danger-color-dark-theme;
+    background-color: @admonition-danger-bg-color-dark-theme;
+  }
+}
+
+div.admonition.error {
+  p, div {
+    color: @admonition-error-color-dark-theme;
+    background-color: @admonition-error-bg-color-dark-theme;
+  }
+}
+
+div.admonition.hint {
+  p, div {
+    color: @admonition-hint-color-dark-theme;
+    background-color: @admonition-hint-bg-color-dark-theme;
+  }
+}
+
+div.admonition.important {
+  p, div {
+    color: @admonition-important-color-dark-theme;
+    background-color: @admonition-important-bg-color-dark-theme;
+  }
+}
+
+div.admonition.note {
+  p, div {
+    color: @admonition-note-color-dark-theme;
+    background-color: @admonition-note-bg-color-dark-theme;
+  }
+}
+
+div.admonition.tip {
+  p, div {
+    color: @admonition-tip-color-dark-theme;
+    background-color: @admonition-tip-bg-color-dark-theme;
+  }
+}
+
+div.admonition.warning {
+  p, div {
+    color: @admonition-warning-color-dark-theme;
+    background-color: @admonition-warning-bg-color-dark-theme;
+  }
+}

static/stylesheet/style.less

@@ -293,7 +293,7 @@ main {
       font-size: 11px;
     }
 
-    // Flex theme and Theme selection separator
+    // Flex credits and theme selection separator
     span.footer-separator {
       margin: 0 6px;
     }
@@ -694,3 +694,17 @@ div.admonition.warning {
   color: @admonition-warning-color;
   background-color: @admonition-warning-bg-color;
 }
+
+//
+// Dark Theme
+//
+
+@media (prefers-color-scheme: dark) {
+  html:not(.light-theme) {
+    @import (multiple) "dark-theme.less";
+  }
+}
+
+html.dark-theme {
+  @import (multiple) "dark-theme.less";
+}

static/stylesheet/variables.less

@@ -6,6 +6,7 @@
 @light-grey:  #eeeeee;
 @med-grey:  #999999;
 @dark-grey: #242121;
+@solid-dark-grey: #222222;
 
 // Font family
 @sans: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Liberation Sans', 'DejaVu Sans', 'Verdana', 'Helvetica', 'Arial', sans-serif;
@@ -13,7 +14,9 @@
 
 // Body
 @body-bg: @white;
+@body-bg-dark-theme: @grey;
 @text-color: @dark-grey;
+@text-color-dark-theme: @light-grey;
 
 // Links
 @link-color: @orange;
@@ -21,6 +24,7 @@
 
 // Sidebar (aside)
 @sidebar-bg: @grey;
+@sidebar-bg-dark-theme: @solid-dark-grey;
 @sidebar-text-color: @white;
 @sidebar-link-color: @white;
 @sidebar-link-hover-color: @light-grey;
@@ -41,12 +45,15 @@
 // Footer
 @footer-text-color: @med-grey;
 @footer-border-color: @light-grey;
+@footer-border-color-dark-theme: @solid-dark-grey;
 
-// Relativer posts
+// Relative posts
 @rel-post-border-color: @light-grey;
+@rel-post-border-color-dark-theme: @solid-dark-grey;
 
 // Nav
 @nav-border-color: @light-grey;
+@nav-border-color-dark-theme: @solid-dark-grey;
 
 // Social buttons
 
@@ -77,37 +84,55 @@
 
 // Admonition colors
 @admonition-attention-color: #856404;
+@admonition-attention-color-dark-theme: #fbda7a;
 @admonition-attention-bg-color: #fff3cd;
+@admonition-attention-bg-color-dark-theme: #4a3900;
 @admonition-attention-icon: "\f071\00a0 ";
 
 @admonition-caution-color: @admonition-attention-color;
+@admonition-caution-color-dark-theme: @admonition-attention-color-dark-theme;
 @admonition-caution-bg-color: @admonition-attention-bg-color;
+@admonition-caution-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme;
 @admonition-caution-icon: @admonition-attention-icon;
 
 @admonition-warning-color: @admonition-attention-color;
+@admonition-warning-color-dark-theme: @admonition-attention-color-dark-theme;
 @admonition-warning-bg-color: @admonition-attention-bg-color;
+@admonition-warning-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme;
 @admonition-warning-icon: @admonition-attention-icon;
 
 @admonition-danger-color: #721c24;
+@admonition-danger-color-dark-theme: #ebadb3;
 @admonition-danger-bg-color: #f8d7da;
+@admonition-danger-bg-color-dark-theme: #28070a;
 @admonition-danger-icon: "\f06a\00a0 ";
 
 @admonition-error-color: @admonition-danger-color;
+@admonition-error-color-dark-theme: @admonition-danger-color-dark-theme;
 @admonition-error-bg-color: @admonition-danger-bg-color;
+@admonition-error-bg-color-dark-theme: @admonition-danger-bg-color-dark-theme;
 @admonition-error-icon: @admonition-danger-icon;
 
 @admonition-hint-color: #004085 ;
+@admonition-hint-color-dark-theme: #7abaff;
 @admonition-hint-bg-color: #cce5ff;
+@admonition-hint-bg-color-dark-theme: #001933;
 @admonition-hint-icon: "\f0eb\00a0 ";
 
 @admonition-tip-color: @admonition-hint-color;
+@admonition-tip-color-dark-theme: @admonition-hint-color-dark-theme;
 @admonition-tip-bg-color: @admonition-hint-bg-color;
+@admonition-tip-bg-color-dark-theme: @admonition-hint-bg-color-dark-theme;
 @admonition-tip-icon: @admonition-hint-icon;
 
 @admonition-important-color: #155724;
+@admonition-important-color-dark-theme: #a8eab7;
 @admonition-important-bg-color: #d4edda;
+@admonition-important-bg-color-dark-theme: #122b18;
 @admonition-important-icon: "\f05a\00a0 ";
 
 @admonition-note-color: @admonition-important-color;
+@admonition-note-color-dark-theme: @admonition-important-color-dark-theme;
 @admonition-note-bg-color: @admonition-important-bg-color;
+@admonition-note-bg-color-dark-theme: @admonition-important-bg-color-dark-theme;
 @admonition-note-icon: @admonition-important-icon;

templates/partial/flex.html

@@ -33,12 +33,13 @@
       }
     });
 
+    const htmlElement = document.getElementsByTagName('html')[0];
     if (theme === 'dark') {
-      document.body.classList.add('dark-theme');
+      htmlElement.classList.add('dark-theme');
-      document.body.classList.remove('light-theme');
+      htmlElement.classList.remove('light-theme');
     } else {
-      document.body.classList.add('light-theme');
+      htmlElement.classList.add('light-theme');
-      document.body.classList.remove('dark-theme');
+      htmlElement.classList.remove('dark-theme');
     }
   }