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-20 15:19:24 +01:00
parent 2a9167cb7e
commit 96573664a6
95 changed files with 4130 additions and 2328 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,38 +1,38 @@
<!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>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://localhost:1313/favicon.ico">
<link rel="shortcut icon" href="https://nonsense.dymc.win/favicon.ico">
<link id="stylesheet" rel="stylesheet" href="/css/light.css">
<link rel="canonical" href="http://localhost:1313/vanilla-javascript-theme-toggle-for-simpletons/" />
<link rel="canonical" href="https://nonsense.dymc.win/vanilla-javascript-theme-toggle-for-simpletons/" />
<title>Vanilla javascript theme toggle for simpletons</title>
</head>
<body><header id="banner">
<nav class="navbar">
<div class="nav-left">
<a href="http://localhost:1313/" class="home">~ 🏠</a>
<a href="https://nonsense.dymc.win/" class="home">🏠</a>
<a
href="/info/"
title="--help"
>--help</a
title="👋"
>👋</a
><a
href="/search/"
title="🔎"
>🔎</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">
<h3>Vanilla javascript theme toggle for simpletons</h3>
<h2>Vanilla javascript theme toggle for simpletons</h2>
<div>
<time>June 26, 2023</time>
<p>June 26, 2023</p>
</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>
@ -112,12 +112,9 @@
</span></span></code></pre></div><p>Hope you&rsquo;ve enjoyed. Toggle toggle toggle!</p>
</article>
</main>
<footer id="footer">
<p>-----------------</p>
<footer id="footer">
<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>
made with <a href="https://gohugo.io">hugo</a>
</small>
<script src="/js/search.js"></script>