Skip to content
Extraits de code Groupes Projets
Vérifiée Valider 844a7625 rédigé par salixor's avatar salixor
Parcourir les fichiers

Rafraichissement du changeur de thème

parent 07419c6d
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
......@@ -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">
......
......@@ -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">
......
const setElementDisplay = (element, display) => {
element.style.display = display;
};
const toggleElementDisplay = (element) => {
setElementDisplay(
element,
element.style.display === "inline-block" ? "none" : "inline-block"
);
};
let lightDisplay, darkDisplay;
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 lightsoff = getCookie("lightsoff") === "on";
setElementDisplay(document.querySelector(".theme_toggle"), "inline-block");
if (lightsoff) toggleLights(switcher);
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();
};
......@@ -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; }
......
0% Chargement en cours ou .
You are about to add 0 people to the discussion. Proceed with caution.
Veuillez vous inscrire ou vous pour commenter