in/en/index.html

@@ -31,9 +31,8 @@
 <a href="https://en.wikipedia.org/wiki/France">France</a>
 </p>
 </div>
-<button class="link" id="link"><img class="inline" src="../img/link.svg" alt="Links"></button>
-<button class="item" id="item"><ul><li></li></ul></button>
 <button id="theme"><img class="inline" src="../img/theme.svg" alt="Theme"></button>
+<button class="link" id="link"><img class="inline" src="../img/link.svg" alt="Links"></button>
 </header>
 
 <section class="banner">

in/fr/index.html

@@ -31,9 +31,8 @@
 
 </p>
 </div>
-<button class="link" id="link"><img class="inline" src="../img/link.svg" alt="Liens"></button>
-<button class="item" id="item"><ul><li></li></ul></button>
 <button id="theme"><img class="inline" src="../img/theme.svg" alt="Thème"></button>
+<button class="link" id="link"><img class="inline" src="../img/link.svg" alt="Liens"></button>
 </header>
 
 <section class="banner">

in/script/main.js

@@ -1,4 +1,6 @@
-const buttons = ["item", "link", "swap"];
+const buttons = ["link", "swap"];
+
+// toggle buttons
 
 for (let button of buttons) {
     document.getElementById(button).addEventListener("click", () => {
@@ -6,32 +8,35 @@ for (let button of buttons) {
     });
 }
 
-let theme
+// theme
+
+const button = document.getElementById("theme");
 
 function theme_get() {
-    theme = localStorage.getItem("theme");
-    if (! theme) {
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            theme = "dark";
-        } else {
-            theme = "light";
+    return document.documentElement.getAttribute("data-theme");
+}
+function theme_load() {
+    const theme = localStorage.getItem("theme");
+    if (theme) {
+        theme_set(theme);
     }
 }
-    theme_set()
-}
-
-function theme_set() {
+function theme_set(theme) {
     document.documentElement.setAttribute("data-theme", theme);
+    theme_write(theme);
+}
+function theme_swap(theme) {
+    return theme === "dark" ? "light" : "dark";
+}
+function theme_toggle() {
+    theme_set(theme_swap(theme_get()));
+}
+function theme_write(theme) {
     localStorage.setItem("theme", theme);
 }
 
-function theme_swap() {
-    theme = theme === "light" ? "dark" : "light";
-    theme_set();
-}
-
-document.getElementById("theme").addEventListener("click", () => {
-    theme_swap();
+button.addEventListener("click", () => {
+    theme_toggle();
 });
 
-theme_get()
+theme_load();

in/style/main.css

@@ -54,7 +54,7 @@
 
 /* main */
 
-#item, #link, #swap, #theme {
+#link, #theme, #swap {
     background-color: var(--button-background);
 }
 #swap::after { content: "←"; }
@@ -107,10 +107,6 @@ a:hover {
     color: var(--anchor-text);
 }
 
-body.item button.item {
-    background: var(--item-odd-gradient);
-}
-
 article.org, header {
     border-radius: .25em;
     padding-block: .25em;
@@ -202,10 +198,10 @@ img.photo {
     border-top: var(--border-on);
 }
 
-body.item li:nth-of-type(even) {
+li:nth-of-type(even) {
     background: var(--item-even-gradient);
 }
-body.item li:nth-of-type(odd) {
+li:nth-of-type(odd) {
     background: var(--item-odd-gradient);
 }