add theme switch

src/styles/App.scss

@@ -1,4 +1,7 @@
 #app {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--color-background-body);
+	min-height: auto;
+	flex: 1;
 }

src/styles/Header.scss

@@ -20,15 +20,15 @@
 		a {
 			margin-left: 1rem;
 			text-decoration: none;
-			color: #323232;
+			color: var(--color-font-link-header);
 			font-weight: 600;
 			font-size: 1.2rem;
 			transition: all 0.1s ease-in-out;
-			border-bottom: 3px solid transparent;
+			border-bottom: 3px solid var(--color-font-link-header);
 
 			&:hover {
-				color: #000000;
-				border-color: #000000;
+				color: var(--color-font-link-header-hover);
+				border-color: var(--color-font-link-header-hover);
 			}
 		}
 	}

src/styles/ThemeSwitch.scss

@@ -0,0 +1,26 @@
+.themeSwitch {
+	svg {
+		aspect-ratio: 1;
+		height: 2rem;
+		cursor: pointer;
+		animation-duration: 150ms;
+		animation-timing-function: linear;
+		animation-iteration-count: 1;
+		animation-direction: normal;
+		fill: var(--color-font-nav);
+		transition: all 50ms linear;
+
+		&:hover {
+			fill: var(--color-font);
+		}
+	}
+
+	@keyframes spinThemeSwitch {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(-180deg);
+		}
+	}
+}

src/styles/index.scss

@@ -1,11 +1,13 @@
+@import "variables_colors.scss";
+
 :root {
 	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 	line-height: 1.5;
 	font-weight: 400;
 
 	color-scheme: light dark;
-	color: rgba(0, 0, 0, 0.87);
-	background-color: #ffffff;
+	color: var(--color-font);
+	background-color: var(--color-background-body);
 
 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -19,3 +21,15 @@
 	margin: 0;
 	padding: 0;
 }
+
+html {
+	scroll-behavior: smooth;
+}
+
+body,
+#root {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	width: 100vw;
+}