From 22d52165201c149804a1e58e717b5f2fa6bfdbd9 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Wed, 10 Jan 2024 11:48:46 +0100
Subject: [PATCH] Basic dark theme

---
 sass/style.scss | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index c00b941..b6dbf2b 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -22,6 +22,11 @@ body {
 	&>* {
 		width: 100%;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		color: #ddd;
+		background-color: #222;
+	}
 }
 
 .wrap {
@@ -48,6 +53,10 @@ nav {
 		.logo {
 			height: 4em;
 			display: block;
+
+			@media (prefers-color-scheme: dark) {
+				filter: contrast(80%) saturate(80%) brightness(180%);
+			}
 		}
 
 		ul {
@@ -91,12 +100,12 @@ img {
 }
 
 header {
+	position: relative;
 	min-height: 35em;
-	background-color: #fff;
-	background-image:  url('img/forest.svg'), url('img/panorama.jpg');
-	background-size: contain, cover;
-	background-position: center bottom -4px, center center; // -4px fixes a visible line on some resolutions
-	background-repeat: no-repeat, no-repeat;
+	background-image:  url('img/panorama.jpg');
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
 	color: #fff;
 
 	.wrap {
@@ -107,6 +116,23 @@ header {
 		font-size: 2.5em;
 		margin-bottom: 1.5em;
 	}
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-image:  url('img/forest.svg');
+		background-size: contain;
+		background-position: center bottom -4px; // -4px fixes a visible line on some resolutions
+		background-repeat: no-repeat;
+
+		@media (prefers-color-scheme: dark) {
+			filter: invert(100%) contrast(73%);
+		}
+	}
 }
 
 section {