set theme

src/app.css

@@ -1,7 +1,6 @@
 :root {
-    --text-color-primary: black;
     --border-radius: 8px;
-    --border-color: black;
+    --border-color: var(--color-secondary);
     --border-size: 2px;
 
     --spacing30: 0.5rem;
@@ -10,6 +9,26 @@
     --spacing60: 1.25rem;
     --spacing70: 1.5rem;
 
+    --color-base-100: oklch(24.353% 0 0);
+    --color-base-200: oklch(22.648% 0 0);
+    --color-base-300: oklch(20.944% 0 0);
+    --color-base-content: oklch(84.87% 0 0);
+    --color-primary: oklch(41.703% 0.099 251.473);
+    --color-primary-content: oklch(88.34% 0.019 251.473);
+    --color-secondary: oklch(64.092% 0.027 229.389);
+    --color-secondary-content: oklch(12.818% 0.005 229.389);
+    --color-accent: oklch(67.271% 0.167 35.791);
+    --color-accent-content: oklch(13.454% 0.033 35.791);
+    --color-neutral: oklch(27.441% 0.013 253.041);
+    --color-neutral-content: oklch(85.488% 0.002 253.041);
+    --color-info: oklch(62.616% 0.143 240.033);
+    --color-info-content: oklch(12.523% 0.028 240.033);
+    --color-success: oklch(70.226% 0.094 156.596);
+    --color-success-content: oklch(14.045% 0.018 156.596);
+    --color-warning: oklch(77.482% 0.115 81.519);
+    --color-warning-content: oklch(15.496% 0.023 81.519);
+    --color-error: oklch(51.61% 0.146 29.674);
+    --color-error-content: oklch(90.322% 0.029 29.674);
 }
 
 *,

src/lib/components/LinkCards.svelte

@@ -33,12 +33,14 @@
             width: var(--card-size);
             height: var(--card-size);
 
-            color: var(--text-color-primary);
+            background-color: var(--color-base-300);
+            color: var(--color-secondary);
             border: var(--border-size) solid var(--border-color);
             border-radius: var(--border-radius);
 
             span {
                 font-size: 1.25rem;
+                color: var(--color-base-content);
             }
         }
 

src/routes/+layout.svelte

@@ -22,6 +22,8 @@
 			grid-template-columns:
 				minmax(var(--spacing50), auto) minmax(auto, 800px)
 				minmax(var(--spacing50), auto);
+			color: var(--color-base-content);
+			background-color: var(--color-base-100);
 		}
 	}
 </style>