EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update theme toggle mechanism

Browse source
This commit is contained in:
kritzl 2025-03-03 16:40:30 +01:00
commit 246417a553
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
15 changed files with 425 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

31
styleguide/index.html
View file

@ -2,6 +2,17 @@
<html lang="en">
<head>
<script>
const setTheme = (theme) => {
theme ??= localStorage.theme || "system";
document.getElementById("themeLight").checked = theme === "light";
document.getElementById("themeDark").checked = theme === "dark";
localStorage.theme = theme;
};
document.addEventListener("DOMContentLoaded", function () {
setTheme();
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
@ -13,10 +24,10 @@
<a href="/" id="backToWiki">
<img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink."/>
<img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink."/>
</a>
</header>
<div>
@ -32,10 +43,18 @@
<li><a href="glow"><i data-icon="info"></i>Glow</a></li>
<li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
<li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
data-icon="light" class="glow"></i></a></li>
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
data-icon="light" class="glow"></i></a></li>
<li id="themeToggleDark" class="themeToggle">
<input id="themeDark" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeDark">
<i data-icon="light"></i>
</label>
</li>
<li id="themeToggleLight" class="themeToggle">
<input id="themeLight" type="checkbox" aria-label="Switch between dark and light mode">
<label for="themeLight">
<i data-icon="light"></i>
</label>
</li>
</ul>
</nav>
<main>