feat(todo): add dark mode

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.

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.

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>

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 {

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}

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"

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": [

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",
@@ -14,7 +14,7 @@
   "manifest.json",
 ]
 
 self.addEventListener("install", (e: any) => {
   console.log(`[purity-todo.sw.js] Install`)
   e.waitUntil(
     (async () => {
@@ -25,7 +25,7 @@
   )
 })
 
 self.addEventListener("activate", (e: any) => {
   console.log(`[purity-todo.sw.js] Activate`)
   caches.keys().then(console.log)
   e.waitUntil(
@@ -44,7 +44,7 @@
   )
 })
 
 self.addEventListener("fetch", (e: any) => {
   e.respondWith(
     (async () => {
       const r = await caches.match(e.request)