diff options
Diffstat (limited to 'build/quick-dirty-theme-switcher')
| -rw-r--r-- | build/quick-dirty-theme-switcher/index.html | 106 |
1 files changed, 62 insertions, 44 deletions
diff --git a/build/quick-dirty-theme-switcher/index.html b/build/quick-dirty-theme-switcher/index.html index f5ef834..818cecb 100644 --- a/build/quick-dirty-theme-switcher/index.html +++ b/build/quick-dirty-theme-switcher/index.html @@ -1,42 +1,52 @@ <!doctype html> -<html lang="en" id="top"> +<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="data:,"> <title>Quick and Dirty Theme Switcher</title> - <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> - <a href="#menu">Menu ↓</a> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Quick and Dirty Theme Switcher</h1> +<h1 id="quick-and-dirty-theme-switcher">Quick and Dirty Theme Switcher</h1> + <p>2020-06-04</p> -<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I'm keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> -<hr /> -<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites/projects, I figured I'd write up a quick post explaining how to do so. Let's get into it.</p> -<p><figure> - <img src="/public/images/site-color-schemes.gif" alt="Theme color scheme switcher"> - <figcaption>My website color scheme switcher in action (<a href="/public/images/site-color-schemes.gif">direct link to image</a>)</figcaption> -</figure> </p> -<h2>The HTML</h2> -<p>First we need to include the &#8220;buttons&#8221; that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> -<pre><code><div class="color-select"> - <button onclick="toggleDefaultTheme()"></button> - <button onclick="toggleSecondTheme()"></button> - <button onclick="toggleThirdTheme()"></button> -</div> + +<p><strong>Update</strong>: This article is no longer relevant since my blog design has changed. I’m keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site.</p> + +<hr/> + +<p><em>I recently added a fairly straightforward color scheme (theme) switcher</em> to my personal website. You can toggle this simple color switcher in the footer of the site to see it in action. In case anyone else had the desire to add such functionality to their own sites/projects, I figured I’d write up a quick post explaining how to do so. Let’s get into it.</p> + +<h2 id="the-html">The HTML</h2> + +<p>First we need to include the “buttons” that will trigger the theme to switch based on which one is selected. (Note: you could always render these as <code>options</code> in a <code>select</code> element if you preferred that method)</p> + +<pre><code><div class="color-select"> + <button onclick="toggleDefaultTheme()"></button> + <button onclick="toggleSecondTheme()"></button> + <button onclick="toggleThirdTheme()"></button> +</div> </code></pre> -<p>That's it! Don't worry too much about the <code>onclick</code> parameter right now, we'll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> -<pre><code><html class="theme-default"> + +<p>That’s it! Don’t worry too much about the <code>onclick</code> parameter right now, we’ll come back to that when adding our JavaScript. The only remaining item is adding a default theme class to our <code>html</code> element, like so:</p> + +<pre><code><html class="theme-default"> </code></pre> -<h2>The CSS</h2> + +<h2 id="the-css">The CSS</h2> + <p>Next we need to style both the <code>color-select</code> buttons, along with the custom color schemes that will alter the entire website. We will start with the color schemes.</p> + <p>For these themes to swap seamlessly between each other, we will be setting our altering color sets as CSS variables:</p> + <pre><code>.theme-default { --accent-color: #72f1b8; --font-color: #34294f; @@ -57,7 +67,9 @@ body { color: var(--font-color); } </code></pre> + <p>Finally, we style the user-facing color swatches:</p> + <pre><code>.color-select button { -moz-appearance: none; appearance: none; @@ -70,52 +82,58 @@ body { width: 20px; } -/* Style each swatch to match the corresponding theme */ +/* Style each swatch to match the corresponding theme */ .color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; } .color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; } .color-select button:nth-child(3) { background: #d9455f; border-color: #303960; } </code></pre> -<h2>The JavaScript</h2> -<p>We need to have each color swatch button trigger it's corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> -<pre><code>// Set a given theme/color-scheme + +<h2 id="the-javascript">The JavaScript</h2> + +<p>We need to have each color swatch button trigger it’s corresponding theme and swap out the <code>theme-default</code> class that we have originally attached to the main <code>html</code> element. We also need to store what the user has selected into <code>localStorage</code>, so their choice persists when reloading or navigating to other pages.</p> + +<pre><code>// Set a given theme/color-scheme function setTheme(themeName) { - localStorage.setItem('theme', themeName); + localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } -// Toggle between color themes +// Toggle between color themes function toggleDefaultTheme() { - if (localStorage.getItem('theme') !== 'theme-default'){ - setTheme('theme-default'); + if (localStorage.getItem('theme') !== 'theme-default'){ + setTheme('theme-default'); } } function toggleSecondTheme() { - if (localStorage.getItem('theme') !== 'theme-second'){ - setTheme('theme-second'); + if (localStorage.getItem('theme') !== 'theme-second'){ + setTheme('theme-second'); } } function toggleThirdTheme() { - if (localStorage.getItem('theme') !== 'theme-third'){ - setTheme('theme-third'); + if (localStorage.getItem('theme') !== 'theme-third'){ + setTheme('theme-third'); } } -// Immediately set the theme on initial load +// Immediately set the theme on initial load (function () { - if (localStorage.getItem('theme') === 'theme-default') { - setTheme('theme-default'); + if (localStorage.getItem('theme') === 'theme-default') { + setTheme('theme-default'); } - if (localStorage.getItem('theme') === 'theme-second') { - setTheme('theme-second'); + if (localStorage.getItem('theme') === 'theme-second') { + setTheme('theme-second'); } - if (localStorage.getItem('theme') === 'theme-third') { - setTheme('theme-third'); + if (localStorage.getItem('theme') === 'theme-third') { + setTheme('theme-third'); } })(); </code></pre> -<p>And that's it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> -<h2>Extra Improvements</h2> -<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project/site might need better fallbacks.</p> + +<p>And that’s it! Now it just depends on how custom you want each individual theme style to be. The possibilities are endless!</p> + +<h2 id="extra-improvements">Extra Improvements</h2> + +<p>You could improve this concept even further hiding the <code>color-select</code> item if the user has JavaScript disabled. For my needs, I felt it was a fine trade-off to keep the non-functioning color swatch pickers if JavaScript was disabled. However, your project/site might need better fallbacks.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> <ul id="menu"> |