echo/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site: add dark/light theme toggle (system-pref default, persisted, no-flash) via data-theme; dark palette + github-dark code blocks

Browse source
This commit is contained in:
Jean Chevronnet 2026-08-30 23:17:29 +00:00
parent 147db49f99
commit 71f2f6efcb
No known key found for this signature in database
GPG key ID: 439666D63A9477E4
4 changed files with 44 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

7
templates/base.html
View file

@ -3,6 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<script>(function(){try{var t=localStorage.getItem('theme');if(t!=='light'&&t!=='dark')t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<title>{% block title %}echoIRCd — a from-scratch IRC server in Rust{% endblock %}</title>
<meta name="description" content="echoIRCd is a modern IRC daemon written from scratch in Rust — full IRCv3, modern TLS, SASL. Pairs with echo services, a separate package linked over S2S.">
<meta property="og:title" content="echoIRCd">
@ -34,6 +36,10 @@
<a href="/docs"{% if active == "docs" %} class="on"{% endif %}>Docs</a>
<a href="https://orbit.devtronic.pro">Web&nbsp;client</a>
<a href="https://git.devtronic.pro/echo/echoIRCd" class="ext">Source&#8599;</a>
<button class="theme-toggle" type="button" onclick="toggleTheme()" aria-label="Toggle dark mode" title="Toggle light / dark">
<svg class="ic-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
<svg class="ic-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
</button>
</nav>
</div>
</header>
@ -61,6 +67,7 @@
</nav>
</div>
</footer>
<script>function toggleTheme(){var d=document.documentElement,n=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',n);try{localStorage.setItem('theme',n);}catch(e){}}</script>
{% block scripts %}{% endblock %}
</body>
</html>