Toggle light and dark themes in Bootstrap - DEV

<div data-article-id="458402" id="article-body" readability="112.219948437"> In this article we will learn how we can easily toggle between light and dark theme. While <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" style="color: inherit; text-decoration: none;" name="readabilityLink-1">theming in Bootstrap</a><a href="#readabilityFootnoteLink-1" class="readability-DoNotFootnote" style="color: inherit;">[1]</a> can be done through it's built-in SASS variables, for this article we are going to use provided css stylesheets. <a href="https://bootswatch.com/" style="color: inherit; text-decoration: none;" name="readabilityLink-2">Bootswatch</a><a href="#readabilityFootnoteLink-2" class="readability-DoNotFootnote" style="color: inherit;">[2]</a> has some great themes, we're going to use it's <a href="https://bootswatch.com/cyborg/" style="color: inherit; text-decoration: none;" name="readabilityLink-3">Cyborg</a><a href="#readabilityFootnoteLink-3" class="readability-DoNotFootnote" style="color: inherit;">[3]</a> theme for darker variant. And for light, we are going to use Bootstrap's default theme. So, let's get started. <h2> <a name="create-project-folder-and-raw-indexhtml-endraw-file" href="#create-project-folder-and-raw-indexhtml-endraw-file" class="anchor"> </a> Create project folder and <code>index.html</code> file </h2> <div class="highlight" readability="7"><pre class="highlight shell"><code>mkdir toggle-bootstrap-theme cd toggle-bootstrap-theme </code></pre></div> Create the <code>index.html</code> file in it: <div class="highlight" readability="16"><pre class="highlight html"><code><!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />  <link id="dark-theme-style" rel="stylesheet" /> <title>Toggle Bootstrap Theme</title> </head> <body> <nav class="navbar navbar-transparent">  <a href="javascript:void()" class="btn btn-outline-info btn-lg ml-auto font-weight-bold" id="theme-toggler" onclick="toggleTheme()" ></a> </nav> <div class="container-fluid"> <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead"> This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. <hr class="my-4" /> It uses utility classes for typography and spacing to space content out within the larger container. <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div> </div>   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous" ></script>  <script src="index.js"></script> </body> </html> </code></pre></div> Notice these 2 snippet in above code: <h3> <a name="-raw-ltlinkgt-endraw-to-dynamically-load-stylesheet" href="#-raw-ltlinkgt-endraw-to-dynamically-load-stylesheet" class="anchor"> </a> <code><link></code> to dynamically load stylesheet </h3> <div class="highlight" readability="7"><pre class="highlight html"><code><link id="dark-theme-style" rel="stylesheet" /> </code></pre></div> Here, we will render dark theme stylesheet through JavaScript. Also note that we have kept this after our default stylesheet, so that if any rules is missing in dark one, it will be taken from default. <h3> <a name="-raw-ltagt-endraw-to-toggle-themes" href="#-raw-ltagt-endraw-to-toggle-themes" class="anchor"> </a> <code><a></code> to toggle themes </h3> <div class="highlight" readability="8"><pre class="highlight html"><code><a href="javascript:void()" class="btn btn-outline-info btn-lg ml-auto font-weight-bold" id="theme-toggler" onclick="toggleTheme()" ></a> </code></pre></div> This anchor tag will help user to toggle between light and dark theme. We are going to create function <code>toggleDark</code> in JavaScript. Let's see that. <h2> <a name="create-raw-indexjs-endraw-file" href="#create-raw-indexjs-endraw-file" class="anchor"> </a> Create <code>index.js</code> file </h2> <div class="highlight" readability="15"><pre class="highlight javascript"><code>// you can use app's unique identifier here const LOCALSTORAGEKEY = "toggle-bootstrap-theme"; const LOCALMETADATA = JSON.parse(localStorage.getItem(LOCALSTORAGEKEY)); // you can change this url as needed const DARKTHEMEPATH = "https://bootswatch.com/4/cyborg/bootstrap.min.css"; const DARKSTYLELINK = document.getElementById("dark-theme-style"); const THEMETOGGLER = document.getElementById("theme-toggler"); let isDark = LOCALMETADATA && LOCALMETADATA.isDark; // check if user has already selected dark theme earlier if (isDark) { enableDarkTheme(); } else { disableDarkTheme(); } /* Apart from toggling themes, this will also store user's theme preference in local storage. So when user visits next time, we can load the same theme. */ function toggleTheme() { isDark = !isDark; if (isDark) { enableDarkTheme(); } else { disableDarkTheme(); } const META = { isDark }; localStorage.setItem(LOCALSTORAGEKEY, JSON.stringify(META)); } function enableDarkTheme() { DARKSTYLELINK.setAttribute("href", DARKTHEMEPATH); THEMETOGGLER.innerHTML = "🌙 Dark"; } function disableDarkTheme() { DARKSTYLELINK.setAttribute("href", ""); THEMETOGGLER.innerHTML = "🌞 Light"; } </code></pre></div> I believe that above code is self-explanatory 😉 and no further explanation is required. <h2> <a name="output" href="#output" class="anchor"> </a> Output </h2> After successfully writing all of the above code, you can simply open <code>index.html</code> in browser to see the output: <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XqVp8zPN--/climit%2Cfauto%2Cflprogressive%2Cq66%2Cw880/https://dev-to-uploads.s3.amazonaws.com/i/wz02lai43ksyzymbfd5c.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XqVp8zPN--/climit%2Cfauto%2Cflprogressive%2Cq66%2Cw880/https://dev-to-uploads.s3.amazonaws.com/i/wz02lai43ksyzymbfd5c.gif" alt="Toggle Bootstrap Theme output" loading="lazy"/></a> <blockquote readability="8"> 👉 The http call to dark stylesheet is done only once per session. If user switches back to light theme and then again dark theme, it is loaded from cache. See the Network panel in browser devtools to see this. </blockquote> <h2> <a name="conclusion" href="#conclusion" class="anchor"> </a> Conclusion </h2> We learned how easily we can toggle between light and dark theme with just few lines of JavaScript code. If you're looking for a complete Bootstrap theme generation code base with support of sass, gulp, auto-refresh, etc. checkout my github repo: <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h3> Quickly generate and showcase your bootstrap theme. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md" data-path="README.md" readability="5.1806722689076"><article class="markdown-body entry-content container-lg" itemprop="text" readability="25.039915966387"><a target="blank" rel="noopener noreferrer" href="https://raw.githubusercontent.com/shhdharmen/bootstrap-theme-kit/master/./bootstrap-theme-kit.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WX5v6D7o--/climit%2Cfauto%2Cflprogressive%2Cqauto%2Cw880/https://raw.githubusercontent.com/shhdharmen/bootstrap-theme-kit/master/./bootstrap-theme-kit.png" alt="Bootstrap Theme Kit" loading="lazy"/></a> Quickly <g-emoji class="g-emoji" alias="zap" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/26a1.png">⚡</g-emoji> Generate and Showcase <g-emoji class="g-emoji" alias="dart" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f3af.png">🎯</g-emoji> your bootstrap theme <g-emoji class="g-emoji" alias="art" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f3a8.png">🎨</g-emoji>. <a href="https://raw.githubusercontent.com/shhdharmen/bootstrap-theme-kit/master/#getting-started" style="color: inherit; text-decoration: none;" name="readabilityLink-4">Get Started</a><a href="#readabilityFootnoteLink-4" class="readability-DoNotFootnote" style="color: inherit;">[4]</a> or <a href="https://shhdharmen.github.io/bootstrap-theme-kit/" rel="nofollow" style="color: inherit; text-decoration: none;" name="readabilityLink-5">See sample theme</a><a href="#readabilityFootnoteLink-5" class="readability-DoNotFootnote" style="color: inherit;">[5]</a>. <a href="https://github.com/shhdharmen/bootstrap-theme-kit/blob/master/LICENSE"><img src="https://camo.githubusercontent.com/2dfc2c6cd4f9cf7d3057dfb600f8d7edfcb27046/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f736868646861726d656e2f626f6f7473747261702d7468656d652d6b6974" alt="GitHub license" data-canonical-src="https://img.shields.io/github/license/shhdharmen/bootstrap-theme-kit"/></a> <a href="http://commitizen.github.io/cz-cli/" rel="nofollow"><img src="https://camo.githubusercontent.com/6080f52144977b8b2b20e42408379ce68371aafd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f6d6d6974697a656e2d667269656e646c792d627269676874677265656e2e737667" alt="Commitizen friendly" data-canonical-src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg"/></a> <h2> <g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji> Getting Started</h2> <h3> <g-emoji class="g-emoji" alias="ballotboxwithcheck" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2611.png">☑️</g-emoji> Minimum Requirements</h3> <div class="highlight highlight-source-shell" readability="7"><pre>node -v // v10.17.0 git --version // git version 2.x</pre></div> <h3> <g-emoji class="g-emoji" alias="arrowdown" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2b07.png">⬇️</g-emoji> Steps to Follow</h3> <ol> <li>First, fork this repo.</li> <li>Open terminal and:</li> </ol> <div class="highlight highlight-source-shell" readability="7"><pre>git clone <forked-repo-url> cd bootstrap-theme-kit npm i npm run init npm start</pre></div> <ol start="3"> <li>Browser will open at 3000 port.</li> <li>Start editing your scss/html files and browser will reload.</li> </ol> <h2> <g-emoji class="g-emoji" alias="trophy" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f3c6.png">🏆</g-emoji> Features</h2> </article></div> </div> </div> And yes, always believe in yourself... <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--T9EOwn32--/climit%2Cfauto%2Cflprogressive%2Cqauto%2Cw880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600329170083/uxl5sYNv0.jpeg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--T9EOwn32--/climit%2Cfauto%2Cflprogressive%2Cqauto%2Cw880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600329170083/uxl5sYNv0.jpeg" alt="silhouette of trees under starry night photo – Free Nature Image on Unsplash" loading="lazy"/></a> Photo by <a href="https://unsplash.com/@ngdunlap?utmsource=unsplash&utmmedium=referral&utmcontent=creditCopyText" style="color: inherit; text-decoration: none;" name="readabilityLink-6">Nick Dunlap</a> on <a href="https://unsplash.com/?utmsource=unsplash&utmmedium=referral&utmcontent=creditCopyText" style="color: inherit; text-decoration: none;" name="readabilityLink-7">Unsplash</a><a href="#readabilityFootnoteLink-6" class="readability-DoNotFootnote" style="color: inherit;">[6]</a><a href="#readabilityFootnoteLink-7" class="readability-DoNotFootnote" style="color: inherit;">[7]</a> </div><div id="readability-footnotes"><h3>References</h3><ol id="readability-footnotes-list"><li><a href="#readabilityLink-1" title="Jump to Link in Article">^</a> <a href="https://getbootstrap.com/docs/4.5/getting-started/theming/" name="readabilityFootnoteLink-1">theming in Bootstrap</a> (getbootstrap.com)</li><li><a href="#readabilityLink-2" title="Jump to Link in Article">^</a> <a href="https://bootswatch.com/" name="readabilityFootnoteLink-2">Bootswatch</a> (bootswatch.com)</li><li><a href="#readabilityLink-3" title="Jump to Link in Article">^</a> <a href="https://bootswatch.com/cyborg/" name="readabilityFootnoteLink-3">Cyborg</a> (bootswatch.com)</li><li><a href="#readabilityLink-4" title="Jump to Link in Article">^</a> <a href="https://raw.githubusercontent.com/shhdharmen/bootstrap-theme-kit/master/#getting-started" name="readabilityFootnoteLink-4">Get Started</a> (raw.githubusercontent.com)</li><li><a href="#readabilityLink-5" title="Jump to Link in Article">^</a> <a href="https://shhdharmen.github.io/bootstrap-theme-kit/" rel="nofollow" name="readabilityFootnoteLink-5">See sample theme</a> (shhdharmen.github.io)</li><li><a href="#readabilityLink-6" title="Jump to Link in Article">^</a> <a href="https://unsplash.com/@ngdunlap?utmsource=unsplash&utmmedium=referral&utmcontent=creditCopyText" name="readabilityFootnoteLink-6">Nick Dunlap</a> (unsplash.com)</li><li><a href="#readabilityLink-7" title="Jump to Link in Article">^</a> <a href="https://unsplash.com/?utmsource=unsplash&utmmedium=referral&utm_content=creditCopyText" name="readabilityFootnoteLink-7">Unsplash</a> (unsplash.com)</li></ol></div>

keywords bootstrap, css3, javascript, webdev, software, coding, development, engineering, inclusive, community

No Items Found.

Add Comment

Other Items in webdev

Hugo Font Awesome Icons [ Icons ] - CSS Bundle Daily Dev Tips CSS Background Patterns by MagicPattern GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes. GitHub - jonasstrehle/supercookie: ⚠️ Browser fingerprinting via favicon! URL-encoder for SVG Bootstrap Icons · Official open source SVG icon library for Bootstrap GitHub - kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer Toggle light and dark themes in Bootstrap - DEV Deploy your Publish website for free on GitHub Pages - DEV Bootstrap · The most popular HTML, CSS, and JS library in the world. GitHub - diegocard/awesome-html5: A curated list of awesome HTML5 resources Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked [ php ] - KruXoR openstreetmap.org 50 Developer tools to make your life a little easier https://www.mrlacey.com/2020/07/youve-only-added-two-lines-why-did-that.html?m=1 GitHub - ForEvolve/bootstrap-dark: Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark! Responsive Web Design Online Testing - isResponsive Trianglify.io · Low Poly Pattern Generator Grid.js - Advanced table plugin HEAD - A free guide to <head> elements Roots | Modern WordPress Development Tools A Local Dev Tool For Every Project | Lando new.css Synchronized responsive testing, development, inspection | Vanamco Gold Price Charts Widgets | GoldBroker.com Trianglify.io · Low Poly Pattern Generator Special tags that Google understands - Search Console Help 404 Error Page Codepen ScrollMagic ♥ Demo AOS - Animate on scroll library Font Awesome v4.7.0 - Icon Search Tool Carbon Offers — LowEndTalk Featherlight – The ultra slim jQuery lightbox. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs HEAD - A free guide to <head> elements API Blueprint | API Blueprint Filtering Data Client-Side: Comparing CSS, jQuery, and React | CSS-Tricks CSS Quickies: CSS Variables - Or how you create a 🌞white/🌑dark theme easily - DEV Community 👩‍💻👨‍💻 Responsive Slider Timeline Colormind - the AI powered color palette generator Get Waves – Create SVG waves for your next design Nuxt.js - The Vue.js Framework CodeSandbox: Online Code Editor Tailored for Web Application Development Hover.css - A collection of CSS3 powered hover effects Live.js - One script closer to Designing in the Browser Color this sofa! – SVG + Blend Mode trick You Might Not Need jQuery

Other Categories in Linx

ai apps articles cloud apps code coffee factorio games hardware health iphone lists minecraft music pi security stock images stock images tech vpn web dev web developer websites windows ai android api apps articles asp audio australia bio bitcoin blog books bootstrap career charts code editors codepens cooking css css animations daily linx data day trips design design elements drawing education emulators entrepreneur factorio fitness flowcharts fonts foobar2000 themes games hardware headphones health home automation html templates icons itunes javascript jquery js linux mac maps media mhx minecraft misc money motivation music network news nginx os osrs pantheon parenting phone phones php pi products programming radio random reading reddit rs3 runescape seo shopping sqlite stock images storage tax tech technology text formatting tools trains video video editor videos wallpapers weather web web design web development web sites webdev windows wine wordpress workout youtube

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Latest News

## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.

Toggle light and dark themes in Bootstrap - DEV

Add Comment

Other Items in webdev

Other Categories in Linx

Search Linx

Latest from Linx

Welcome

Random Quote

Latest News

Latest Articles

Code

Links

Quick Links

Quick Links

Sections