Impact logo

90% of content gets no traffic from Google. How to improve your organic search traffic

Adding a dark mode is basically adding a theme. The principles are the same for adding a light mode to a dark website or alternative styling based on user-defined variables, the time of year or holidays.

I added theming with a mix of and CSS. In this post I’ll go step by step into the details of how I did it and what I learned.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias expedita earum modi sint voluptatum nemo assumenda explicabo laboriosam unde excepturi, necessitatibus consequatur quo! Quis impedit excepturi ut, alias omnis harum?

Blog Image

Setup

The themes are activated by CSS classes on the root element. When the page is loaded, I want to apply the theme that most likely suits the visitor (you!) best. After all, most people don’t like configuring websites before they can read a blog post, so the the whole theming feature would likely remain unused otherwise. So I have to make a guess about what the visitor wants and expects. I do that in this order:

  1. I assume people don’t want the theme to change when they navigate between pages. So if the page loaded isn’t the first page they visit, I want to use the theme that was used before.
  2. If it’s the first page they view on my site, their browser may be able to tell their preference.
  3. If no preference is available, we can base the choice based on whether it’s day or night.

Every time a page is loaded, in the current or a new tab, it checks if a theme was set previously. Because the preference for a light or dark theme can change during the day, with every change, I add a time stamp to the saved setting. Only when the state was saved less than two hours ago, it’s applied:

                                    
        $('#myModal').on('show.bs.modal', function (e) {
        if (!data) {
        return e.preventDefault() // stops modal from being shown
        }
        })
                                    
                                

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque distinctio nemo tempora similique necessitatibus asperiores inventore ipsum, nostrum velit, quasi vitae natus numquam veritatis nobis, reiciendis deleniti facere molestias a.

Header 2

Header 3

Header 4

Header 5
Header 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit perferendis labore vel, necessitatibus laboriosam fugit inventore ad odio tenetur vitae veritatis, earum numquam consectetur voluptatem illum, sequi asperiores commodi?

  • list item 1
  • list item 2
  • list item 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit corrupti dolorem at iste perferendis! Modi praesentium vel, rem aliquid illo, nostrum asperiores dolorem corrupti odio tempora impedit deleniti eius voluptatibus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit corrupti dolorem at iste perferendis! Modi praesentium vel, rem aliquid illo, nostrum asperiores dolorem corrupti odio tempora impedit deleniti eius voluptatibus.

Share:
23 Comments
characters remaining
avatar John Doe 2 min ago

I really like that the Pixel uses a lot of Bootstrap 4's classes to position elements across the website. I also like the fact that we can get a version of the code without Sass if needed.

When is the next product coming? :)

4 likes
characters remaining

Hi John Doe,

We're happy to hear you like our product. A new one will come soon enough!

2 likes
characters remaining

Hey there! We want to say that you're awesome and we think you'll build great websites! Why not use Pixel to make things easier?

4 likes
characters remaining

We are design changers

Subscribe and get our monthly newsletter in your inbox.