From af8edda92e1f7e86b3e9d5356a12ea3711066921 Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@gmail.com>
Date: Sun, 19 Oct 2025 19:09:44 +0300
Subject: [PATCH] feat(todo): add dark mode

---
 CONTRIBUTING.md                               |  2 ++
 src/examples/purity-todo/README.md            |  3 +++
 .../purity-todo/components/app-style.ts       | 22 ++++++++++++++++---
 .../purity-todo/components/modal-style.ts     |  6 ++---
 .../purity-todo/components/settings.ts        |  3 +++
 .../purity-todo/components/task-list-style.ts |  6 +++--
 src/examples/purity-todo/manifest.json        |  2 +-
 src/examples/purity-todo/purity-todo.sw.ts    |  2 +-
 8 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 src/examples/purity-todo/README.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8917fbe..0c3e352 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,6 +10,8 @@ Make sure your code is compiled (run `bash bin/compile.sh` to start compilation
 
 > **Tip:** You may use `npm start` to combine those two commands.
 
+To explore examples, visit http://localhost:8081/public/examples/.
+
 ## Code minification
 
 To minify files run `bash bin/minify.sh` script.
diff --git a/src/examples/purity-todo/README.md b/src/examples/purity-todo/README.md
new file mode 100644
index 0000000..d6c7201
--- /dev/null
+++ b/src/examples/purity-todo/README.md
@@ -0,0 +1,3 @@
+# Purity Todo
+
+When releasing a new version, update the version in the `manifest.json` file and the `purity-todo.sw.ts` file.
diff --git a/src/examples/purity-todo/components/app-style.ts b/src/examples/purity-todo/components/app-style.ts
index 75594e5..cb06b5e 100644
--- a/src/examples/purity-todo/components/app-style.ts
+++ b/src/examples/purity-todo/components/app-style.ts
@@ -4,12 +4,26 @@ export const ACTION_BUTTON = "action-button"
 
 export const appStyle = (): string => render`
   <style id="app-style">
+    :root {
+      --background-color: #f0f0f0;
+      --text-color: #555;
+      --shadow-color: #555;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --background-color: #484848;
+        --text-color: #f0f0f0;
+        --shadow-color: #000;
+      }
+    }
+
     *,
     *::before,
     *::after {
       font-family: sans-serif;
       font-size: 20px;
-      color: #555555;
+      color: var(--text-color);
     }
 
     input[type='file'] {
@@ -19,9 +33,11 @@ export const appStyle = (): string => render`
     body {
       position: relative;
       height: 100vh;
+      background-color: var(--background-color);
+      color: var(--text-color);
     }
 
-    ol, 
+    ol,
     ul {
       list-style-type: none;
       padding: 0;
@@ -56,7 +72,7 @@ export const appStyle = (): string => render`
     }
 
     .${ACTION_BUTTON}.chosen {
-      color: white;
+      color: var(--background-color);
     }
 
   </style>
diff --git a/src/examples/purity-todo/components/modal-style.ts b/src/examples/purity-todo/components/modal-style.ts
index 063c53d..dcea5f0 100644
--- a/src/examples/purity-todo/components/modal-style.ts
+++ b/src/examples/purity-todo/components/modal-style.ts
@@ -21,12 +21,12 @@ export const modalStyle = (): string => render`
       width: 90vh;
 
       overflow-y: auto;
-      background-color: white;
+      background-color: var(--background-color);
     }
 
     .modal {
-      border: 1px solid wheat;
-      box-shadow: 0px 4px 16px 0px;
+      border: 1px solid var(--shadow-color);
+      box-shadow: 0px 4px 16px 0px var(--shadow-color);
     }
 
     .modal .modal-header {
diff --git a/src/examples/purity-todo/components/settings.ts b/src/examples/purity-todo/components/settings.ts
index a5712d2..d06faad 100644
--- a/src/examples/purity-todo/components/settings.ts
+++ b/src/examples/purity-todo/components/settings.ts
@@ -10,6 +10,9 @@ const settingsStyle = () => render`
       border-bottom: 1px solid lightgrey;
       ${lineContainerCSS}
     }
+    ul.settings li:last-child  {
+      border-bottom: none;
+    }
 
     ul.settings li p {
       ${lineTextCSS}
diff --git a/src/examples/purity-todo/components/task-list-style.ts b/src/examples/purity-todo/components/task-list-style.ts
index 9e632ea..2d11b42 100644
--- a/src/examples/purity-todo/components/task-list-style.ts
+++ b/src/examples/purity-todo/components/task-list-style.ts
@@ -20,8 +20,10 @@ export const taskListStyle = (): string => render`
       min-height: 3rem;
       box-shadow: ${
         [
-          isTopScrolled(state) && "inset 0px 16px 8px -16px",
-          isBottomScrolled(state) && "inset 0px -16px 8px -16px",
+          isTopScrolled(state) &&
+            "inset 0px 16px 8px -16px var(--shadow-color)",
+          isBottomScrolled(state) &&
+            "inset 0px -16px 8px -16px var(--shadow-color)",
         ]
           .filter(isTruthy)
           .join(",") || "none"
diff --git a/src/examples/purity-todo/manifest.json b/src/examples/purity-todo/manifest.json
index 2ba12e9..54f4ce1 100644
--- a/src/examples/purity-todo/manifest.json
+++ b/src/examples/purity-todo/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Purity Todo 2.17",
+  "name": "Purity Todo 2.18",
   "short_name": "ToDo",
   "description": "Todo list written with purity.js",
   "icons": [
diff --git a/src/examples/purity-todo/purity-todo.sw.ts b/src/examples/purity-todo/purity-todo.sw.ts
index a9000a0..fdf2c4f 100644
--- a/src/examples/purity-todo/purity-todo.sw.ts
+++ b/src/examples/purity-todo/purity-todo.sw.ts
@@ -1,6 +1,6 @@
 const appScope = (self as any).registration.scope
 
-const cacheName = `${appScope}@2.17`
+const cacheName = `${appScope}@2.18`
 const contentToCache = [
   "./",
   "./index.html",