#4 Changed light colour theme in favour of a cold blue theme

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;