From 844a7625a84ca8ff690a2e4134830fdf11dd4a78 Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Fri, 28 Jun 2024 01:34:17 +0200
Subject: [PATCH] =?UTF-8?q?Rafraichissement=20du=20changeur=20de=20th?=
=?UTF-8?q?=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
cours-ensiie.html | 13 ++++---------
index.html | 13 ++++---------
lightsoff.js | 49 ++++++++++++++++++++++++++++++++++-------------
styles.css | 33 ++++++++++++++-----------------
4 files changed, 58 insertions(+), 50 deletions(-)
diff --git a/cours-ensiie.html b/cours-ensiie.html
index baeaa8f..f89759d 100644
--- a/cours-ensiie.html
+++ b/cours-ensiie.html
@@ -30,15 +30,10 @@
<div class="description">Au fond, je suis un peu un weeb.</div>
</a>
- <div class="floating_links">
- <button
- type="button" class="theme_toggle"
- onclick="toggleLights(this)"
- data-dark="⚬"
- data-light="☀"
- title="Changer de thème"
- >{LIGHT SWITCHER}</button>
- </div>
+ <button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
+ <svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
+ <svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
+ </button>
</header>
<section class="header_links">
diff --git a/index.html b/index.html
index 68192a6..fb0a565 100644
--- a/index.html
+++ b/index.html
@@ -30,15 +30,10 @@
<div class="description">Au fond, je suis un peu un weeb.</div>
</a>
- <div class="floating_links">
- <button
- type="button" class="theme_toggle"
- onclick="toggleLights(this)"
- data-dark="⚬"
- data-light="☀"
- title="Changer de thème"
- >{LIGHT SWITCHER}</button>
- </div>
+ <button type="button" class="theme_toggle" onclick="toggleLights(this)" title="Changer de thème">
+ <svg id="theme-toggle-light" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">☀</text></svg>
+ <svg id="theme-toggle-dark" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="7" y="32">⚬</text></svg>
+ </button>
</header>
<section class="header_links">
diff --git a/lightsoff.js b/lightsoff.js
index 1d3e09d..8c6ec62 100644
--- a/lightsoff.js
+++ b/lightsoff.js
@@ -1,17 +1,40 @@
-document.addEventListener("DOMContentLoaded", function() {
- let lightsoff = getCookie("lightsoff") === "on";
- let switcher = document.getElementsByClassName("theme_toggle")[0];
- switcher.style.display = "inline-block";
- switcher.innerHTML = lightsoff ? switcher.dataset.light : switcher.dataset.dark;
+const setElementDisplay = (element, display) => {
+ element.style.display = display;
+};
- if (lightsoff) toggleLights(switcher);
+const toggleElementDisplay = (element) => {
+ setElementDisplay(
+ element,
+ element.style.display === "inline-block" ? "none" : "inline-block"
+ );
+};
+
+let lightDisplay, darkDisplay;
+
+document.addEventListener("DOMContentLoaded", function () {
+ const lightsoff = getCookie("lightsoff") === "on";
+
+ setElementDisplay(document.querySelector(".theme_toggle"), "inline-block");
+
+ lightDisplay = document.querySelector("#theme-toggle-light");
+ darkDisplay = document.querySelector("#theme-toggle-dark");
+
+ setElementDisplay(lightDisplay, lightsoff ? "inline-block" : "none");
+ setElementDisplay(darkDisplay, !lightsoff ? "inline-block" : "none");
+
+ if (lightsoff) updateTheme();
});
-function toggleLights(switcher) {
- let html_tag = document.getElementsByTagName("html")[0];
- let is_dark = (html_tag.className === "");
+const updateTheme = () => {
+ const htmlTag = document.querySelector("html");
+ htmlTag.classList.toggle("dark");
+
+ const isLightsOff = htmlTag.classList.contains("dark") ? "on" : "off";
+ setCookie("lightsoff", isLightsOff, 365);
+};
- html_tag.className = is_dark ? "dark" : "";
- switcher.innerHTML = is_dark ? switcher.dataset.light : switcher.dataset.dark;
- setCookie("lightsoff", is_dark ? "on" : "off", 365);
-}
+const toggleLights = () => {
+ toggleElementDisplay(lightDisplay);
+ toggleElementDisplay(darkDisplay);
+ updateTheme();
+};
diff --git a/styles.css b/styles.css
index f0b7ecf..db1846a 100644
--- a/styles.css
+++ b/styles.css
@@ -192,30 +192,28 @@ section.cours a::after {
/* Styles used for the header of the page */
-div.floating_links {
- float: right;
- margin: 10px 15px 0 0;
-}
-
button.theme_toggle {
- display: block;
+ background: none;
+ position: absolute;
+ top: 0;
+ padding: 15px 0 3px 0;
+ right: 15px;
cursor: pointer;
outline: none;
border: none;
- border-radius: 5px;
- padding: 5px 8px;
- color: #ffffff;
- font-size: 8px;
- text-transform: uppercase;
- width: 100%;
text-align: center;
- line-height: 30px;
+ line-height: 24px;
font-size: 30px;
+ display: none;
+ border-radius: 0 0 30px 30px;
+ border: 2px dashed transparent;
+ border-top: none;
}
-button.theme_toggle { background-color: #333333; display: none; margin-bottom: 5px; }
-button.theme_toggle:hover { background-color: #505050; }
-
+button.theme_toggle { color: #000; background-color: #e6e6e6; }
+button.theme_toggle:hover { color: #252850; border-color: #252850; }
+html.dark button.theme_toggle { color: #fff; background-color: #222; }
+html.dark button.theme_toggle:hover { color: orange; border-color: orange; }
/* Files list */
@@ -286,9 +284,6 @@ html.dark, html.dark body {
color: #ffffff;
}
-html.dark button.theme_toggle { background-color: #FFFFFF; color: #333333; }
-html.dark button.theme_toggle:hover { background-color: #DEDEDE; color: #333333; }
-
html.dark a { color: #ccc; }
html.dark a:hover { color: #999; }
html.dark a:active { color: #bbb; }
--
GitLab