item/css

in/en/index.html

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

in/fr/index.html

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

in/script/main.js

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

in/style/main.css

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