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

.

Browse source
This commit is contained in:
ryfrd 2026-03-18 20:32:25 +00:00
parent 6623ee03f6
commit 44c8324063
120 changed files with 22842 additions and 4673 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,40 +1,43 @@
<!doctype html>
<html lang="en"><head>
<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 id="stylesheet" rel="stylesheet" href="/css/light.css">
<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="canonical" href="http://localhost:1313/vanilla-javascript-theme-toggle-for-simpletons/" />
<title>Vanilla javascript theme toggle for simpletons - James&#39; Blog</title>
<link rel="canonical" href="https://nonsense.dymc.win/vanilla-javascript-theme-toggle-for-simpletons/" />
<title>Vanilla javascript theme toggle for simpletons</title>
<link rel="stylesheet" href="/css/style.css">
<script>
document.documentElement.setAttribute('data-theme', 'dark');
</script>
</head>
<body><header id="banner">
<nav class="navbar">
<body><header class="site-header">
<nav>
<a href="http://localhost:1313/" class="home">~</a>
<div class="nav-links">
<a href="https://nonsense.dymc.win/" class="home">🏠</a>
<a
href="/info/"
title="👋"
>👋</a
><a
href="/search/"
title="🔎"
>🔎</a
>
<button id="toggle-button" class="toggle-button" onclick="toggleTheme()">🌚</button>
<a href="/search">/</a>
</div>
</nav>
</header>
<main id="content">
<article>
<header id="post-header">
<h2>Vanilla javascript theme toggle for simpletons</h2>
<div>
<p>June 26, 2023</p>
<article class="post">
<header>
<h1>Vanilla javascript theme toggle for simpletons</h1>
<time>Jun 26, 2023</time>
<div class="tags">
<a href="/tags/javascript">javascript</a>
<a href="/tags/css">css</a>
</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>
<div class="content">
<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>
@ -110,16 +113,16 @@
</span></span></code></pre></div><p>Finally, don&rsquo;t forget to add your javascript to your html somewhere.</p>
<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">
<small>
made with <a href="https://gohugo.io">hugo</a>
</small>
<script src="/js/search.js"></script>
<script src="/js/toggle.js"></script>
</footer>
</body>
</div>
</article>
</main><footer class="site-footer">
<small>
<a href="/index.xml">RSS</a>
·
<a href="https://gohugo.io">Hugo</a>
</small>
<script src="/js/script.js"></script>
</footer>
</body>
</html>