Add dark mode colors

#10

src/assets/styles.css

@@ -5,18 +5,18 @@
 @import 'tailwindcss/utilities';
 
 :root {
-  --light-0: 0 0% 100%; /* #fff */
-  --light-50: 240 20% 98%; /* #f9f9fb */
-  --light-100: 220 23% 95%; /* #eff1f5 */
-  --light-200: 229 18% 88%; /* #dbdde6 */
-  --light-300: 228 15% 81%; /* #c7cad6 */
-  --light-400: 226 12% 72%; /* #afb3c0 */
-  --light-500: 228 8% 61%; /* #9598a4 */
-  --light-600: 228 12% 56%; /* #82879c */
-  --light-700: 228 14% 51%; /* #707794 */
-  --light-800: 228 18% 44%; /* #5c6484 */
-  --light-900: 228 22% 31%; /* #3e4560 */
-  --light-950: 229 25% 22%; /* #2a2f46 */
+  --base-0: 228 0% 100%; /* #fff */
+  --base-50: 228 20% 98%; /* #f9f9fb */
+  --base-100: 228 23% 95%; /* #eff1f5 */
+  --base-200: 228 18% 88%; /* #dbdde6 */
+  --base-300: 228 15% 81%; /* #c7cad6 */
+  --base-400: 228 12% 72%; /* #afb3c0 */
+  --base-500: 228 8% 61%; /* #9598a4 */
+  --base-600: 228 12% 56%; /* #82879c */
+  --base-700: 228 14% 51%; /* #707794 */
+  --base-800: 228 18% 44%; /* #5c6484 */
+  --base-900: 228 22% 31%; /* #3e4560 */
+  --base-950: 228 25% 22%; /* #2a2f46 */
 
   --accent-50: 24 100% 98%; /* #fff9f5 */
   --accent-100: 24 100% 96%; /* #fff3eb */
@@ -33,22 +33,49 @@
   --focus-500: 213 100% 65%; /* #4c9eff */
 }
 
-:root {
-  --color-bg-hover: var(--light-50);
-  --color-bg-controls: var(--light-100);
-  --color-bg-blank: var(--light-0);
+.dark {
+  --base-0: 228 0% 14%; /* #242424 */
+  --base-50: 228 0% 17%; /* #2e2e2e */
+  --base-100: 228 0% 20%; /* #373737 */
+  --base-200: 228 0% 27%; /* #454545 */
+  --base-300: 228 0% 36%; /* #5c5c5c */
+  --base-400: 228 0% 45%; /* #737373 */
+  --base-500: 228 10% 54%; /* #7e8295 */
+  --base-600: 228 30% 63%; /* #848fbd */
+  --base-700: 228 48% 72%; /* #95a2da */
+  --base-800: 228 65% 81%; /* #b0bbee */
+  --base-900: 228 76% 90%; /* #d2d9f9 */
+  --base-950: 228 100% 95%; /* #e4e9ff */
+
+  --accent-50: 24 18% 13%; /* #27201b */
+  --accent-100: 24 33% 16%; /* #36261b */
+  --accent-200: 24 46% 23%; /* #563520 */
+  --accent-300: 24 58% 29%; /* #75411f */
+  --accent-400: 24 69% 36%; /* #9b4f1c */
+  --accent-500: 24 78% 42%; /* #bf5a18 */
+  --accent-600: 24 87% 48%; /* #e56510 */
+  --accent-700: 24 100% 55%; /* #ff7519 */
+  --accent-800: 24 87% 69%; /* #f5a26b */
+  --accent-900: 24 77% 83%; /* #f5cdb2 */
+  --accent-950: 24 69% 90%; /* #f7e2d4 */
+
+  --focus-500: 213 100% 55%; /* #1a83ff */
+}
+
+:root,
+.dark {
+  --color-bg-blank: var(--base-0);
+  --color-bg-hover: var(--base-50);
+  --color-bg-controls: var(--base-100);
   --color-bg-selection: var(--accent-200);
 
-  --color-text-primary: var(--light-950);
+  --color-text-primary: var(--base-950);
   --color-text-primary-selected: var(--accent-950);
-  --color-text-secondary: var(--light-500);
+  --color-text-secondary: var(--base-500);
 
-  --color-separator: var(--light-200);
-  --color-indentation: var(--light-400);
-  --color-icon: var(--light-500);
+  --color-separator: var(--base-200);
+  --color-indentation: var(--base-400);
+  --color-icon: var(--base-500);
   --color-accent: var(--accent-700);
   --color-focus: var(--focus-500);
 }
-
-.dark {
-}