Update requirements file for latest rtd theme

docs/conf.py

@@ -121,15 +121,13 @@ html_js_files = [
     ''
 ]
 
+# Master index file
 master_doc = 'index'
 
-#
-# Breathe configuration
-#
-#
-#
+# --- Breathe configuration -----------------------------------------------------
 breathe_projects = {
     "lwmem": "_build/xml/"
 }
 breathe_default_project = "lwmem"
-breathe_default_members = ('members', 'undoc-members')
+breathe_default_members = ('members', 'undoc-members')
+breathe_show_enumvalue_initializer = True

docs/index.rst

@@ -59,9 +59,28 @@ Table of contents
 
 .. toctree::
     :maxdepth: 2
+    :caption: Contents
 
     self
     get-started/index
     user-manual/index
     api-reference/index
     examples/index
+
+.. toctree::
+    :maxdepth: 2
+    :caption: Other projects
+    :hidden:
+
+    LwDTC - DateTimeCron <https://github.com/MaJerle/lwdtc>
+    LwESP - ESP-AT library <https://github.com/MaJerle/lwesp>
+    LwGPS - GPS NMEA parser <https://github.com/MaJerle/lwgps>
+    LwGSM - GSM-AT library <https://github.com/MaJerle/lwgsm>
+    LwJSON - JSON parser <https://github.com/MaJerle/lwjson>
+    LwMEM - Memory manager <https://github.com/MaJerle/lwmem>
+    LwOW - OneWire with UART <https://github.com/MaJerle/lwow>
+    LwPKT - Packet protocol <https://github.com/MaJerle/lwpkt>
+    LwPRINTF - Printf <https://github.com/MaJerle/lwprintf>
+    LwRB - Ring buffer <https://github.com/MaJerle/lwrb>
+    LwSHELL - Shell <https://github.com/MaJerle/lwshell>
+    LwUTIL - Utility functions <https://github.com/MaJerle/lwutil>

docs/static/dark-light/checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>

docs/static/dark-light/common-dark-light.css

@@ -0,0 +1,143 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:root {
+  --heading-color: red;
+  --duration: 0.5s;
+  --timing: ease;
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  transition:
+    color var(--duration) var(--timing),
+    background-color var(--duration) var(--timing);
+  font-family: sans-serif;
+  font-size: 12pt;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  display: flex;
+  justify-content: center;
+}
+
+main {
+  margin: 1rem;
+  max-width: 30rem;
+  position: relative;
+}
+
+h1 {
+  color: var(--heading-color);
+  text-shadow: 0.1rem 0.1rem 0.1rem var(--shadow-color);
+  transition: text-shadow var(--duration) var(--timing);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  transition: filter var(--duration) var(--timing);
+}
+
+p {
+  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+fieldset {
+  border: solid 0.1rem;
+  box-shadow: 0.1rem 0.1rem 0.1rem var(--shadow-color);
+  transition: box-shadow var(--duration) var(--timing);
+}
+
+div {
+  padding: 0.5rem;
+}
+
+aside {
+  position: absolute;
+  right: 0;
+  padding: 0.5rem;
+}
+
+aside:nth-of-type(1) {
+  top: 0;
+}
+
+aside:nth-of-type(2) {
+  top: 3rem;
+}
+
+aside:nth-of-type(3) {
+  top: 7rem;
+}
+
+aside:nth-of-type(4) {
+  top: 12rem;
+}
+
+#content select,
+#content button,
+#content input[type="text"],
+#content input[type="search"] {
+  width: 15rem;
+}
+
+dark-mode-toggle {
+  --dark-mode-toggle-remember-icon-checked: url("checked.svg");
+  --dark-mode-toggle-remember-icon-unchecked: url("unchecked.svg");
+  --dark-mode-toggle-remember-font: 0.75rem "Helvetica";
+  --dark-mode-toggle-legend-font: bold 0.85rem "Helvetica";
+  --dark-mode-toggle-label-font: 0.85rem "Helvetica";
+  --dark-mode-toggle-color: var(--text-color);
+  --dark-mode-toggle-background-color: none;
+
+  margin-bottom: 1.5rem;
+}
+
+#dark-mode-toggle-1 {
+  --dark-mode-toggle-dark-icon: url("sun.png");
+  --dark-mode-toggle-light-icon: url("moon.png");
+}
+
+#dark-mode-toggle-2 {
+  --dark-mode-toggle-dark-icon: url("sun.svg");
+  --dark-mode-toggle-light-icon: url("moon.svg");
+  --dark-mode-toggle-icon-size: 2rem;
+  --dark-mode-toggle-icon-filter: invert(100%);
+}
+
+#dark-mode-toggle-3,
+#dark-mode-toggle-4 {
+  --dark-mode-toggle-dark-icon: url("moon.png");
+  --dark-mode-toggle-light-icon: url("sun.png");
+}
+
+#dark-mode-toggle-3 {
+  --dark-mode-toggle-remember-filter: invert(100%);
+}
+
+#dark-mode-toggle-4 {
+  --dark-mode-toggle-active-mode-background-color: var(--accent-color);
+  --dark-mode-toggle-remember-filter: invert(100%);
+}

docs/static/dark-light/dark-mode-toggle.mjs

@@ -0,0 +1,329 @@
+/**
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @license © 2019 Google LLC. Licensed under the Apache License, Version 2.0.
+const doc = document;
+const store = localStorage;
+const PREFERS_COLOR_SCHEME = 'prefers-color-scheme';
+const MEDIA = 'media';
+const LIGHT = 'light';
+const DARK = 'dark';
+const MQ_DARK = `(${PREFERS_COLOR_SCHEME}:${DARK})`;
+const MQ_LIGHT = `(${PREFERS_COLOR_SCHEME}:${LIGHT})`;
+const LINK_REL_STYLESHEET = 'link[rel=stylesheet]';
+const REMEMBER = 'remember';
+const LEGEND = 'legend';
+const TOGGLE = 'toggle';
+const SWITCH = 'switch';
+const APPEARANCE = 'appearance';
+const PERMANENT = 'permanent';
+const MODE = 'mode';
+const COLOR_SCHEME_CHANGE = 'colorschemechange';
+const PERMANENT_COLOR_SCHEME = 'permanentcolorscheme';
+const ALL = 'all';
+const NOT_ALL = 'not all';
+const NAME = 'dark-mode-toggle';
+const DEFAULT_URL = 'https://googlechromelabs.github.io/dark-mode-toggle/demo/';
+
+// See https://html.spec.whatwg.org/multipage/common-dom-interfaces.html ↵
+// #reflecting-content-attributes-in-idl-attributes.
+const installStringReflection = (obj, attrName, propName = attrName) => {
+  Object.defineProperty(obj, propName, {
+    enumerable: true,
+    get() {
+      const value = this.getAttribute(attrName);
+      return value === null ? '' : value;
+    },
+    set(v) {
+      this.setAttribute(attrName, v);
+    },
+  });
+};
+
+const installBoolReflection = (obj, attrName, propName = attrName) => {
+  Object.defineProperty(obj, propName, {
+    enumerable: true,
+    get() {
+      return this.hasAttribute(attrName);
+    },
+    set(v) {
+      if (v) {
+        this.setAttribute(attrName, '');
+      } else {
+        this.removeAttribute(attrName);
+      }
+    },
+  });
+};
+
+const template = doc.createElement('template');
+// ⚠️ Note: this is a minified version of `src/template-contents.tpl`.
+// Compress the CSS with https://cssminifier.com/, then paste it here.
+// eslint-disable-next-line max-len
+template.innerHTML = `<style>*,::after,::before{box-sizing:border-box}:host{contain:content;display:block}:host([hidden]){display:none}form{background-color:var(--${NAME}-background-color,transparent);color:var(--${NAME}-color,inherit);padding:0}fieldset{border:none;margin:0;padding-block:.25rem;padding-inline:.25rem}legend{font:var(--${NAME}-legend-font,inherit);padding:0}input,label{cursor:pointer}label{white-space:nowrap}input{opacity:0;position:absolute;pointer-events:none}input:focus-visible+label{outline:#e59700 auto 2px;outline:-webkit-focus-ring-color auto 5px}label:not(:empty)::before{margin-inline-end:.5rem;}label::before{content:"";display:inline-block;background-size:var(--${NAME}-icon-size,1rem);background-repeat:no-repeat;height:var(--${NAME}-icon-size,1rem);width:var(--${NAME}-icon-size,1rem);vertical-align:middle;}[part=lightLabel]::before{background-image:var(--${NAME}-light-icon, url("${DEFAULT_URL}sun.png"))}[part=darkLabel]::before{filter:var(--${NAME}-icon-filter, none);background-image:var(--${NAME}-dark-icon, url("${DEFAULT_URL}moon.png"))}[part=toggleLabel]::before{background-image:var(--${NAME}-checkbox-icon,none)}[part=permanentLabel]::before{background-image:var(--${NAME}-remember-icon-unchecked, url("${DEFAULT_URL}unchecked.svg"))}[part=darkLabel],[part=lightLabel],[part=toggleLabel]{font:var(--${NAME}-label-font,inherit)}[part=darkLabel]:empty,[part=lightLabel]:empty,[part=toggleLabel]:empty{font-size:0;padding:0}[part=permanentLabel]{font:var(--${NAME}-remember-font,inherit)}input:checked+[part=permanentLabel]::before{background-image:var(--${NAME}-remember-icon-checked, url("${DEFAULT_URL}checked.svg"))}input:checked+[part=darkLabel],input:checked+[part=lightLabel]{background-color:var(--${NAME}-active-mode-background-color,transparent)}input:checked+[part=darkLabel]::before,input:checked+[part=lightLabel]::before{background-color:var(--${NAME}-active-mode-background-color,transparent)}input:checked+[part=toggleLabel]::before{filter:var(--${NAME}-icon-filter, none)}input:checked+[part=toggleLabel]+aside [part=permanentLabel]::before{filter:var(--${NAME}-remember-filter, invert(100%))}aside{visibility:hidden;margin-block-start:.15rem}[part=darkLabel]:focus-visible~aside,[part=lightLabel]:focus-visible~aside,[part=toggleLabel]:focus-visible~aside{visibility:visible;transition:visibility 0s}aside [part=permanentLabel]:empty{display:none}@media (hover:hover){aside{transition:visibility 3s}aside:hover{visibility:visible}[part=darkLabel]:hover~aside,[part=lightLabel]:hover~aside,[part=toggleLabel]:hover~aside{visibility:visible;transition:visibility 0s}}</style><form part=form><fieldset part=fieldset><legend part=legend></legend><input part=lightRadio id=l name=mode type=radio><label part=lightLabel for=l></label><input part=darkRadio id=d name=mode type=radio><label part=darkLabel for=d></label><input part=toggleCheckbox id=t type=checkbox><label part=toggleLabel for=t></label><aside part=aside><input part=permanentCheckbox id=p type=checkbox><label part=permanentLabel for=p></label></aside></fieldset></form>`;
+
+export class DarkModeToggle extends HTMLElement {
+  static get observedAttributes() {
+    return [MODE, APPEARANCE, PERMANENT, LEGEND, LIGHT, DARK, REMEMBER];
+  }
+
+  constructor() {
+    super();
+
+    installStringReflection(this, MODE);
+    installStringReflection(this, APPEARANCE);
+    installStringReflection(this, LEGEND);
+    installStringReflection(this, LIGHT);
+    installStringReflection(this, DARK);
+    installStringReflection(this, REMEMBER);
+
+    installBoolReflection(this, PERMANENT);
+
+    this._darkCSS = null;
+    this._lightCSS = null;
+
+    doc.addEventListener(COLOR_SCHEME_CHANGE, (event) => {
+      this.mode = event.detail.colorScheme;
+      this._updateRadios();
+      this._updateCheckbox();
+    });
+
+    doc.addEventListener(PERMANENT_COLOR_SCHEME, (event) => {
+      this.permanent = event.detail.permanent;
+      this._permanentCheckbox.checked = this.permanent;
+    });
+
+    this._initializeDOM();
+  }
+
+  _initializeDOM() {
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // We need to support `media="(prefers-color-scheme: dark)"` (with space)
+    // and `media="(prefers-color-scheme:dark)"` (without space)
+    this._darkCSS = doc.querySelectorAll(`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`);
+    this._lightCSS = doc.querySelectorAll(`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`);
+
+    // Get DOM references.
+    this._lightRadio = shadowRoot.querySelector('[part=lightRadio]');
+    this._lightLabel = shadowRoot.querySelector('[part=lightLabel]');
+    this._darkRadio = shadowRoot.querySelector('[part=darkRadio]');
+    this._darkLabel = shadowRoot.querySelector('[part=darkLabel]');
+    this._darkCheckbox = shadowRoot.querySelector('[part=toggleCheckbox]');
+    this._checkboxLabel = shadowRoot.querySelector('[part=toggleLabel]');
+    this._legendLabel = shadowRoot.querySelector('legend');
+    this._permanentAside = shadowRoot.querySelector('aside');
+    this._permanentCheckbox =
+        shadowRoot.querySelector('[part=permanentCheckbox]');
+    this._permanentLabel = shadowRoot.querySelector('[part=permanentLabel]');
+
+    // Does the browser support native `prefers-color-scheme`?
+    const hasNativePrefersColorScheme =
+        matchMedia(MQ_DARK).media !== NOT_ALL;
+    // Listen to `prefers-color-scheme` changes.
+    if (hasNativePrefersColorScheme) {
+      matchMedia(MQ_DARK).addListener(({matches}) => {
+        this.mode = matches ? DARK : LIGHT;
+        this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      });
+    }
+    // Set initial state, giving preference to a remembered value, then the
+    // native value (if supported), and eventually defaulting to a light
+    // experience.
+    const rememberedValue = store.getItem(NAME);
+    if (rememberedValue && [DARK, LIGHT].includes(rememberedValue)) {
+      this.mode = rememberedValue;
+      this._permanentCheckbox.checked = true;
+      this.permanent = true;
+    } else if (hasNativePrefersColorScheme) {
+      this.mode = matchMedia(MQ_LIGHT).matches ? LIGHT : DARK;
+    }
+    if (!this.mode) {
+      this.mode = LIGHT;
+    }
+    if (this.permanent && !rememberedValue) {
+      store.setItem(NAME, this.mode);
+    }
+
+    // Default to toggle appearance.
+    if (!this.appearance) {
+      this.appearance = TOGGLE;
+    }
+
+    // Update the appearance to either of toggle or switch.
+    this._updateAppearance();
+
+    // Update the radios
+    this._updateRadios();
+
+    // Make the checkbox reflect the state of the radios
+    this._updateCheckbox();
+
+    // Synchronize the behavior of the radio and the checkbox.
+    [this._lightRadio, this._darkRadio].forEach((input) => {
+      input.addEventListener('change', () => {
+        this.mode = this._lightRadio.checked ? LIGHT : DARK;
+        this._updateCheckbox();
+        this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+      });
+    });
+    this._darkCheckbox.addEventListener('change', () => {
+      this.mode = this._darkCheckbox.checked ? DARK : LIGHT;
+      this._updateRadios();
+      this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+    });
+
+    // Make remembering the last mode optional
+    this._permanentCheckbox.addEventListener('change', () => {
+      this.permanent = this._permanentCheckbox.checked;
+      this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
+        permanent: this.permanent,
+      });
+    });
+
+    // Finally update the mode and let the world know what's going on
+    this._updateMode();
+    this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
+    this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
+      permanent: this.permanent,
+    });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === MODE) {
+      if (![LIGHT, DARK].includes(newValue)) {
+        throw new RangeError(`Allowed values: "${LIGHT}" and "${DARK}".`);
+      }
+      // Only show the dialog programmatically on devices not capable of hover
+      // and only if there is a label
+      if (matchMedia('(hover:none)').matches && this.remember) {
+        this._showPermanentAside();
+      }
+      if (this.permanent) {
+        store.setItem(NAME, this.mode);
+      }
+      this._updateRadios();
+      this._updateCheckbox();
+      this._updateMode();
+    } else if (name === APPEARANCE) {
+      if (![TOGGLE, SWITCH].includes(newValue)) {
+        throw new RangeError(`Allowed values: "${TOGGLE}" and "${SWITCH}".`);
+      }
+      this._updateAppearance();
+    } else if (name === PERMANENT) {
+      if (this.permanent) {
+        store.setItem(NAME, this.mode);
+      } else {
+        store.removeItem(NAME);
+      }
+      this._permanentCheckbox.checked = this.permanent;
+    } else if (name === LEGEND) {
+      this._legendLabel.textContent = newValue;
+    } else if (name === REMEMBER) {
+      this._permanentLabel.textContent = newValue;
+    } else if (name === LIGHT) {
+      this._lightLabel.textContent = newValue;
+      if (this.mode === LIGHT) {
+        this._checkboxLabel.textContent = newValue;
+      }
+    } else if (name === DARK) {
+      this._darkLabel.textContent = newValue;
+      if (this.mode === DARK) {
+        this._checkboxLabel.textContent = newValue;
+      }
+    }
+  }
+
+  _dispatchEvent(type, value) {
+    this.dispatchEvent(new CustomEvent(type, {
+      bubbles: true,
+      composed: true,
+      detail: value,
+    }));
+  }
+
+  _updateAppearance() {
+    // Hide or show the light-related affordances dependent on the appearance,
+    // which can be "switch" or "toggle".
+    const appearAsToggle = this.appearance === TOGGLE;
+    this._lightRadio.hidden = appearAsToggle;
+    this._lightLabel.hidden = appearAsToggle;
+    this._darkRadio.hidden = appearAsToggle;
+    this._darkLabel.hidden = appearAsToggle;
+    this._darkCheckbox.hidden = !appearAsToggle;
+    this._checkboxLabel.hidden = !appearAsToggle;
+  }
+
+  _updateRadios() {
+    if (this.mode === LIGHT) {
+      this._lightRadio.checked = true;
+    } else {
+      this._darkRadio.checked = true;
+    }
+  }
+
+  _updateCheckbox() {
+    if (this.mode === LIGHT) {
+      this._checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
+          `var(--${NAME}-light-icon,url("${DEFAULT_URL}moon.png"))`);
+      this._checkboxLabel.textContent = this.light;
+      if (!this.light) {
+        this._checkboxLabel.ariaLabel = DARK;
+      }
+      this._darkCheckbox.checked = false;
+    } else {
+      this._checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
+          `var(--${NAME}-dark-icon,url("${DEFAULT_URL}sun.png"))`);
+      this._checkboxLabel.textContent = this.dark;
+      if (!this.dark) {
+        this._checkboxLabel.ariaLabel = LIGHT;
+      }
+      this._darkCheckbox.checked = true;
+    }
+  }
+
+  _updateMode() {
+    if (this.mode === LIGHT) {
+      this._lightCSS.forEach((link) => {
+        link.media = ALL;
+        link.disabled = false;
+      });
+      this._darkCSS.forEach((link) => {
+        link.media = NOT_ALL;
+        link.disabled = true;
+      });
+    } else {
+      this._darkCSS.forEach((link) => {
+        link.media = ALL;
+        link.disabled = false;
+      });
+      this._lightCSS.forEach((link) => {
+        link.media = NOT_ALL;
+        link.disabled = true;
+      });
+    }
+  }
+
+  _showPermanentAside() {
+    this._permanentAside.style.visibility = 'visible';
+    setTimeout(() => {
+      this._permanentAside.style.visibility = 'hidden';
+    }, 3000);
+  }
+}
+
+customElements.define(NAME, DarkModeToggle);

docs/static/dark-light/dark.css

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:root {
+  color-scheme: dark; /* stylelint-disable-line property-no-unknown */
+
+  --background-color: rgb(15 15 15);
+  --text-color: rgb(240 240 240);
+  --shadow-color: rgb(240 240 240 / 50%);
+  --accent-color: rgb(0 0 240 / 50%);
+}
+
+img {
+  filter: grayscale(50%);
+}
+
+.icon {
+  filter: invert(100%);
+}
+
+a {
+  color: yellow;
+}

docs/static/dark-light/light.css

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:root {
+  color-scheme: light; /* stylelint-disable-line property-no-unknown */
+
+  --background-color: rgb(240 240 240);
+  --text-color: rgb(15 15 15);
+  --shadow-color: rgb(15 15 15 / 50%);
+  --accent-color: rgb(240 0 0 / 50%);
+}

docs/static/dark-light/moon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <title>
+    moon
+  </title>
+  <path d="M17.39 15.14A7.33 7.33 0 0 1 11.75 1.6c.23-.11.56-.23.79-.34a8.19 8.19 0 0 0-5.41.45 9 9 0 1 0 7 16.58 8.42 8.42 0 0 0 4.29-3.84 5.3 5.3 0 0 1-1.03.69z"/>
+</svg>

docs/static/dark-light/sun.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+<path d="M18.1 5.1c0 .3-.1.6-.3.9l-1.4 1.4-.9-.8 2.2-2.2c.3.1.4.4.4.7zm-.5 5.3h3.2c0 .3-.1.6-.4.9s-.5.4-.8.4h-2v-1.3zm-6.2-5V2.2c.3 0 .6.1.9.4s.4.5.4.8v2h-1.3zm6.4 11.7c-.3 0-.6-.1-.8-.3l-1.4-1.4.8-.8 2.2 2.2c-.2.2-.5.3-.8.3zM6.2 4.9c.3 0 .6.1.8.3l1.4 1.4-.8.9-2.2-2.3c.2-.2.5-.3.8-.3zm5.2 11.7h1.2v3.2c-.3 0-.6-.1-.9-.4s-.4-.5-.4-.8l.1-2zm-7-6.2h2v1.2H3.2c0-.3.1-.6.4-.9s.5-.3.8-.3zM6.2 16l1.4-1.4.8.8-2.2 2.2c-.2-.2-.3-.5-.3-.8s.1-.6.3-.8z"/>
+<circle cx="12" cy="11" r="4"/>
+</svg>

docs/static/dark-light/unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>