Skip to main content

The best way to create a dynamic dark mode in JS for your website

Dark Mode

Dark Mode seems to be here to stay. Initially, manly used by developers in their code editors, but now it’s all over the place, from mobile, desktops, and now even the web. Supporting Dark Mode is more and more turning from a nice to have, to a must-have. Of course, depending on your niche, but if you are here, chances are, you want to implement Dark Mode on your site or for your clients.
When it comes to dark mode for websites there are multiple approaches on the web.

Using JS and CSS

The first work is by the use of “dark” magic :p, joke aside, it’s very simple and elegant, and consists of really one line of CSS. 
html {
  
}

html[data-theme='dark'] {
    background: #000;
    filter: invert(1) hue-rotate(180deg)
}
What? You are probably wondering how that could work, and you may be right to be skeptical, but it does indeed. Let’s see it in action before we talk about why I don’t like this option so much:
This is the html script 
<html>
  <body>
  <h1>Hello World</h1>
    <h2>Welcome to my Dark Mode Test</h2>
    <p>
      Here is some text to convert to dark mode
   
   </p>
    
    <img alt="test" src="https://trednix.com/featured.png" width="100px" />
    
   <br />
    
  <button onclick="toggleTheme('dark');">Dark</button>
    
  <button onclick="toggleTheme('light');">Light Mode</button>
  </body>
The CSS script has been given above.
Now let's give the js scripts:
const htmlEl = document.getElementsByTagName('html')[0];

const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;
}
Now everything works smoothly and really nice but if you reload the page,it would return to its initial ,which was the light mode , we want it to be dynamic and to do so,js got us covered.we also want to make sure our changes are stored on the browser so that we remember the user preference for the next time he/she visits our site. For that we will use the localStorage API. 
// Capture the current theme from local storage and adjust the page to use the current theme.
const htmlEl = document.getElementsByTagName('html')[0];
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    htmlEl.dataset.theme = currentTheme;
}

// When the user changes the theme, we need to save the new value on local storage
const toggleTheme = (theme) => {
    htmlEl.dataset.theme = theme;
    localStorage.setItem('theme', theme);
}
You can also learn how to create a beautiful search engine

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Email OTP

email otp sms Email OTP Login with an OTP code is a secure method for the user authentication process. In this method, a one-time password is generated dynamically and sent to the user who attempts login. OTP can be sent to the user’s email or his mobile phone. When the user enters the OTP code then the application will authenticate the user via this code. In this tutorial, we are going to see an example to authenticate user login via an OTP code using email. You can check our mobile sms otp too!  In this example, when the registered user enters email to login, an OTP code is sent to the email address. Using this OTP code the user will be validated. Once the user uses this code then it will be invalid, meaning it cannot be used again. Also, this token will be valid for a day, then it will be expired. Login form with OTP The following code shows login form to the user to enter his email address. On entering email, it shows an input to enter the OTP code sent to his email addres...
Post a Comment
Read more

All you need to know about web cookies

Hello guys ,we all know as a web developers we need cookies ,i am not talking about the normal cookies , I'm talking of web cookies , it's a really good cookie for us 😋.All dynamic website uses cookies in one way or the other and we would be talking about all the types of cookies websites uses. What are cookies? Cookies are small text files placed on a user’s computer (or smartphone), which are commonly used to collect personal data. Most website operators place cookies on the browser or hard drive of their user's computer. Cookies can gather information about the use of a website or enable the website to recognise the user as an existing customer when they return to the website at a later date. This file is neither a virus nor spyware. The law protects website users and lets them opt-out from the use of cookies on their website browser. What are the benefits of cookies? Cookies are used to make the user's web experience faster, convenient and personalised. ...
Post a Comment
Read more

How to create a search engine

How to create a search engine I am going to teach you how we can create a search engine using Google API . You can add more styles to it ,because I'd be creating a simple looking search engine. Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you. I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API. In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key. Sign up for Google API Key https://code.google.com/apis/ajaxsearch/signup.html Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code. <script src="http://www.google.com/jsapi?key=YOURKEY...
Post a Comment
Read more