Register Now

Login

Lost Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Add post

You must login to add post .

Add question

You must login to ask question.

Login

Register Now

Register Now to become a member of Askgoogle forum and Enjoy it's benefit. We're looking forward to have you on our Forum!

How to Enable light and dark mode on your website

How to Enable light and dark mode on your website

How to Enable light and dark mode on your website If you’re looking for how to toggle between dark and light mode on your blog or Website, kindly follow this simple procedure and Enable the dark mode on your website right away.

Are you currently looking for how to Activate a light and dark mode on your website OR blog? Well that’s fine. And special thing about this tutorial am about to share with you is that,

Even when a user or guess Visit your blog and returns back Next time, it will still remain in the dark mode if the user left it on dark mode, the same thing applies to light mode as well.

How to Enable dark and light mode on your website

Dark and light mode feature is what every blog out there supposed to activate on their blog or website, because many people do prefer dark mode compare to light mode,

And probably because they have eye sight problem, or they don’t like too much light reflections or something else, whatever the case may be, Over all, I’d prefer dark mode compare to light for the sake of my eyes, Lol.

And besides that, the dark mode feature makes your blog looks more beautiful and creative.

So that’s why I will be sharing with you guys who might be interested on how to Activate dark and light mode on your blog

How to Enable dark and light mode on your website the simplest way

STEP 1: Add this HTML to any location you want the toggle switch to show, which user can toggle between the dark & light mode

 
STEP 3: Add CSS to your theme Style.css

/*dark and light*/
/*slider switch css */
:root {
    --primary-color: #302AE6;
    --secondary-color: #536390;
    --font-color: black;
    --font-color-white: #000;
    --font-color-black: #1a1a1a;
    --bg-color: #dcdee3;
    --bg-body: #dcdee3;
    --heading-color: #292922;
    --bg-color-white: #fff;
    --bg-color-footer: #333333;
    --bg-color-grey: #696969;
    --bg-color-grey-white:grey;
    --bg-color-light-belwo-header:#fff;
    --bg-color-green: green;
    --bg-color-green-only: green;
    --bg-color-light-grey: #f0f0f0;
    --bg-color-light-grey-search:#808080;
    --bg-color-light-full-black:#000;

}

[data-theme="dark"] {
  --bg-color-grey-white:#fff;
  --bg-color-footer: #21252c;
    --primary-color: #9A97F3;
    --secondary-color: #818cab;
    --font-color: #fff;
    --bg-color: #181c23;
    --bg-body: #181c23;
    --bg-color-white: #181c23;
    --heading-color: #818cab;
    --font-color-white: #fff;
    --bg-color-grey: #21252c;
    --bg-color-green: #696969;
    --font-color-black: #fff;
    --bg-color-light-grey: #21252c;
    --bg-color-light-grey-search:#21252c;
    --bg-color-light-belwo-header:#21252c;
    --bg-color-light-full-black:#fff;
}

 
CSS for the Toggle switch

.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 3px;

  }
  .theme-switch-wrapper em {
    margin-left: 10px;
    font-size: 1rem;
    font-style: normal;
    font-size: 14px;
}
  .theme-switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
  }
  
  .theme-switch input {
    display:none;
  }
  
  .slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }
  
  .slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
  }
  
  input:checked + .slider {
    background-color: #66bb6a;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  .light {
    margin-right: 10px;
}
/*Toggle switch*/

 

How to Enable light and dark mode on your website

STEP 3: Add this javascript to your theme footer before the closing tag recommended*

 

You can also style the CSS elements to fit your current theme structure.

How to Enable light and dark mode on your website

Here is the result

How to Enable light and dark mode on your website

 

Also Read How to count post views on wordpress without plugin 2020

How to successfully activate dark and light mode on your website best Tutorial.

Conclusion

So far we’ve learned how to Enable dark and light mode on our blog or website the simplest way ever,

If you encounter any issues while integrating any of this code, please feel free to leave a reply through the comment section, and me or any of the admin would definitely get back to you as soon as possible.

Do well to share this article with friends if you’ve found it useful.

How to Enable light and dark mode on your website, conclusion

About MOD3

Leave a reply