feat: add a switch to toggle light/dark theme

Add script for restoring preferred theme setting.
Update config for newer `mkdocs-material`.
Use native `mkdocs-material` styles where possible.

Closes: #45 #63

Dockerfile

@@ -1,6 +1,7 @@
 # Install the base requirements for the app.
 # This stage is to support development.
 FROM python:alpine AS base
+RUN apk add --no-cache g++
 WORKDIR /app
 COPY requirements.txt .
 RUN pip install -r requirements.txt

docs/css/styles.css

@@ -4,7 +4,7 @@
 
 article img {
     border: 1px solid #eee;
-    box-shadow: 0 0 1em #ccc;
+    box-shadow: 0 0 1em rgba(0, 0, 0, .6);
     margin: 30px auto 10px;
 }
 
@@ -24,30 +24,17 @@ article img.emojione {
     background-color: #0d9cec !important;
 }
 
-@font-face{
+.md-header__button.md-logo img,
-    font-family: "Geomanist";
+.md-nav__title .md-nav__button.md-logo img {
-    src: url("../fonts/hinted-Geomanist-Book.ttf")
+    height: 1.4rem;
+    width: auto;
 }
 
-body {
+.md-nav__title .md-nav__button img {
-    font-family: "Open Sans", sans-serif;
+    height: 30px;
-    font-size: 15px;
+    margin-top: 10px;
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.5;
-    letter-spacing: normal;
-    color: #577482;
-}
-
-h1, h2, h3, h4, .md-footer-nav__inner, .md-header-nav__title, footer.md-footer {
-    font-family: Geomanist;
-}
-
-.md-header-nav__title {
-    line-height: 2.9rem;
 }
 
 .md-header-nav__button img {
     width: 145px;
-}
+}

docs/index.md

@@ -1,2 +0,0 @@
-redirect: /tutorial/
-

docs/js/index.js

@@ -0,0 +1,4 @@
+const settings = JSON.parse(localStorage.getItem(__prefix('__palette')));
+const scheme = settings?.color.scheme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'slate' : 'default' );
+
+document.body.setAttribute('data-md-color-scheme', scheme);

mkdocs.yml

@@ -6,6 +6,7 @@ site_author: Docker
 # Repository
 repo_name: docker/getting-started
 repo_url: https://github.com/docker/getting-started
+repo_icon: fontawesome/brands/github-alt
 edit_uri: ""
 
 # Copyright
@@ -16,28 +17,50 @@ theme:
   name: material
   language: en
   palette:
-    primary: blue
+    # Light mode
-    accent: blue
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: blue
+      accent: blue
+      toggle:
+        icon: material/toggle-switch-off-outline
+        name: Switch to dark mode
+
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: blue
+      accent: blue
+      toggle:
+        icon: material/toggle-switch
+        name: Switch to light mode
   font:
     text: Roboto
     code: Roboto Mono
+  icon:
+    repo: fontawesome/brands/github-alt
   favicon: assets/images/favicon.png
   logo: 'images/docker-labs-logo.svg'
 
 extra_css:
   - css/styles.css
-  - css/dark-mode.css
+
+extra_javascript:
+  - js/index.js
 
 # Plugins
 plugins:
   - search
   - minify:
       minify_html: true
+  - redirects:
+      redirect_maps:
+        index.md: tutorial/index.md
 
 # Customization
 extra:
   social:
-    - type: github-alt
+    - icon: fontawesome/brands/github-alt
       link: https://github.com/docker/getting-started
 
 # Extensions

requirements.txt

@@ -1,5 +1,6 @@
-mkdocs==1.0.4
+mkdocs==1.1.2
-mkdocs-material==4.6.3
+mkdocs-material==7.1.4
-mkdocs-minify-plugin==0.2.3
+mkdocs-minify-plugin==0.4.0
 pygments==2.7.4
 pymdown-extensions==7.0
+mkdocs-redirects==1.0.1