src/app.html

@@ -28,7 +28,7 @@
 			}
 
 			hr {
-				border: .2em solid var(--bg-grad-3);
+				border: .2em solid var(--accent);
   				border-radius: 5em;
 				width: 100%;
 			}
@@ -87,7 +87,7 @@
 
 			.button {
 				color: var(--fg);
-				background-color: var(--bg-grad-1);
+				background-color: var(--accent);
 				transition: all 0.2s;
 			}
 

src/lib/components/ThemeSwitcher.svelte

@@ -45,12 +45,12 @@
     .slider {
         position: absolute;
         cursor: pointer;
-        background-color: var(--bg-grad-4);
+        background-color: var(--accent);
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #ccc;
+        background-color: var(--accent);
         -webkit-transition: .4s;
         transition: .4s;
     }
@@ -62,17 +62,10 @@
         width: 45%;
         left: 4px;
         bottom: 4px;
-        background-color: white;
+        background-color: var(--bg);
         -webkit-transition: .4s;
         transition: .4s;
     }
-    input:checked + .slider {
-        background-color: var(--bg-grad-1);
-    }
-
-    input:checked + .slider:before {
-        background: var(--bg);
-    }
 
     input:checked + .slider:before {
         -webkit-transform: translateX(1.625em);

src/main.svelte

@@ -28,7 +28,7 @@
         height: 8em;
         width: 8em;
         padding: 1em 1em 1em 1em;
-        border: .5em solid var(--bg-grad-3);
+        border: .5em solid var(--accent);
     }
     
     .about {

src/timeline.svelte

@@ -26,10 +26,10 @@
 			<TimelineSeparator>
 				{#if item.duration.includes('Present') || !item.duration.includes('-')}
 					<div class="elementToFadeInAndOut">
-						<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
+						<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 					</div>
 				{:else}
-					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
+					<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
 				{/if}
 				<TimelineConnector />
 			</TimelineSeparator>
@@ -45,7 +45,7 @@
 	.oposite-content-title {
 		margin: 0;
 		padding: 0;
-		color: var(--bg-grad-2);
+		color: var(--accent);
 	}
 	.content-title {
 		margin: 0;

static/themes/dark.css

@@ -1,17 +1,16 @@
 :root {
     --bg: #282c34;
     --bg-secondary: #3e434b;
-    --bg-grad-1: #484e58;
+    --accent: #59616d;
-    --bg-grad-2: #4e5560;
+
-    --bg-grad-3: #59616d;
-    --bg-grad-4: #606a7b;
-    --bg-grad-5: #606978;
-    --input: #2b3136;
-    --fg: #9eaac0;
     --header: #E06C75;
+    --fg: #9eaac0;
+    
+    --input: #2b3136;
+    
     --link: #98C379;
-    --hover: #56B6C2;
     --glow: #C678DD;
+    --hover: #56B6C2;
 
     --green: #98C379;
     --red: #E06C75;

static/themes/light.css

@@ -1,17 +1,16 @@
 :root {
-    --bg: #fff;
+    --bg: #1e1f2a;
-    --bg-secondary: #ebebeb;
+    --bg-secondary: #3a3f4b;
-    --bg-grad-1: #c1c1c1;
+    --accent: #777f8d;
-    --bg-grad-2: #a1a1a1;
+
-    --bg-grad-3: #858585;
+    --header: #cad1da;
-    --bg-grad-4: #616161;
+    --fg: #e4e1db;
-    --bg-grad-5: #484848;
+    
-    --input: #cbc9c9;
+    --input: #2e3438;
-    --fg: #2f2f2f;
+    
-    --header: #514a4a;
+    --link: #95add8;
-    --link: #df0000;
+    --glow: #bcc3ca;
-    --hover: #4f4b489b;
+    --hover: #cdd8e2;
-    --glow: #545454;
 
     --green: #98C379;
     --red: #E06C75;