1 files changed, 34 insertions(+), 11 deletions(-)

M assets/styles/main.scss

@@ 3,18 3,41 @@
 
 /* Colors */
 
-$foreground: #16100f;
-$link-foreground: #681825;
+$light-primary: #fff6f2;
+$light-secondary: #ffeee5;
+$light-accent: #ff9f7f;
+$light-title: #f279b5;
+
+$dark-primary: #0c0907;
+$dark-secondary: #0f0d0c;
+$dark-accent: #660616;
+$dark-title: #3f0c26;
+
+:root {
+	@media (prefers-color-scheme: light) {
+		--background-primary: #{$light-primary};
+		--background-secondary: #{$light-secondary};
+
+		--foreground-primary: #{$dark-primary};
+		--foreground-accent: #{$dark-accent};
+		--foreground-title: #{$dark-title};
+	}
+	@media (prefers-color-scheme: dark) {
+		--background-primary: #{$dark-primary};
+		--background-secondary: #{$dark-secondary};
 
-$background: #f7bead;
-$header-footer-background: #fec89a;
+		--foreground-primary: #{$light-primary};
+		--foreground-accent: #{$light-accent};
+		--foreground-title: #{$light-title};
+	}
+}
 
 /* Layout */
 
 html {
-	background-color: $background;
+	background-color: var(--background-primary);
 	font-size: 15pt;
-	color: $foreground;
+	color: var(--foreground-primary);
 	font-family: Lato, sans-serif;
 	font-weight: 300;
 	height: 100%;


@@ 36,7 59,7 @@ main {
 }
 
 header, footer {
-	background-color: $header-footer-background;
+	background-color: var(--background-secondary);
 }
 
 p {


@@ 56,12 79,13 @@ h1 {
 }
 
 a {
-	color: $link-foreground;
+	color: var(--foreground-accent);
 }
 
 .title {
 	font-family: Patua One, sans-serif; 
 	font-weight: normal;
+	color: var(--foreground-title);
 }
 
 .header-footer {


@@ 74,7 98,6 @@ a {
 
 	.title {
 		font-size: 1.75rem;
-		color: $foreground;
 		text-decoration: none;
 		margin: 0.25rem 0;
 	}


@@ 99,7 122,7 @@ a {
 
 .tooltip {
 	cursor: help;
-	border-bottom: 1px dashed $foreground;
+	border-bottom: 1px dashed var(--foreground-primary);
 }
 
 .emoji {


@@ 152,7 175,7 @@ a {
 		$width: 0.25rem;
 		$size: 0.35rem;
 
-		border: solid $foreground;
+		border: solid var(--foreground-primary);
 		border-width: 0 $width $width 0;
 		display: inline-block;
 		padding: $size;