Merge pull request 'fix: Dark mode colour variables' (#21) from styling/dark-mode into main

Reviewed-on: #21

src/app.css

@@ -37,13 +37,14 @@
 
     --radius: 0.5rem;
 
+	 --shadow: theme('colors.java.800');
 	 --name: theme('colors.java.800');
 	 --navlink: theme('colors.eucalyptus.400');
   }
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 230 9.1% 97.8%;
+    --foreground: 150 9.1% 70%;
 
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
@@ -70,6 +71,7 @@
     --destructive-foreground: 60 9.1% 97.8%;
 
     --ring: 24 5.7% 82.9%;
+	 --shadow: theme('colors.java.100');
 	 --name: theme('colors.java.300');
 	 --navlink: theme('colors.eucalyptus.200');
   }

src/routes/+page.svelte

@@ -138,8 +138,8 @@
 		width: 100%;
 		@apply bg-background;
 		@apply dark:bg-gray-800;
-		box-shadow:
+		/*box-shadow:
-			0px -5px 10px 10px var(--foreground);
+			0px -5px 5px var(--shadow);*/
 	}
 	#bio {
 		max-width: max(50vw, 100vh);

src/routes/Footer.svelte

@@ -7,6 +7,7 @@
 		text-align: center;
 		bottom: 10px;
 		font-size: 12px;
-		color: #888;
+		background-color: var(--background);
+		color: var(--foreground);
 	}
 </style>

tailwind.config.ts

@@ -121,57 +121,52 @@ const config: Config = {
 					maxWidth: "100%",
 				};
 				const themeTokiwa = {
-					h1: {
+					'--tw-prose-body': theme('colors.gray.900'),
-						color: theme('colors.eucalyptus.700'),
+					'--tw-prose-headings': theme('colors.eucalyptus.700'),
-					},
+					'--tw-prose-lead': theme('colors.eucalyptus.400'),
-					h2: {
+					'--tw-prose-links': theme('colors.eucalyptus.400'),
-						color: theme('colors.eucalyptus.700'),
+					'--tw-prose-bold': theme('colors.eucalyptus.800'),
-					},
+					'--tw-prose-counters': theme('colors.gray.900'),
-					h3: {
+					'--tw-prose-bullets': theme('colors.java.900'),
-						color: theme('colors.eucalyptus.800'),
+					'--tw-prose-hr': theme('colors.gray.600'),
-					},
+					'--tw-prose-quotes': theme('colors.gray.900'),
-					h4: {
+					'--tw-prose-quote-borders': theme('colors.eucalyptus.700'),
-						color: theme('colors.eucalyptus.800'),
+					'--tw-prose-captions': theme('colors.gray.800'),
-					},
+					'--tw-prose-code': theme('colors.sunglow.900'),
+					'--tw-prose-pre-code': theme('colors.gray.500'),
+					'--tw-prose-pre-bg': theme('colors.gray.500'),
+					'--tw-prose-th-borders': theme('colors.gray.500'),
+					'--tw-prose-td-borders': theme('colors.gray.500'),
 					a: {
 						color: theme('colors.eucalyptus.400'),
-						"&:focus": {
+						"&:hover, &:focus": {
 							color: theme('colors.java.500'),
 						},
 					},
-					blockquote: {
-						color: theme('colors.gray.800'),
-					},
-					code: {
-						color: theme('colors.gray.800'),
-					},
 				};
 				const themeStar = {
-					color: theme('colors.gray.200'),
+					'--tw-prose-body': theme('colors.gray.400'),
-					h1: {
+					'--tw-prose-headings': theme('colors.eucalyptus.500'),
-						color: theme('colors.eucalyptus.300'),
+					'--tw-prose-lead': theme('colors.eucalyptus.400'),
-					},
+					'--tw-prose-links': theme('colors.eucalyptus.500'),
-					h2: {
+					'--tw-prose-bold': theme('colors.eucalyptus.100'),
-						color: theme('colors.eucalyptus.300'),
+					'--tw-prose-counters': theme('colors.gray.100'),
-					},
+					'--tw-prose-bullets': theme('colors.java.100'),
-					h3: {
+					'--tw-prose-hr': theme('colors.gray.400'),
-						color: theme('colors.eucalyptus.200'),
+					'--tw-prose-quotes': theme('colors.gray.100'),
-					},
+					'--tw-prose-quote-borders': theme('colors.eucalyptus.300'),
-					h4: {
+					'--tw-prose-captions': theme('colors.gray.200'),
-						color: theme('colors.eucalyptus.200'),
+					'--tw-prose-code': theme('colors.sunglow.300'),
-					},
+					'--tw-prose-pre-code': theme('colors.gray.500'),
+					'--tw-prose-pre-bg': theme('colors.gray.500'),
+					'--tw-prose-th-borders': theme('colors.gray.500'),
+					'--tw-prose-td-borders': theme('colors.gray.500'),
 					a: {
-						color: theme('colors.eucalyptus.500'),
+						color: theme('colors.eucalyptus.300'),
-						"&:focus": {
+						"&:hover, &:focus": {
-							color: theme('colors.java.500'),
+							color: theme('colors.java.400'),
 						},
 					},
-					blockquote: {
-						color: theme('colors.gray.300'),
-					},
-					code: {
-						color: theme('colors.gray.300'),
-					},
 				};
 
 				return {