HTML document, ASCII text, with very long lines (2691)
1
<!DOCTYPE html>
2
<html lang="en-us" prefix="og: https://ogp.me/ns#">
3
<head>
5
6
<meta charset="UTF-8" />
8
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
<title>Creating a simple theme switcher - S0G</title>
10
<link rel="stylesheet" href="/src/global.css" />
11
<meta property="og:locale" content="en_US"/>
12
<meta property="og:site_name" content="Steve0Greatness' Site"/>
13
14
<link rel="stylesheet" href="/src/pygments-friendly.css" />
15
<link rel="stylesheet" href="/src/blog.css" />
16
<link rel="alternate" href="/blog/creating_a_theme_switch.txt" type="text/plain" title="Post source" />
17
<meta property="og:title" content="Creating a simple theme switcher" />
18
<meta property="og:url" content="https://steve0greatness.github.io/blog/creating_a_theme_switch.html" />
19
</head>
21
<body>
23
<header>
24
<h2><a href="/">Steve0Greatness</a></h2>
25
<nav>
26
<a href="/blog">Blog</a>
27
<a href="/link-tree.html">Link Tree</a>
28
</nav>
29
</header>
30
31
<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb">
32
<li>
33
<a href="/">Index</a>
34
</li>
35
36
<li >
37
<a href="/blog">
38
Blog Index
39
</a>
40
</li>
41
42
<li aria-current="location">
43
44
Creating a simple theme switcher
45
46
</li>
47
48
</ol>
49
<main>
50
<article>
51
<header>
52
<h2 id="blog-post-titled">Creating a simple theme switcher</h2>
53
<div role="toolbar" class="toolbar">
54
<a href="https://toot.kytta.dev/?text=Take a look at this article by @S0G@mastodon.social: https://steve0greatness.github.io/blog/creating_a_theme_switch.html" title="Share to Mastodon">
55
<img src="/toot-kytta-dev-icon.svg" width="16" height="16" aria-hidden="true" title="Share to Mastodon" />
56
</a>
57
<a href="/blog/creating_a_theme_switch.html" title="Direct link">
58
<span aria-hidden="true">
59
🔗
60
</span>
61
</a>
62
<a href="/blog/creating_a_theme_switch.txt" title="Markdown source">
63
<img src="/md-src.svg" width="16" height="16" aria-hidden="true" />
64
</a>
65
</div>
66
<time>2021 Dec 08</time>
67
</header>
68
<p>This is a simple tutorial on how to make a simple theme switcher.<h1 id="step1">Step 1: Creating the themes</h1><p>The first step is to create the themes in your stylesheet, you can have as many as you want. Just make sure to remeber all their names within your CSS.</p><h1 id="step2">Step 2: Making an array</h1><p>This is why you need to remeber all their names within the CSS. You need to add them all to an array in your JS. Below is an example of an array containing some themes.</p><div class="code">const themes = ["light", "dark", "gamer"]</div><h1 id="step3">Step 3: Switching themes</h1><p>This is the part you've been waiting for! The actual content switcher. It's surprisingly simple.</p><p>First, get the index of the current theme using <span class="code">let currentTheme = themes.indexOf(document.documentElement.className)</span>. Then, use an if statement to see if it's more than or equal to the length of the array containing your themes.</p><div class="code">if (currentTheme + 1 >= themes.length) {<div style="margin-left:1em">document.documentElement.className = themes[0]</div>} else {<div style="margin-left:1em">document.documentElement.className = themes[currentTheme + 1]</div>}</div>Now just add a listener to the button(using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">getElement.onclick</a>, or <a href="https://www.w3schools.com/TAgs/att_onclick.asp">onclick</a>)<h1 id="finished">Final Product</h1>In the end, what you just made should look something like the iFrame below.<br><iframe id="finalProduct" srcdoc='<!doctype html><html class="light"><head><style>html.light {background: #fff;color: #000;--buttonBackground: #fefefe;--buttonBorder: #ccc;--buttonColor: #001;}html.dark {background: #000;color: #fff;--buttonBackground: #101010;--buttonBorder: #333;--buttonColor: #fff;}html.gamer {background: #f00;color: #00f;--buttonBackground: #050;--buttonBorder: #0a0;--buttonColor: #0f0;}button {background: var(--buttonBackground);border: var(--buttonBorder) solid 3px;color: var(--buttonColor);}</style></head><body><button id="themeSwitch">Switch Theme</button><br>This is epic!<script type="application/javascript">const themes = ["light", "dark", "gamer"];document.getElementById("themeSwitch").onclick = () => {let curTheme = themes.indexOf(document.documentElement.className);if (curTheme + 1 >= themes.length) {document.documentElement.className = themes[0]} else {document.documentElement.className = themes[curTheme + 1]}}</script></body></html>' style="border:none"></iframe></p>
69
</article>
71
</main>
72
<footer role="group">
73
<div class="footer-link-list-holder">
74
<span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
75
<ol class="footer-link-list" aria-labelledby="footer-label-site-details">
76
<li><a href="https://github.com/Steve0Greatness/steve0greatness.github.io">Github Repository</a></li>
77
<li><a href="https://steve0greatness.github.io/extras">Extras Archive</a></li>
78
</ol>
79
</div>
80
<div class="footer-link-list-holder">
81
<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
82
<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
83
<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
84
<li><a href="https://youtube.com/@s0g">YouTube</a></li>
85
<li><a href="/link-tree.html">More...</a></li>
86
</ol>
87
</div>
88
</footer>
89
</body>
90
</html>