diff --git a/index.html b/index.html
index aa54d93..680f164 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
@@ -28,6 +29,7 @@
France
+
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;