From a0167fa4e547176d575dff6eb5fd2e1860b0167f Mon Sep 17 00:00:00 2001
From: Marc Beninca <git@marc.beninca.link>
Date: Sun, 16 Feb 2025 20:03:30 +0100
Subject: [PATCH] theme/wip

---
 index.html      |  2 ++
 script/main.js  | 13 +++++++++++++
 style/light.css | 19 +++++++++++++++++--
 3 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 script/main.js
diff --git a/index.html b/index.html
index aa54d93..680f164 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
 <!---->
 <link rel="stylesheet" href="style/reset.css">
 <link rel="stylesheet" href="style/light.css">
+<script defer src="script/main.js"></script>
 
 </head>
 <body>
@@ -28,6 +29,7 @@
 <a href="https://www.openstreetmap.org/?query=Metropolitan%20France">France</a>
 </p>
 </div>
+<button id="theme"></button>
 </header>
 <section class="banner">
 <img class="big" src="img/vcf.svg" alt="VCF QR code.">
diff --git a/script/main.js b/script/main.js
new file mode 100644
index 0000000..4fb0993
--- /dev/null
+++ b/script/main.js
@@ -0,0 +1,13 @@
+const button = document.getElementById("theme");
+const classes = document.documentElement.classList;
+
+function refresh() {
+    button.innerHTML = classes.contains("dark")?"dark":"light";
+}
+
+button.addEventListener("click", () => {
+    classes.toggle("dark");
+    refresh();
+});
+
+refresh();
diff --git a/style/light.css b/style/light.css
index e1992c8..2c452ef 100644
--- a/style/light.css
+++ b/style/light.css
@@ -1,3 +1,16 @@
+:root {
+--banner-background: #ccf;
+--body-background: #fff;
+--body-text: #000;
+--header-background: #ccc;
+}
+.dark {
+--banner-background: #669;
+--body-background: #000;
+--body-text: #aaa;
+--header-background: #444;
+}
+
 @font-face {
     font-display: swap;
     font-family: "fa";
@@ -10,6 +23,8 @@ html {
 }
 
 body {
+    background-color: var(--body-background);
+    color: var(--body-text);
     margin-block-start: 1em;
     margin-inline: auto;
     max-inline-size: 99ch;
@@ -30,7 +45,7 @@ header {
     padding-inline: .5em;
 }
 header.org {
-    background-color: #ccc;
+    background-color: var(--header-background);
 }
 
 article header {
@@ -58,7 +73,7 @@ h1, h2, h3 {
     border-radius: .25em;
 }
 h2 {
-    background-color: #ccf;
+    background-color: var(--banner-background);
     margin-block: .25em;
     padding-block: .5em;
     text-align: center;
