Documentation: Add toggleable dark theme

The dark theme is mostly built on top of the mkdocs slate theme.

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Co-Authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

docs/content/images/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1564" height="1564" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M781.965 0l-79.182 79.19-94.818-59.575-59.574 94.81-105.7-36.99-36.982 105.7-111.283-12.54-12.535 111.276-111.278 12.535 12.541 111.278-105.71 36.988 36.984 105.695-94.815 59.574 59.582 94.832L0 781.961l79.19 79.2-59.577 94.823 94.815 59.573-36.985 105.695 105.707 36.99-12.537 111.264 111.278 12.543 12.535 111.275 111.283-12.535 36.982 105.686 105.694-36.97 59.582 94.821 94.9-59.64 79.096 78.36 79.1-78.343 94.908 59.631 59.572-94.824 105.707 36.988 36.98-105.697 111.284 12.533 12.533-111.283 111.285-12.533-12.543-111.276 105.705-36.99-36.988-105.705 94.814-59.574-59.574-94.813 79.19-79.2-79.188-79.18 59.572-94.813-94.814-59.578 36.99-105.703-105.7-36.983 12.534-111.281-111.275-12.535-12.543-111.283-111.274 12.535-36.99-105.703-105.69 36.986-59.591-94.815-94.82 59.579zm0 77.785l71.305 71.307 85.394-53.656 53.666 85.384 95.172-33.302 33.31 95.185 100.206-11.289 11.296 100.217 100.205 11.289-11.287 100.213 95.182 33.3-33.309 95.188 85.385 53.654-53.648 85.381 71.312 71.309-71.31 71.318 11.666 18.569 41.978 66.812-85.383 53.647 33.311 95.193-95.195 33.31 11.297 100.205-100.215 11.288-11.287 100.216-100.215-11.287-33.301 95.182-95.193-33.31-53.649 85.394-85.289-53.588-18.094 17.922a106.956 106.956 0 0121.871 16.893c-.309 41.33-33.914 74.76-75.33 74.76-41.417 0-75.016-33.42-75.324-74.76a106.994 106.994 0 0122.069-17.01l-17.997-17.828-85.293 53.601-53.65-85.38-95.18 33.29-33.302-95.175-100.217 11.287-11.287-100.205-100.21-11.297 11.29-100.197-95.194-33.311 33.307-95.184-85.385-53.646 53.649-85.39-71.31-71.32 71.32-71.312-53.659-85.4 85.385-53.65-33.305-95.18 95.198-33.313-11.293-100.205 100.207-11.289 11.289-100.207 100.215 11.293 33.302-95.183 95.184 33.308 53.648-85.38 85.391 53.65z" color="#000" font-weight="400" font-family="sans-serif" clip-rule="nonzero" overflow="visible" fill="#fff" fill-rule="nonzero"/><path d="M528.81 636.127c-145.441 0-263.341 117.905-263.341 263.342 0 76 32.23 144.43 83.72 192.49l357.635 357.443c19.257-19.156 45.746-30.984 74.996-30.984 29.295 0 55.839 11.871 75.1 31.09l348.266-348.49c52.88-49.77 92.25-120 92.25-200.1 0-145.437-117.9-263.34-263.34-263.34-72.24 0-137.68 29.112-185.252 76.225l-.033-.035-67.096 67.101-54.863-54.863c-48.267-55.067-119.07-89.88-198.041-89.88zm107.461 300.662c31.804 0 57.57 25.77 57.57 57.57s-25.766 57.569-57.57 57.569c-31.787 0-57.558-25.769-57.558-57.569 0-31.8 25.771-57.57 57.558-57.57zm291.944 0c31.8 0 57.57 25.77 57.57 57.57s-25.77 57.569-57.57 57.569c-31.79 0-57.567-25.769-57.567-57.569 0-31.8 25.777-57.57 57.567-57.57zm-146.27 587.695l.024.023.023-.023h-.047z" fill="#fff" fill-rule="nonzero"/><path d="M674.097 985.728c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96m291.938 0c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96" fill="#fffffa" fill-rule="nonzero"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1564" height="1564" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="m781.965 0-79.182 79.19-94.818-59.575-59.574 94.81-105.7-36.99-36.982 105.7-111.283-12.54-12.535 111.276-111.278 12.535 12.541 111.278-105.71 36.988 36.984 105.695-94.815 59.574 59.582 94.832L0 781.961l79.19 79.2-59.577 94.823 94.815 59.573-36.985 105.695 105.707 36.99-12.537 111.264 111.278 12.543 12.535 111.275 111.283-12.535 36.982 105.686 105.694-36.97 59.582 94.821 94.9-59.64 79.096 78.36 79.1-78.343 94.908 59.631 59.572-94.824 105.707 36.988 36.98-105.697 111.284 12.533 12.533-111.283 111.285-12.533-12.543-111.276 105.705-36.99-36.988-105.705 94.814-59.574-59.574-94.813 79.19-79.2-79.188-79.18 59.572-94.813-94.814-59.578 36.99-105.703-105.7-36.983 12.534-111.281-111.275-12.535-12.543-111.283-111.274 12.535-36.99-105.703-105.69 36.986-59.591-94.815-94.82 59.579zm0 77.785 71.305 71.307 85.394-53.656 53.666 85.384 95.172-33.302 33.31 95.185 100.206-11.289 11.296 100.217 100.205 11.289-11.287 100.213 95.182 33.3-33.309 95.188 85.385 53.654-53.648 85.381 71.312 71.309-71.31 71.318 11.666 18.569 41.978 66.812-85.383 53.647 33.311 95.193-95.195 33.31 11.297 100.205-100.215 11.288-11.287 100.216-100.215-11.287-33.301 95.182-95.193-33.31-53.649 85.394-85.289-53.588-18.094 17.922a106.956 106.956 0 0 1 21.871 16.893c-.309 41.33-33.914 74.76-75.33 74.76-41.417 0-75.016-33.42-75.324-74.76a106.994 106.994 0 0 1 22.069-17.01l-17.997-17.828-85.293 53.601-53.65-85.38-95.18 33.29-33.302-95.175-100.217 11.287-11.287-100.205-100.21-11.297 11.29-100.197-95.194-33.311 33.307-95.184-85.385-53.646 53.649-85.39-71.31-71.32 71.32-71.312-53.659-85.4 85.385-53.65-33.305-95.18 95.198-33.313-11.293-100.205 100.207-11.289 11.289-100.207 100.215 11.293 33.302-95.183 95.184 33.308 53.648-85.38 85.391 53.65z" color="#000" font-weight="400" font-family="sans-serif" clip-rule="nonzero" overflow="visible" fill="#fff" fill-rule="nonzero"/><path d="M528.81 636.127c-145.441 0-263.341 117.905-263.341 263.342 0 76 32.23 144.43 83.72 192.49l357.635 357.443c19.257-19.156 45.746-30.984 74.996-30.984 29.295 0 55.839 11.871 75.1 31.09l348.266-348.49c52.88-49.77 92.25-120 92.25-200.1 0-145.437-117.9-263.34-263.34-263.34-72.24 0-137.68 29.112-185.252 76.225l-.033-.035-67.096 67.101-54.863-54.863c-48.267-55.067-119.07-89.88-198.041-89.88zm107.461 300.662c31.804 0 57.57 25.77 57.57 57.57s-25.766 57.569-57.57 57.569c-31.787 0-57.558-25.769-57.558-57.569 0-31.8 25.771-57.57 57.558-57.57zm291.944 0c31.8 0 57.57 25.77 57.57 57.57s-25.77 57.569-57.57 57.569c-31.79 0-57.567-25.769-57.567-57.569 0-31.8 25.777-57.57 57.567-57.57zm-146.27 587.695.024.023.023-.023h-.047z" fill="#fff" fill-rule="nonzero"/><path d="M674.097 985.728c0 8.82-7.146 15.94-15.95 15.94-8.808 0-15.958-7.12-15.958-15.94 0-8.81 7.15-15.96 15.958-15.96 8.804 0 15.95 7.15 15.95 15.96m291.938 0c0 8.82-7.15 15.94-15.95 15.94-8.81 0-15.96-7.12-15.96-15.94 0-8.81 7.15-15.96 15.96-15.96 8.8 0 15.95 7.15 15.95 15.96" fill="#fffffa" fill-rule="nonzero"/></svg>

docs/content/index.md

@@ -1,6 +1,7 @@
 # Welcome to the HedgeDoc Documentation
 
-![HedgeDoc Logo](images/hedgedoc_logo_horizontal.svg)
+<img alt="HedgeDoc Logo" title="HedgeDoc Logo" class="light-mode-only" src="images/hedgedoc_logo_black.svg">
+<img alt="HedgeDoc Logo" title="HedgeDoc Logo" class="dark-mode-only" src="images/hedgedoc_logo_white.svg">
 
 HedgeDoc lets you create real-time collaborative markdown notes. You can test-drive
 it by visiting our [HedgeDoc demo server][hedgedoc-demo].

docs/content/theme/styles/hedgedoc-custom.css

@@ -1,9 +1,41 @@
+[data-md-color-scheme="slate"][data-md-color-primary=hedgedoc] {
+  --md-hue: 8;
+  --md-default-fg-color: hsla(var(--md-hue), 20%, 80%, 1);
+  --md-default-fg-color--light: hsla(var(--md-hue), 20%, 80%, 1);
+  --md-default-fg-color--lighter: hsla(var(--md-hue), 20%, 80%, 0.5);
+  --md-default-fg-color--lightest: hsla(var(--md-hue), 20%, 80%, 0.2);
+
+  --md-default-bg-color: hsla(var(--md-hue), 0%, 5%, 1);
+  --md-default-bg-color--light: hsla(var(--md-hue), 0%, 5%, 0.54);
+  --md-default-bg-color--lighter: hsla(var(--md-hue), 0%, 5%, 0.26);
+  --md-default-bg-color--lightest: hsla(var(--md-hue), 0%, 5%, 0.07);
+
+  --md-typeset-color: hsl(var(--md-hue), 5%, 80%);
+  --md-typeset-a-color: hsl(var(--md-hue), 92%, 67%, 1);
+  --md-primary-fg-color: hsl(var(--md-hue), 92%, 25%, 1);
+  --md-table-header-fg-color: var(--md-typeset-color);
+  --md-table-header-bg-color: hsla(var(--md-hue), 0%, 20%, 1);
+
+  --md-code-fg-color: hsla(var(--md-hue),0%,86%,1);
+  --md-code-bg-color: hsla(var(--md-hue),0%,15%,1);
+}
+
+[data-md-color-primary=hedgedoc] .md-typeset table:not([class]) th {
+  background-color: var(--md-table-header-bg-color);
+  color: var(--md-table-header-fg-color);
+}
+
 [data-md-color-primary=hedgedoc] {
-  --md-primary-fg-color: #b51f08;
+  --md-hue: 8;
-  --md-primary-fg-color--light: #b51f08;
+  --md-primary-fg-color: hsl(var(--md-hue), 92%, 37%, 1);
-  --md-primary-fg-color--dark: #b51f08;
+  --md-primary-fg-color--dark: var(--md-primary-fg-color);
-  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
+  --md-primary-fg-color--light: var(--md-primary-fg-color);
-  --md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
+  --md-primary-bg-color: hsla(0, 15%, 100%, 1);
+  --md-footer-bg-color: hsla(var(--md-hue), 0%, 12%, 1);
+  --md-footer-bg-color--dark: hsla(var(--md-hue), 0%, 16%, 1);
+
+  --md-table-header-fg-color: var(--md-default-bg-color);
+  --md-table-header-bg-color: var(--md-default-fg-color--light);
 }
 
 [data-md-color-accent=hedgedoc] {
@@ -24,3 +56,11 @@
 .mastodon {
   color: #2b90d9;
 }
+
+[data-md-color-scheme="slate"] .light-mode-only {
+  display: none;
+}
+
+[data-md-color-scheme="light"] .dark-mode-only {
+  display: none;
+}

docs/mkdocs.yml

@@ -66,9 +66,21 @@ theme:
   favicon: images/favicon.png
   logo: images/logo.svg
   palette:
-    scheme: light
+    - media: "(prefers-color-scheme: light)"
-    primary: 'hedgedoc'
+      scheme: light
-    accent: 'hedgedoc'
+      primary: 'hedgedoc'
+      accent: 'hedgedoc'
+      toggle:
+        icon: material/lightbulb-outline
+        name: Switch to dark mode
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: 'hedgedoc'
+      accent: 'hedgedoc'
+      toggle:
+        icon: material/lightbulb
+        name: Switch to light mode
   features:
     - navigation.tabs
     - navigation.sections