diff --git a/src/examples/purity-todo/components/app-style.ts b/src/examples/purity-todo/components/app-style.ts
index cb06b5e..adc92ba 100644
--- a/src/examples/purity-todo/components/app-style.ts
+++ b/src/examples/purity-todo/components/app-style.ts
@@ -8,13 +8,45 @@ export const appStyle = (): string => render`
       --background-color: #f0f0f0;
       --text-color: #555;
       --shadow-color: #555;
+      --border-color: lightgrey;
+      --accent-color: #4a90e2;
+      --completed-color: lightgrey;
+      --subtask-color: lightgrey;
+      --button-active-bg: grey;
+      --header-bg: lightgrey;
+      --header-border: none;
+      --input-bg: #303030;
+      --input-color: #eee;
+      --input-border: none;
+      --input-focus-outline: none;
+      --modal-overlay-bg: #50505030;
+      --task-item-hover-bg: transparent;
+      --completed-image-opacity: 1;
+      --control-button-bg: #555;
+      --control-button-opacity: 0.75;
     }
 
     @media (prefers-color-scheme: dark) {
       :root {
-        --background-color: #484848;
-        --text-color: #f0f0f0;
-        --shadow-color: #000;
+        --background-color: #1a1a2e;
+        --text-color: #e0e0e0;
+        --shadow-color: rgba(0, 0, 0, 0.5);
+        --border-color: #2d2d44;
+        --accent-color: #4a90e2;
+        --completed-color: #6b7280;
+        --subtask-color: #9ca3af;
+        --button-active-bg: var(--accent-color);
+        --header-bg: #2d2d44;
+        --header-border: 1px solid var(--border-color);
+        --input-bg: var(--header-bg);
+        --input-color: var(--text-color);
+        --input-border: 1px solid var(--border-color);
+        --input-focus-outline: 2px solid var(--accent-color);
+        --modal-overlay-bg: rgba(0, 0, 0, 0.7);
+        --task-item-hover-bg: rgba(74, 144, 226, 0.1);
+        --completed-image-opacity: 0.5;
+        --control-button-bg: var(--accent-color);
+        --control-button-opacity: 0.9;
       }
     }
 
@@ -63,16 +95,22 @@ export const appStyle = (): string => render`
     }
 
     .${ACTION_BUTTON}:active {
-      background-color: grey;
-      color: white;
+      background-color: var(--button-active-bg);
     }
 
     .${ACTION_BUTTON}.hidden {
       display: none;
     }
 
-    .${ACTION_BUTTON}.chosen {
-      color: var(--background-color);
+    .header {
+      .${ACTION_BUTTON} {
+        color: var(--background-color);
+      }
+
+      .${ACTION_BUTTON}:active,
+      .${ACTION_BUTTON}.chosen {
+        color: var(--text-color);
+      }
     }
 
   </style>
diff --git a/src/examples/purity-todo/components/header.ts b/src/examples/purity-todo/components/header.ts
index 9760d52..c540151 100644
--- a/src/examples/purity-todo/components/header.ts
+++ b/src/examples/purity-todo/components/header.ts
@@ -5,25 +5,25 @@ import {ACTION_BUTTON} from "./app-style.js"
 
 const headerStyle = (): string => render`
   <style id="header-style">
-    #header {
-      background-color: lightgrey;
+    .header {
+      background-color: var(--header-bg);
+      border-bottom: var(--header-border);
       height: 3rem;
       min-height: 3rem;
       max-width: 100%;
       z-index: 1;
-    }
 
-    #header ul {
-      display: flex;
-      justify-content: space-around;
-      user-select: none;
+      ul {
+        display: flex;
+        justify-content: space-around;
+        user-select: none;
+      }
     }
-
   </style>
 `
 
 export const header = (): string => render`
-  <nav id="header">
+  <nav id="header" class="header">
     <ul>
       ${navItem({value: "active", label: "⊡"})}
       ${navItem({value: "completed", label: "⊠"})}
diff --git a/src/examples/purity-todo/components/input-form.ts b/src/examples/purity-todo/components/input-form.ts
index b8855ff..d9d9153 100644
--- a/src/examples/purity-todo/components/input-form.ts
+++ b/src/examples/purity-todo/components/input-form.ts
@@ -19,11 +19,17 @@ const inputFormStyle = () => render`
     form#task-form input {
       width: 100%;
       height: 100%;
-      background-color: #303030;
-      color: #eee;
+      background-color: var(--input-bg);
+      color: var(--input-color);
+      border: var(--input-border);
       border-radius: 0;
     }
 
+    form#task-form input:focus {
+      outline: var(--input-focus-outline);
+      outline-offset: -2px;
+    }
+
   </style>
 `
 
diff --git a/src/examples/purity-todo/components/modal-style.ts b/src/examples/purity-todo/components/modal-style.ts
index dcea5f0..66bd076 100644
--- a/src/examples/purity-todo/components/modal-style.ts
+++ b/src/examples/purity-todo/components/modal-style.ts
@@ -8,7 +8,7 @@ export const modalStyle = (): string => render`
       right: 0;
       bottom: 0;
       left: 0;
-      background-color: #50505030;
+      background-color: var(--modal-overlay-bg);
       z-index: 1;
       display: flex;
       align-items: center;
@@ -30,7 +30,7 @@ export const modalStyle = (): string => render`
     }
 
     .modal .modal-header {
-      background-color: lightgrey;
+      background-color: var(--header-bg);
       font-weight: bold;
       position: relative;
       ${lineContainerCSS}
diff --git a/src/examples/purity-todo/components/subtask-item.ts b/src/examples/purity-todo/components/subtask-item.ts
index 8240839..623ef5c 100644
--- a/src/examples/purity-todo/components/subtask-item.ts
+++ b/src/examples/purity-todo/components/subtask-item.ts
@@ -11,33 +11,28 @@ const toggleSubtask =
   (subtaskIndex: number): EventHandler =>
   ({target: {checked}}) => {
     const {id, subtasks} = selectDetailedTask()
-    patchTask({
-      id: id,
-      subtasks: subtasks?.map((subtask, i) =>
-        i === subtaskIndex ? {...subtask, checked: !subtask.checked} : subtask
-      ),
-    })
+    const newSubtasks = subtasks?.map((s, i) =>
+      i === subtaskIndex ? {...s, checked: !s.checked} : s
+    )
+    patchTask({id: id, subtasks: newSubtasks})
   }
 
 const handleSubtaskChange =
   (subtaskIndex: number): EventHandler =>
   ({target: {value}}) => {
     const task = selectDetailedTask()
-    patchTask({
-      id: task.id,
-      subtasks: task.subtasks?.map((subtask, i) =>
-        i === subtaskIndex
-          ? {...subtask, description: sanitize(value)}
-          : subtask
-      ),
-    })
+    const newSubtasks = task.subtasks?.map((s, i) =>
+      i === subtaskIndex ? {...s, description: sanitize(value)} : s
+    )
+    patchTask({id: task.id, subtasks: newSubtasks})
   }
 
 const deleteSubtask =
   (subtaskIndex: number): EventHandler =>
   () => {
     const {id, subtasks} = selectDetailedTask()
-    patchTask({id, subtasks: subtasks?.filter((_, i) => i !== subtaskIndex)})
+    const newSubtasks = subtasks?.filter((_, i) => i !== subtaskIndex)
+    patchTask({id, subtasks: newSubtasks})
   }
 
 export const subtaskItem = (
diff --git a/src/examples/purity-todo/components/task-details-style.ts b/src/examples/purity-todo/components/task-details-style.ts
index 077ed6c..0dd0726 100644
--- a/src/examples/purity-todo/components/task-details-style.ts
+++ b/src/examples/purity-todo/components/task-details-style.ts
@@ -36,9 +36,9 @@ export const taskDetailsStyle = (): string => render`
     .task-details--image .controls button,
     .task-details--image .controls label {
       padding: 4px 16px;
-      background: #555;
+      background: var(--control-button-bg);
       color: white;
-      opacity: 0.75;
+      opacity: var(--control-button-opacity);
       border-radius: 8px;
     }
 
@@ -69,6 +69,9 @@ export const taskDetailsStyle = (): string => render`
       padding: 4px 8px;
       color: var(--text-color);
       opacity: 0.6;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .${SMALL_BUTTON} {
diff --git a/src/examples/purity-todo/components/task-details.ts b/src/examples/purity-todo/components/task-details.ts
index 7d6353c..8c01a79 100644
--- a/src/examples/purity-todo/components/task-details.ts
+++ b/src/examples/purity-todo/components/task-details.ts
@@ -88,12 +88,12 @@ export const taskDetails = (): string => {
           style="background-image: url('${
             task.isImageLoading ? IMAGES.LOADING : task?.image.link
           }');"
-        > 
+        >
           <div class="controls" id="controls">
             <button ::click=${makeChangeImage("current")}>
               ↻
             </button>
-        
+
             ${
               task?.image.queries.previousPage?.startIndex !== undefined &&
               render`
@@ -102,7 +102,7 @@ export const taskDetails = (): string => {
                 </button>
               `
             }
-            
+
             ${
               task?.image.queries.nextPage?.startIndex !== undefined &&
               render`
@@ -124,7 +124,6 @@ export const taskDetails = (): string => {
             </label>
           </div>
         </div>
-        
       </section>
 
       <section class="task-details--description">
@@ -141,7 +140,7 @@ export const taskDetails = (): string => {
           ${task.subtasks?.map(subtaskItem)}
         </div>
         <div style="padding: 4px 8px; ">
-          <button 
+          <button
             class="${ACTION_BUTTON} ${SMALL_BUTTON}"
             ::click=${handleAddSubtask}
           >
diff --git a/src/examples/purity-todo/components/task-item.test.ts b/src/examples/purity-todo/components/task-item.test.ts
index b15cfb9..19c030a 100644
--- a/src/examples/purity-todo/components/task-item.test.ts
+++ b/src/examples/purity-todo/components/task-item.test.ts
@@ -39,6 +39,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag
@@ -73,6 +74,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag
@@ -110,6 +112,7 @@ describe("task-item", () => {
             onerror="this.onerror = null; this.src = './assets/images/icon-pack/forbidden.svg'"
             loading="lazy"
           /><div
+            id="item-description-test"
             class="item-description"
             data-id="test"
             data-purity_click_0 data-purity_flag
diff --git a/src/examples/purity-todo/components/task-item.ts b/src/examples/purity-todo/components/task-item.ts
index 69ea6e9..9b163cc 100644
--- a/src/examples/purity-todo/components/task-item.ts
+++ b/src/examples/purity-todo/components/task-item.ts
@@ -59,6 +59,7 @@ export const taskItem = ({
       loading="lazy"
     />
     <div
+      id="item-description-${id}"
       class="${ITEM_DESCRIPTION}"
       data-id="${id}"
       ::click=${openTaskDetails}
diff --git a/src/examples/purity-todo/components/task-list-style.ts b/src/examples/purity-todo/components/task-list-style.ts
index d3291af..f0bb066 100644
--- a/src/examples/purity-todo/components/task-list-style.ts
+++ b/src/examples/purity-todo/components/task-list-style.ts
@@ -32,7 +32,7 @@ export const taskListStyle = (): string => render`
 
     ol#task-list .task-item {
       display: flex;
-      border-bottom: 1px solid lightgrey;
+      border-bottom: 1px solid var(--border-color);
       align-items: center;
       padding: 0;
     }
@@ -47,18 +47,18 @@ export const taskListStyle = (): string => render`
     }
 
     ol#task-list .task-item.completed .${ITEM_DESCRIPTION} {
-      color: lightgrey;
+      color: var(--completed-color);
     }
 
     .${ITEM_DESCRIPTION} .subtask-inline {
-      color: lightgrey;
+      color: var(--subtask-color);
     }
 
     .${ITEM_DESCRIPTION} .subtask-inline::before {
       content: "⊡";
       margin-right: 0.5rem;
       margin-left: 0.5rem;
-      color: lightgrey;
+      color: var(--subtask-color);
     }
 
     ol#task-list .task-item > img {
@@ -70,19 +70,16 @@ export const taskListStyle = (): string => render`
       z-index: -1;
     }
 
+    ol#task-list .task-item:hover {
+      background-color: var(--task-item-hover-bg);
+    }
+
     ol#task-list .task-item.completed > img {
       filter: grayscale(1);
+      opacity: var(--completed-image-opacity);
     }
 
     ol#task-list .task-item.stale {
-      opacity: 0.4;
-      filter: grayscale(0.3);
-      transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
-    }
-
-    ol#task-list .task-item.stale:hover {
-      opacity: 0.7;
-      filter: grayscale(0.1);
     }
 
   </style>
diff --git a/src/examples/purity-todo/manifest.json b/src/examples/purity-todo/manifest.json
index 40a69ac..156d23c 100644
--- a/src/examples/purity-todo/manifest.json
+++ b/src/examples/purity-todo/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Purity Todo 2.19",
+  "name": "Purity Todo 2.20",
   "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 cbcca0f..a490dd2 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.19`
+const cacheName = `${appScope}@2.20`
 const contentToCache = [
   "./",
   "./index.html",
diff --git a/src/examples/purity-todo/services/task-details.test.ts b/src/examples/purity-todo/services/task-details.test.ts
new file mode 100644
index 0000000..7767f8d
--- /dev/null
+++ b/src/examples/purity-todo/services/task-details.test.ts
@@ -0,0 +1,119 @@
+import {describe, it, expect, beforeEach, vi} from "vitest"
+import {state} from "../app.js"
+import {type EventHandler} from "../../../purity.js"
+import {closeTaskDetails} from "./task-details.js"
+import * as storage from "./storage.js"
+import type * as appModule from "../app.js"
+
+vi.mock("./storage.js", () => ({
+  put: vi.fn(),
+  get: vi.fn(() => ({tasks: []})),
+}))
+
+vi.mock("../app.js", async () => {
+  const actual = await vi.importActual<typeof appModule>("../app.js")
+  return {
+    ...actual,
+    setState: (
+      fn: (state: typeof actual.state) => Partial<typeof actual.state>
+    ) => {
+      const updates = fn(actual.state)
+      Object.assign(actual.state, updates)
+    },
+  }
+})
+
+const getTestTask = (): appModule.Task => ({
+  id: "test-task",
+  description: "Test task",
+  completed: false,
+  subtasks: [],
+  image: {
+    link: "image.png",
+    queries: {},
+  },
+  createdAt: 0,
+  updatedAt: 0,
+})
+
+describe("closeTaskDetails", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    state.tasks = []
+    state.taskDetailId = undefined
+    state.view = "active"
+    state.input = ""
+    state.isSettingsModalOpen = false
+    state.taskListElement = null
+  })
+
+  it("should mark task as completed when all subtasks are completed", () => {
+    const task = getTestTask()
+    task.subtasks = [
+      {description: "Subtask 1", checked: true},
+      {description: "Subtask 2", checked: true},
+    ]
+    state.tasks = [task]
+    state.taskDetailId = task.id
+
+    closeTaskDetails({} as Parameters<EventHandler>[0])
+
+    const updatedTask = state.tasks.find(t => t.id === task.id)
+    expect(updatedTask?.completed).toBe(true)
+    expect(updatedTask?.subtasks).toEqual(task.subtasks)
+    expect(state.taskDetailId).toBeUndefined()
+  })
+
+  it("should mark task as not completed when not all subtasks are completed", () => {
+    const task = getTestTask()
+    task.subtasks = [
+      {description: "Subtask 1", checked: true},
+      {description: "Subtask 2", checked: false},
+    ]
+    state.tasks = [task]
+    state.taskDetailId = task.id
+
+    closeTaskDetails({} as Parameters<EventHandler>[0])
+
+    const updatedTask = state.tasks.find(t => t.id === task.id)
+    expect(updatedTask?.completed).toBe(false)
+    expect(updatedTask?.subtasks).toEqual(task.subtasks)
+    expect(state.taskDetailId).toBeUndefined()
+  })
+
+  it("should preserve task completed status when there are no subtasks", () => {
+    const task = getTestTask()
+    task.completed = true
+    task.subtasks = []
+    state.tasks = [task]
+    state.taskDetailId = task.id
+
+    closeTaskDetails({} as Parameters<EventHandler>[0])
+
+    const updatedTask = state.tasks.find(t => t.id === task.id)
+    expect(updatedTask?.completed).toBe(true)
+    expect(updatedTask?.subtasks).toEqual([])
+    expect(state.taskDetailId).toBeUndefined()
+  })
+
+  it("should filter out empty subtasks", () => {
+    const task = getTestTask()
+    task.subtasks = [
+      {description: "Valid subtask", checked: true},
+      {description: "", checked: false},
+      {description: "Another valid", checked: true},
+    ]
+    state.tasks = [task]
+    state.taskDetailId = task.id
+
+    closeTaskDetails({} as Parameters<EventHandler>[0])
+
+    const updatedTask = state.tasks.find(t => t.id === task.id)
+    expect(updatedTask?.subtasks).toEqual([
+      {description: "Valid subtask", checked: true},
+      {description: "Another valid", checked: true},
+    ])
+    expect(updatedTask?.completed).toBe(true)
+    expect(state.taskDetailId).toBeUndefined()
+  })
+})
diff --git a/src/examples/purity-todo/services/task-details.ts b/src/examples/purity-todo/services/task-details.ts
index deb8898..e097076 100644
--- a/src/examples/purity-todo/services/task-details.ts
+++ b/src/examples/purity-todo/services/task-details.ts
@@ -5,10 +5,21 @@ import type {EventHandler} from "../../../purity.js"
 
 export const closeTaskDetails: EventHandler = () => {
   const task = selectDetailedTask()
-  patchTask({
-    ...task,
-    subtasks: task.subtasks?.filter(({description}) => description),
-  })
+  const validSubtasks =
+    task.subtasks?.filter(({description}) => description) || []
+  const subtasksCompleted =
+    validSubtasks.length > 0
+      ? validSubtasks.every(s => s.checked)
+      : task.completed
+
+  patchTask(
+    {
+      ...task,
+      subtasks: validSubtasks,
+      completed: subtasksCompleted,
+    },
+    true
+  )
   setState(() => ({taskDetailId: undefined}))
 }
 
diff --git a/src/examples/purity-todo/services/tasks.ts b/src/examples/purity-todo/services/tasks.ts
index 6434931..e22e402 100644
--- a/src/examples/purity-todo/services/tasks.ts
+++ b/src/examples/purity-todo/services/tasks.ts
@@ -25,12 +25,20 @@ export const prepareTask = (description: string): Task => {
   return task
 }
 
-export const patchTask = (patch: Partial<Task> & Pick<Task, "id">): void => {
+export const patchTask = (
+  patch: Partial<Task> & Pick<Task, "id">,
+  silentUpdate = false
+): void => {
   const now = Date.now()
   setState(({tasks}) => ({
     tasks: tasks.map(({isImageLoading, ...task}) =>
       task.id === patch.id
-        ? {...task, ...patch, updatedAt: now, tmpFlag: true}
+        ? {
+            ...task,
+            ...patch,
+            updatedAt: silentUpdate ? task.updatedAt : now,
+            tmpFlag: true,
+          }
         : task
     ),
   }))
diff --git a/src/purity.ts b/src/purity.ts
index c8c2500..55bda76 100644
--- a/src/purity.ts
+++ b/src/purity.ts
@@ -122,7 +122,7 @@ export const init = <State extends Record<string, unknown>>(
       )
     }
     const newNodesMap = rootComponent()
-    console.warn("🌀")
+    console.warn("Updating DOM...")
     for (const [id, domNode] of domNodesMap) {
       const newNode = newNodesMap.get(id)
       // Since we depend on the shallow comparison, we must only care about updating changed nodes.
@@ -132,9 +132,9 @@ export const init = <State extends Record<string, unknown>>(
           updateAttributes(elementById, newNode)
           if (domNode.shallow.innerHTML !== newNode.shallow.innerHTML) {
             elementById.innerHTML = newNode.node.innerHTML
-            console.warn(`\t↻ #${id}`)
+            console.warn(`\t🔴 #${id} re-rendered`)
           } else {
-            console.warn(`\t± #${id}`)
+            console.warn(`\t🟡 #${id} not changed`)
           }
         } else {
           throw new Error(`There is no element in the DOM with id "${id}".`)