james/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.

Browse source
This commit is contained in:
ryfrd 2025-08-14 15:16:21 +01:00
parent c4dcb6e38b
commit 531029a18f
129 changed files with 7765 additions and 6938 deletions
Download patch file Download diff file Expand all files Collapse all files

66
public/vanilla-javascript-theme-toggle-for-simpletons/index.html
View file

@ -1,33 +1,40 @@
<!DOCTYPE html>
<html lang="en"><head>
<!doctype html>
<html lang="en"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://nonsense.dymc.win/favicon.ico">
<link rel="stylesheet" href="/css/style.min.css">
<link rel="shortcut icon" href="http://localhost:1313/favicon.ico">
<link id="stylesheet" rel="stylesheet" href="/css/light.css">
<link rel="canonical" href="https://nonsense.dymc.win/vanilla-javascript-theme-toggle-for-simpletons/" />
<title>vanilla javascript theme toggle for simpletons</title>
<link rel="canonical" href="http://localhost:1313/vanilla-javascript-theme-toggle-for-simpletons/" />
<title>Vanilla javascript theme toggle for simpletons</title>
</head>
<body><header id="banner">
<h2><a href="https://nonsense.dymc.win/">James&#39; Blog :-)</a></h2>
<nav>
<ul>
<li>
<a href="/info/" title="--help">--help</a>
</li>
</ul>
</nav>
<nav class="navbar">
<div class="nav-left">
<a href="http://localhost:1313/" class="home">~ 🏠</a>
<a
href="/info/"
title="--help"
>--help</a
>
</div>
<div class="nav-right">
<button id="toggle-button" class="toggle-button" onclick="toggleTheme()">🌚</button>
</div>
</nav>
</header>
<main id="content">
<article>
<header id="post-header">
<h1>vanilla javascript theme toggle for simpletons</h1>
<div>
<time>June 26, 2023</time>
</div>
</header><p>Sometimes when I&rsquo;m trawling the internet and happen upon a particularly nice looking website, I develop css and javascript FOMO. The thing I&rsquo;ve been lusting after above all else is one of those fancy little dark theme toggle buttons. As you can probably tell from the website you&rsquo;re looking at my web dev skills are limited. As a result of this I had assumed such niceties were out of reach.</p>
<header id="post-header">
<h3>Vanilla javascript theme toggle for simpletons</h3>
<div>
<time>June 26, 2023</time>
</div>
</header><p>Sometimes when I&rsquo;m trawling the internet and happen upon a particularly nice looking website, I develop css and javascript FOMO. The thing I&rsquo;ve been lusting after above all else is one of those fancy little dark theme toggle buttons. As you can probably tell from the website you&rsquo;re looking at my web dev skills are limited. As a result of this I had assumed such niceties were out of reach.</p>
<p>Last week though I decided it was time for this to change! I would do a teeny bit of javascript. I could have nice things. This is a rundown of the very simple implementation I came up with.</p>
<h3 id="html">HTML</h3>
<p>First things first, we&rsquo;ll need a button for users to click. This can be plopped wherever you want on your site.</p>
@ -104,9 +111,18 @@
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/toggle.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>Hope you&rsquo;ve enjoyed. Toggle toggle toggle!</p>
</article>
</main><footer id="footer">
<p>made with <a href="https://gohugo.io">hugo</a> and my bastardised version of <a href="https://github.com/LukasJoswiak/etch">this nice theme</a></p>
</main>
<footer id="footer">
<p>-----------------</p>
<small>
made with <a href="https://gohugo.io">hugo</a> and my bastardised version of
<a href="https://github.com/LukasJoswiak/etch">this nice theme</a>
</small>
<script src="/js/search.js"></script>
<script src="/js/toggle.js"></script>
</footer>
</body>
</body>
</html>