Dark/light website theming with CSS variables
Tags: css, javascript
Published: 2020-06-06 06:15:02

<!-- wp:paragraph -->
<p>Nowadays, while developing a website or web application, You need to take care of the theming of the website. You need to think about how easily theming can be manageable with minimum CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, for your help, we have <a rel="noreferrer noopener" href="https://www.techboxweb.com/thoughts-on-css-variables/" target="_blank">CSS variables</a>. CSS variables are custom properties, which can be defined once and reused a number of time</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>body {
--main-color: black;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>in above example we defined --main-color as a custom variable which can be used anywhere</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>like below</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>.container {
background-color: var(--main-color)
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Note</strong>: CSS variables should be defined at global level to use inside child elements and for more info please go through <a rel="noreferrer noopener" href="https://www.techboxweb.com/thoughts-on-css-variables/" target="_blank">this post</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":549,"sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://techboxweb.com/wp-content/uploads/2020/05/css-variables.gif" alt="" class="wp-image-549"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>we will be building day and night mode theme switcher application using CSS variables and vanilla javascript</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to access code you can check out github repository and also see demo live</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://github.com/nitinhepat/theme-switcher" target="_blank" rel="noreferrer noopener"><strong><span class="has-inline-color has-very-light-gray-color">Github repo</span></strong></a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link" href="https://js-ae6qcz.stackblitz.io/" target="_blank" rel="noreferrer noopener"><strong><span class="has-inline-color has-very-light-gray-color">Demo</span></strong></a></div>
<!-- /wp:button --></div>


<!-- wp:paragraph -->
<p>Let's get started</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creating a theme.css file</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Always remember theming css should not mixed with other css, so keep it seperately</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
body {
    margin: 0;
    padding: 0;
}

.dark {
    --bgColor: #161625;
    --color: white;
    --headerBg: #161625;
}

.light {
    --bgColor: white;
    --color: black;
    --headerBg: #E8E8E8;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>we have created a simple configuration for dark theme and light theme where we defined background color, font color, and header background.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we have created a basic application where we just changing the color scheme for header, body background, and font color. For advanced you can manage the number of things.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creating A User Interface</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HTML file</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;!DOCTYPE html>

&lt;head>
    &lt;link rel="stylesheet" href="./theme.css" />
    &lt;link rel="stylesheet" href="./style.css" />
    &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
&lt;/head>

&lt;body id="body-container" class="light">
    &lt;header>
        &lt;nav class="header-container">
            &lt;div class="logo-section">
                &lt;span class="logo">Logo&lt;/span>
            &lt;/div>
            &lt;nav class="menu-section">
                &lt;ul class="header">
                   
                    &lt;li>
                        &lt;i class="fa fa-home" aria-hidden="true">&lt;/i>
                        home
                    &lt;/li>
                    &lt;li>
                        &lt;i class="fa fa-user" aria-hidden="true">&lt;/i>
                        about us
                    &lt;/li>
                    &lt;li>
                        &lt;i class="fa fa-id-card">&lt;/i>
                        contact us
                    &lt;/li>
                    &lt;li>
                        &lt;i id="theme-action" class="fa fa-moon-o" aria-hidden="true">&lt;/i>&lt;/li>
                &lt;/ul>
            &lt;/nav>
        &lt;/nav>
    &lt;/header>
    &lt;main class="main-container">
        &lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/1.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>
        &lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/2.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/3.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/4.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/5.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/5.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/3.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>&lt;div class="grid">
            &lt;div class="img-section">
                &lt;img src="assets/4.jpg" />
            &lt;/div>
            &lt;h3>Lorem Ipsum is simply dummy text of the printing &lt;/h3>
           
             
        &lt;/div>
    &lt;/main>
&lt;/body>
&lt;script src="app.js">&lt;/script>
&lt;/html></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>we have created a simple layout where we have header menus and some grids in the main body. In the header we have a theme toggle button which will be used for switching between light and dark theme.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we have enabled light theme by default as you can see in HTML above  we have added light class in body </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Designing a web page</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>let's write css for designing a webpage</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
.header li {
    display: inline-block;
    list-style: none;
    padding: 0 10px;
    font-weight: bold;
    font-size: larger;
    cursor: pointer;
    
}
body {
    background-color: var(--bgColor);
    transition: ease-in 1s;
}
.header-container {
    display: flex;
    background-color: var(--headerBg);
    color: var(--color);
    height: 56px;
    transition: ease-in 1s;
}
.logo-section .logo {
    font-weight: bold;
    font-size: x-large;
    margin-left: 10px;
}
.header-contaieer .menu-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.header-container .logo-section, .header-container .menu-section {
    display: flex;
    align-items: center;
    flex-basis: 50%;
}
.main-container {
    display: flex;
    width:80%;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}
.main-container .grid{
    flex-basis: 300px;
    height: 300px;
    box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
    color: var(--color);
}

.grid .img-section img {
    width: 100%;
    height: 200px;
}



</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>As you can see we have used <a rel="noreferrer noopener" href="https://techboxweb.com/detail-beginner-guide-for-css-flexbox-with-examples/" target="_blank">flexbox layout </a>for designing a webpage and uses a CSS variable to the point so while switching between themes we don't need to care about the CSS part.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>let's write Business logic for handling switching functionality between themes</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Business logic</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const bodyContainer = document.body;
const themeAction = document.getElementById('theme-action');

const currentTheme = localStorage.getItem('theme');

if(currentTheme &amp;&amp; currentTheme == 'dark'){
        bodyContainer.classList.replace('light','dark');
        localStorage.setItem('theme','dark');
        themeAction.classList.replace('fa-moon-o','fa-sun-o');

}

themeAction.onclick = () =>{
    if(bodyContainer.classList.contains('light')){
        bodyContainer.classList.replace('light','dark');
        localStorage.setItem('theme','dark');
        themeAction.classList.replace('fa-moon-o','fa-sun-o');

    } else if(bodyContainer.classList.contains('dark')){
        bodyContainer.classList.replace('dark','light');
        localStorage.setItem('theme','light');
        themeAction.classList.replace('fa-sun-o','fa-moon-o');
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>As you can see, we have used local storage to maintain user preference because whenever the user comes back he should be on the same theme.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we have sun/moon icon at the top which is used for toggling between light and dark theme and we added click event on these icons and toggled the theme. In Click event we are setting user preference into the theme and changing to the light or dark theme as per user preferences.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And whenever the user comes the first time, we check is the user already set his preference or not then taken action appropriately. If the user preferred theme is light then no need to do any operation initial level because by default theme is light. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion:</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CSS variables are very useful when want to change things dynamically.Which can not be possible with preprocessors like sass, less</p>
<!-- /wp:paragraph -->