light/dark mode according to system

2 files changed, 31 insertions, 16 deletions

diff --git a/static/.style.css.swp b/static/.style.css.swp
new file mode 100644
index 0000000..9681933
--- /dev/null
+++ b/static/.style.css.swp
diff --git a/static/style.css b/static/style.css
index 3fa27d7..6832f44 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,14 +1,9 @@
 :root{
 	/* background */
-	--background: black;
-	--282828: #282828;
 	--3c3836: #3c3836;
 	--504945: #504945;
 	
 	/* font */
-	--url: #999;
-	--body: #AAA;
-	--heading-and-links: #91a5a8;
 	--8ec07c: #8ec07c;
 	--ebdbb2: #ebdbb2;
 	
@@ -24,6 +19,26 @@
 	--red: #fb4934;
 }
 
+@media (prefers-color-scheme: light) {
+	:root{
+		--background: white;
+		--body: black;
+		--url: grey;
+		--deeper: #DDD;
+		--heading-and-links: #316568;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	:root{
+		--background: black;
+		--body: #AAA;
+		--url: #999;
+		--deeper: #282828;
+		--heading-and-links: #91a5a8;
+	}
+}
+
 audio{
 	max-width:100%;
 	display:block;
@@ -102,7 +117,7 @@ h3,h4,h5,h6{
 	width:40%;
 	height:36px;
 	border:1px solid var(--504945);
-	background:var(--282828);
+	background:var(--deeper);
 	border-radius:2px;
 	margin-bottom:10px;
 	position:relative;
@@ -149,7 +164,7 @@ h3,h4,h5,h6{
 	top:35px;
 	left:-1px;
 	right:-1px;
-	background:var(--282828);
+	background:var(--deeper);
 	border:1px solid var(--url);
 	border-top:none;
 	border-radius:0 0 2px 2px;
@@ -404,7 +419,7 @@ h3,h4,h5,h6{
 
 .web .type{
 	border:1px solid var(--url);
-	background:var(--282828);
+	background:var(--deeper);
 	padding:0 4px;
 	border-radius:2px;
 	font-size:14px;
@@ -486,7 +501,7 @@ h3,h4,h5,h6{
 	display:none;
 	position:absolute;
 	top:25px;
-	background:var(--282828);
+	background:var(--deeper);
 	border:1px solid var(--504945);
 	border-radius:2px;
 	z-index:3;
@@ -544,7 +559,7 @@ h3,h4,h5,h6{
 	float:right;
 	width:160px;
 	height:90px;
-	background:var(--282828);
+	background:var(--deeper);
 	border:1px solid var(--504945);
 	margin-left:7px;
 }
@@ -733,7 +748,7 @@ table tr a:last-child{
 	margin:10px 0;
 	font-size:15px;
 	color:var(--url);
-	background:var(--282828);
+	background:var(--deeper);
 	border:1px dashed var(--504945);
 }
 
@@ -805,7 +820,7 @@ table tr a:last-child{
 }
 
 .web .wiki-head tr:nth-child(odd), .about table tr:nth-child(odd){
-	background:var(--282828);
+	background:var(--deeper);
 }
 
 .web .wiki-head .socials{
@@ -875,7 +890,7 @@ table tr a:last-child{
 .code-inline{
 	display:inline;
 	font-family:monospace;
-	background:var(--282828);
+	background:var(--deeper);
 	color:var(--heading-and-links);
 	border:1px solid var(--url);
 	padding:0 4px;
@@ -1042,7 +1057,7 @@ table tr a:last-child{
 	width:100%;
 	height:100%;
 	object-fit:contain;
-	background:var(--282828);
+	background:var(--deeper);
 }
 
 #popup-status{
@@ -1189,7 +1204,7 @@ table tr a:last-child{
 }
 
 .instances tbody tr:nth-child(even){
-	background:var(--282828);
+	background:var(--deeper);
 }
 
 .instances thead{
@@ -1268,7 +1283,7 @@ table tr a:last-child{
 
 .instances .popup{
 	border:1px solid var(--url);
-	background:var(--282828);
+	background:var(--deeper);
 	padding:7px 10px;
 	pointer-events:initial;
 }