Changed checkbox tick depending on theme and updated PWA splashscreen…

… to be dark

.vscode/extensions.json

@@ -9,7 +9,8 @@
     "bradlc.vscode-tailwindcss",
     "csstools.postcss",
     "formulahendry.auto-rename-tag",
-    "heybourn.headwind"
+    "heybourn.headwind",
+    "github.vscode-github-actions"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

src/app.css

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  [type='checkbox']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
+
+  [type='radio']:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [type='checkbox']:checked {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23d1d5db' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    }
+
+    [type='radio']:checked {
+      background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23d1d5db' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+    }
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    @apply focus:ring-0 focus:ring-offset-0;
+  }
+}

src/app.html

@@ -6,7 +6,7 @@
     <link rel="icon" href="/%sveltekit.assets%/favicon.svg" sizes="any" type="image/svg+xml" />
     <link rel="manifest" href="/%sveltekit.assets%/manifest.json" />
     <meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#262626" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>

src/components/TodoList.svelte

@@ -59,13 +59,13 @@
     <div
       class="flex items-center justify-between w-full gap-1 py-1 pl-2 pr-1 border rounded hover:border-gray-400 dark:border-gray-500 dark:hover:border-gray-400"
     >
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <input
           type="checkbox"
           name="checkbox-{index}"
           id="checkbox-{index}"
           checked={child.status === 'checked'}
-          class="focus:ring-transparent focus:ring-offset-0 leading-tight bg-white checked:bg-gray-400 focus:checked:bg-gray-400 border rounded shadow border-gray-200 hover:border-gray-400 focus:border-gray-400 focus:checked:border-gray-400 checked:border-gray-400 dark:bg-neutral-700 dark:border-neutral-500 dark:focus:border-neutral-500 dark:checked:text-neutral-700 dark:checked:bg-neutral-700 dark:checked:border-neutral-500 dark:focus:checked:bg-neutral-700 dark:focus:checked:border-neutral-500 size-8"
+          class="leading-tight text-white bg-white border border-gray-200 rounded shadow focus:ring-transparent focus:ring-offset-0 checked:text-white checked:bg-white focus:checked:bg-white focus:checked:text-white hover:border-gray-400 focus:border-gray-400 focus:checked:border-gray-400 checked:border-gray-400 dark:bg-neutral-700 dark:border-neutral-500 dark:focus:border-neutral-500 dark:checked:text-neutral-700 dark:checked:bg-neutral-700 dark:checked:border-neutral-500 dark:focus:checked:bg-neutral-700 dark:focus:checked:border-neutral-500 size-8"
           on:change={(event) => handleCheck(event, child)}
         />
         <label for="checkbox-{index}">{child.title}</label>
@@ -121,7 +121,7 @@
       type="text"
       name="new-todo"
       placeholder="New to-do"
-      class="w-full h-10 px-2 py-2 mb-3 focus:ring-transparent focus:ring-offset-0 leading-tight text-gray-700 border rounded shadow appearance-none border-gray-200 hover:border-gray-400 focus:border-gray-400 focus:outline-none focus:shadow-outline dark:bg-neutral-800 dark:border-neutral-500 dark:focus:border-neutral-500 dark:text-gray-200 dark:placeholder:text-gray-400"
+      class="w-full h-10 px-2 py-2 mb-3 leading-tight text-gray-700 border border-gray-200 rounded shadow appearance-none focus:ring-transparent focus:ring-offset-0 hover:border-gray-400 focus:border-gray-400 focus:outline-none focus:shadow-outline dark:bg-neutral-800 dark:border-neutral-500 dark:focus:border-neutral-500 dark:text-gray-200 dark:placeholder:text-gray-400"
     />
     <StyledButton type="submit" name="add-todo"
       ><StyledVectorGraphic>

static/manifest.json

@@ -2,8 +2,8 @@
   "short_name": "Simple Todos",
   "name": "simple-collaborative-todos",
   "start_url": "/",
-  "theme_color": "#FFFFFF",
-  "background_color": "#FFFFFF",
+  "theme_color": "##262626",
+  "background_color": "##262626",
   "icons": [
     {
       "src": "favicon-dark.svg",
@@ -12,7 +12,7 @@
       "purpose": "any"
     },
     {
-      "src": "favicon-dark.png",
+      "src": "favicon.png",
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "any maskable"