Adapted themings to allow for light and dark

src/app.html

@@ -7,22 +7,50 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
 		<meta name="viewport" content="width=device-width" />
-		<meta name="color-scheme" content="dark" />
 		%sveltekit.head%
 
 		<style>
-			:root {
-				--bg: #282c34;
-				--bg-grad: #5a606d9f;
-				--bg-2: #838488;
-				--fg: #ABB2BF;
-				--red: #E06C75;
-				--green: #98C379;
-				--yellow: #E5C07B;
-				--blue: #61AFEF;
-				--purple: #C678DD; 
-				--cyan: #56B6C2;
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--bg: #282c34;
+					--bg-secondary: #474d57;
+					--bg-grad-1: #484e58;
+					--bg-grad-2: #4e5560;
+					--bg-grad-3: #59616d;
+					--bg-grad-4: #606a7b;
+					--bg-grad-5: #606978;
+					--input: #4e5560;
+					--fg: #ABB2BF;
+					--header: #E06C75;
+					--link: #98C379;
+					--hover: #56B6C2;
+					--glow: #C678DD;
 
+					--green: #98C379;
+					--red: #E06C75;
+				}
+			}
+			@media (prefers-color-scheme: light) {
+				:root {
+					--bg: #fff;
+					--bg-secondary: #ebebeb;
+					--bg-grad-1: #c1c1c1;
+					--bg-grad-2: #a1a1a1;
+					--bg-grad-3: #858585;
+					--bg-grad-4: #616161;
+					--bg-grad-5: #484848;
+					--input: #a9a9a9;
+					--fg: #2f2f2f;
+					--header: #514a4a;
+					--link: #df0000;
+					--hover: #4f4b489b;
+					--glow: #545454;
+					
+					--green: #98C379;
+					--red: #E06C75;
+				}
+			}
+			:root {
 				--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
 
 				background: var(--bg);
@@ -33,12 +61,12 @@
 			}
 
 			h1, h2, h3 {
-				color: var(--red);
+				color: var(--header);
 				border: 0;
 			}
 
 			hr {
-				border: .2em solid var(--bg-grad);
+				border: .2em solid var(--bg-grad-3);
   				border-radius: 5em;
 				width: 100%;
 			}
@@ -52,7 +80,7 @@
 				color: var(--fg);
 			}
 			*::-webkit-scrollbar-thumb:hover{
-				color: var(--green);
+				color: var(--link);
 			}
 
 			*::-webkit-scrollbar-thumb {        
@@ -68,7 +96,7 @@
 			a {
 				text-decoration: none;				
 				position: relative;
-				color: var(--green);
+				color: var(--link);
 				white-space: nowrap;
 			}
 
@@ -84,26 +112,26 @@
 			
 			a:hover:after {
 				width: 100%;
-				color: var(--purple);
+				color: var(--glow);
 			}
 
 			a:hover {
-				color: var(--purple);
+				color: var(--glow);
 			}
 
 			a:active {
-				color: var(--red);
+				color: var(--header);
 			}
 
 			.button {
 				color: var(--fg);
-				background-color: var(--bg-2);
-				box-shadow: .1em .1em .1em var(--green);
+				background-color: var(--bg-grad-1);
+				box-shadow: .1em .1em .1em var(--link);
 				transition: all 0.2s;
 			}
 
 			.button:hover {
-				box-shadow: .3em .3em .3em var(--red);    
+				box-shadow: .3em .3em .3em var(--header);    
 			}
 		</style>
 	</head>