diff --git a/src/style.css b/src/style.css
index c5a4d9b..4b567c5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,17 +1,38 @@
+:root {
+	--color-background: #bad2e0;
+	--color-background-header: #d4abee;
+	--color-background-main: #efc2e7;
+	--color-text: #211237;
+	--color-link: #162fb6;
+	--color-shadow: #0f5a87;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color-background: #38235e;
+		--color-background-header: #5c5185;
+		--color-background-main: #69265c;
+		--color-text: #e9ddf8;
+		--color-link: #96a9e2;
+		--color-shadow: #200256;
+	}
+}
+
 * {
 	font-family: "sans-serif" sans;
+	color: var(--color-text);
 }
 
 a {
-	color: purple;
+	color: var(--color-link);
 }
 
 a:visited {
-	color: purple;
+	color: var(--color-link);
 }
 
 body {
-	background-color: lightblue;
+	background-color: var(--color-background);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -22,14 +43,13 @@ header {
 	padding: 1rem;
 	margin: 0 0 2rem 0;
 
-	background-color: violet;
-	box-shadow: 5px 5px black;
+	background-color: var(--color-background-header);
+	box-shadow: 5px 5px var(--color-shadow);
 
 	text-align: center;
 }
 
 header h1 {
-	color: black;
 	font-weight: 100;
 	margin: 1rem 0 0 0;
 }
@@ -43,8 +63,8 @@ main {
 	max-width: 50rem;
 	padding: 1rem;
 
-	background-color: pink;
-	box-shadow: 5px 5px black;
+	background-color: var(--color-background-main);
+	box-shadow: 5px 5px var(--color-shadow);
 }
 
 footer {