From 93e0766bead8cb4b229dee46135c182c1dc26581 Mon Sep 17 00:00:00 2001
From: Morris Brodersen <mb@morrisbrodersen.de>
Date: Sun, 29 Dec 2024 14:27:21 +0100
Subject: [PATCH] add dark mode

---
 README.md                          |  1 +
 es5/.eslintrc.json                 | 25 --------------
 es5/.stylelintrc.json              | 10 ------
 es5/public/styles/app-footer.css   |  1 -
 public/scripts/AppIcon.js          |  4 ++-
 public/scripts/TodoApp.js          | 31 +++++++++++++++++
 public/styles/app-date-picker.css  |  3 --
 public/styles/app-footer.css       |  1 -
 public/styles/base.css             |  5 ++-
 public/styles/todo-custom-list.css |  4 ++-
 public/styles/todo-item-input.css  |  1 +
 public/styles/todo-item.css        |  1 +
 public/styles/vars.css             | 53 ++++++++++++++++++++++++++++++
 13 files changed, 95 insertions(+), 45 deletions(-)
 delete mode 100644 es5/.eslintrc.json
 delete mode 100644 es5/.stylelintrc.json

diff --git a/README.md b/README.md
index dbd7de6..b3adb12 100644
--- a/README.md
+++ b/README.md
@@ -889,6 +889,7 @@ Thanks!
 
 ### 12/2024
 
+- Add dark mode
 - Add Playwright config for testing more browsers
 - Update dependencies
 
diff --git a/es5/.eslintrc.json b/es5/.eslintrc.json
deleted file mode 100644
index 1067005..0000000
--- a/es5/.eslintrc.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "root": true,
-  "extends": ["eslint:recommended", "plugin:compat/recommended"],
-  "globals": {
-    "Set": "readonly",
-    "Map": "readonly"
-  },
-  "env": {
-    "browser": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 5
-  },
-  "rules": {},
-  "settings": {
-    "polyfills": [
-      "Set",
-      "Map",
-      "fetch",
-      "Object.assign",
-      "requestAnimationFrame",
-      "performance.now"
-    ]
-  }
-}
diff --git a/es5/.stylelintrc.json b/es5/.stylelintrc.json
deleted file mode 100644
index c62cda0..0000000
--- a/es5/.stylelintrc.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": ["stylelint-config-standard", "stylelint-rscss/config"],
-  "rules": {
-    "property-no-vendor-prefix": null,
-    "selector-class-pattern": "[a-z\\-][a-z0-9\\-]+",
-    "media-feature-range-notation": "prefix",
-    "color-function-notation": "legacy",
-    "declaration-block-no-redundant-longhand-properties": null
-  }
-}
diff --git a/es5/public/styles/app-footer.css b/es5/public/styles/app-footer.css
index ccc584c..7dea98f 100644
--- a/es5/public/styles/app-footer.css
+++ b/es5/public/styles/app-footer.css
@@ -5,7 +5,6 @@
   color: #999;
 }
 
-/* stylelint-disable-next-line rscss/no-descendant-combinator */
 .app-footer a {
   color: #999;
 }
diff --git a/public/scripts/AppIcon.js b/public/scripts/AppIcon.js
index a804e4b..34e2d8e 100644
--- a/public/scripts/AppIcon.js
+++ b/public/scripts/AppIcon.js
@@ -7,9 +7,11 @@ const cache = {};
  * @param {HTMLElement} el
  */
 export function AppIcon(el) {
-  if (el.children.length > 0) return;
+  if (el.dataset.lid === el.dataset.id) return;
 
   const id = el.dataset.id;
+  el.dataset.lid = id;
+
   let promise = cache[id];
 
   if (!promise) {
diff --git a/public/scripts/TodoApp.js b/public/scripts/TodoApp.js
index cc1ee0a..acdbd55 100644
--- a/public/scripts/TodoApp.js
+++ b/public/scripts/TodoApp.js
@@ -18,6 +18,9 @@ export function TodoApp(el) {
         VANILLA TODO
       </h1>
       <p class="actions">
+        <label class="app-button invertcolorscheme" title="Enable dark mode">
+          <i class="app-icon" data-id="moon-16"></i>
+        </label>
         <label class="app-button import" title="Import data">
           <i class="app-icon" data-id="upload-16"></i>
           <input type="file" name="importFile" hidden>
@@ -60,6 +63,14 @@ export function TodoApp(el) {
   TodoFrameDays(el.querySelector('.todo-frame.-days'));
   TodoFrameCustom(el.querySelector('.todo-frame.-custom'));
 
+  el.querySelector(
+    '.app-header > .actions > .invertcolorscheme',
+  ).addEventListener('click', () => {
+    localStorage.invertColorScheme =
+      localStorage.invertColorScheme === 'true' ? 'false' : 'true';
+    update();
+  });
+
   el.querySelector('[name=importFile]').addEventListener('change', (e) => {
     const f = e.target.files[0];
     if (!f) return;
@@ -153,6 +164,26 @@ export function TodoApp(el) {
     el.querySelectorAll('.app-collapsible').forEach((el) =>
       el.dispatchEvent(new CustomEvent('collapse')),
     );
+
+    updateColorScheme();
+  }
+
+  function updateColorScheme() {
+    const prefersDarkColorScheme = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches;
+    const invertColorScheme = localStorage.invertColorScheme === 'true';
+
+    document.body.classList.toggle('-invertcolorscheme', invertColorScheme);
+
+    const iconEl = el.querySelector(
+      '.app-header > .actions > .invertcolorscheme > .app-icon',
+    );
+
+    iconEl.dataset.id =
+      prefersDarkColorScheme === invertColorScheme ? 'moon-16' : 'sun-16';
+
+    AppIcon(iconEl);
   }
 
   function beforeFlip(e) {
diff --git a/public/styles/app-date-picker.css b/public/styles/app-date-picker.css
index 03f1469..0f9cc31 100644
--- a/public/styles/app-date-picker.css
+++ b/public/styles/app-date-picker.css
@@ -31,19 +31,16 @@
   width: 100%;
 }
 
-/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > thead > tr > th {
   font-weight: normal;
   text-transform: uppercase;
   padding-bottom: 0.4em;
 }
 
-/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > tbody > tr > td {
   padding: 0;
 }
 
-/* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > tbody > tr > td > button {
   width: 100%;
   height: 1.9em;
diff --git a/public/styles/app-footer.css b/public/styles/app-footer.css
index 972121e..cf3e1ff 100644
--- a/public/styles/app-footer.css
+++ b/public/styles/app-footer.css
@@ -8,7 +8,6 @@
   margin: 0;
 }
 
-/* stylelint-disable-next-line rscss/no-descendant-combinator */
 .app-footer a {
   color: var(--aside-text);
 }
diff --git a/public/styles/base.css b/public/styles/base.css
index fe7c5cc..c89a3e6 100644
--- a/public/styles/base.css
+++ b/public/styles/base.css
@@ -12,12 +12,11 @@ html,
 body {
   margin: 0;
   padding: 0;
-  height: 100%;
-  background: var(--main-bg);
-  color: var(--main-text);
 }
 
 body {
+  background: var(--main-bg);
+  color: var(--main-text);
   font-size: 16px;
   font-family: -apple-system, BlinkMacSystemFont, Helvetica, 'Helvetica Neue',
     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
diff --git a/public/styles/todo-custom-list.css b/public/styles/todo-custom-list.css
index 53249fd..852631d 100644
--- a/public/styles/todo-custom-list.css
+++ b/public/styles/todo-custom-list.css
@@ -37,6 +37,8 @@
   outline: 0;
   border-radius: 0;
   vertical-align: middle;
+  color: inherit;
+  background: inherit;
 }
 
 .todo-custom-list > .header > .form > .delete {
@@ -57,7 +59,7 @@
   box-shadow:
     10px 0 12px -14px rgb(0 0 0 / 30%),
     -10px 0 12px -14px rgb(0 0 0 / 30%);
-  background: #fff;
+  background: var(--main-bg);
   opacity: 0.8;
 }
 
diff --git a/public/styles/todo-item-input.css b/public/styles/todo-item-input.css
index 09de138..2bd2a3c 100644
--- a/public/styles/todo-item-input.css
+++ b/public/styles/todo-item-input.css
@@ -18,6 +18,7 @@
   font-size: inherit;
   line-height: 1.5em;
   background: transparent;
+  color: inherit;
 }
 
 .todo-item-input > .save {
diff --git a/public/styles/todo-item.css b/public/styles/todo-item.css
index 4c3350d..c436318 100644
--- a/public/styles/todo-item.css
+++ b/public/styles/todo-item.css
@@ -56,6 +56,7 @@
   font-size: inherit;
   line-height: 1.5em;
   background: transparent;
+  color: inherit;
 }
 
 .todo-item > .form > .save {
diff --git a/public/styles/vars.css b/public/styles/vars.css
index 8c85a03..1867fee 100644
--- a/public/styles/vars.css
+++ b/public/styles/vars.css
@@ -24,3 +24,56 @@
   --button-active-bg: var(--grey4);
   --button-highlight-text: var(--red);
 }
+
+.-invertcolorscheme {
+  --main-text: var(--white);
+  --main-bg: var(--black);
+  --main-border: var(--grey3);
+  --main-border-light: var(--grey2);
+  --header-text: var(--grey2);
+  --header-bg: var(--black);
+  --highlight-text: var(--red);
+  --disabled-text: var(--grey1);
+  --aside-text: var(--grey2);
+  --button-text: var(--grey2);
+  --button-bg: transparent;
+  --button-active-text: var(--white);
+  --button-active-bg: var(--grey1);
+  --button-highlight-text: var(--red);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-text: var(--white);
+    --main-bg: var(--black);
+    --main-border: var(--grey3);
+    --main-border-light: var(--grey2);
+    --header-text: var(--grey2);
+    --header-bg: var(--black);
+    --highlight-text: var(--red);
+    --disabled-text: var(--grey1);
+    --aside-text: var(--grey2);
+    --button-text: var(--grey2);
+    --button-bg: transparent;
+    --button-active-text: var(--white);
+    --button-active-bg: var(--grey1);
+    --button-highlight-text: var(--red);
+  }
+
+  .-invertcolorscheme {
+    --main-text: var(--black);
+    --main-bg: var(--white);
+    --main-border: var(--grey2);
+    --main-border-light: var(--grey3);
+    --header-text: var(--grey1);
+    --header-bg: var(--white);
+    --highlight-text: var(--red);
+    --disabled-text: var(--grey2);
+    --aside-text: var(--grey1);
+    --button-text: var(--grey1);
+    --button-bg: transparent;
+    --button-active-text: var(--black);
+    --button-active-bg: var(--grey4);
+    --button-highlight-text: var(--red);
+  }
+}