fix dark and light mode colors

src/App.tsx

@@ -1,5 +1,5 @@
 import { createSignal, onMount } from 'solid-js'
-import './App.css'
+import './assets/App.css'
 import parts from './parts.json'
 import PWABadge from './PWABadge'
 

src/assets/App.css

@@ -5,7 +5,7 @@
 
 @font-face {
   font-family: 'helsinkiregular';
-  src: url('../helsinki-webfont.woff') format('woff');
+  src: url('helsinki-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,8 +24,8 @@
   inset: 0;
   margin: auto;
   height: min(100vh, 50rem);
-  background-color: #FFF;
-  mask-image: url('../brush-stroke.png');
+  background-color: var(--color-bg);
+  mask-image: url('brush-stroke.png');
   mask-size: cover;
   mask-repeat: no-repeat;
   mask-position: center;
@@ -33,7 +33,7 @@
 
 .prompt {
   font-size: min(3rem, 10vmin);
-  text-shadow: 0 0 0.1em white, 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white;
+  text-shadow: 0 0 0.1em var(--color-bg), 0 0 0.25em var(--color-bg), 0 0 0.5em var(--color-bg), 0 0 1em var(--color-bg);
   width: min(80vmax, calc(100vw - 2rem));
   margin: 0 auto;
 }
@@ -42,4 +42,4 @@
   position: fixed;
   bottom: 1rem;
   left: 1rem;
-}
+}

src/assets/index.css

@@ -4,8 +4,10 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  --color-fg: rgba(255, 255, 255, 0.87);
+  --color-bg: #242424;
+  color: var(--color-fg);
+  background-color: var(--color-bg);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -56,8 +58,8 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    --color-bg: rgba(255, 255, 255, 0.87);
+    --color-fg: #242424;
   }
   a:hover {
     color: #747bff;

src/assets/solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

src/index.tsx

@@ -1,6 +1,6 @@
 /* @refresh reload */
 import { render } from 'solid-js/web'
-import './index.css'
+import './assets/index.css'
 import App from './App.tsx'
 
 const root = document.getElementById('root')