1554948347
Create A Dark/Light Mode Switch with CSS Variables
Giving your users a way to customise the interface to their preference is a huge win for user experience. Here we are going to provide the user with a simple switch to toggle between dark mode and light mode and we will also try to remember their preference for future visits.
Let’s begin!
If you don’t have a website of your own to which you wish to add this functionality, use this demo website to follow along.
Adding the CSS
We will be adding CSS custom properties also known as CSS variables, which we can reference and modify throughout the document. If you wish to read more about custom properties you can read on MDN.
Here’s the tldr; version -
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(–main-color);)
First, we’ll add our light or default mode css variables to the :root pseudo class. It matches with the root element in your document tree, generally the <html> tag. We will use :root because we want to avail the variables globally.
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}
Second, we’ll add our dark mode css variables.
[data-theme=“dark”] {
–primary-color: #9A97F3;
–secondary-color: #818cab;
–font-color: #e1e1ff;
–bg-color: #161625;
–heading-color: #818cab;
}
What is [data-theme=“dark”]? This means we are referencing a data attribute called data-theme with a value “dark”. We will find the use of it in a while.
Then, we can reference these variables in our stylesheets like so-
body {
background-color: var(–bg-color);
color: var(–font-color);
/*other styles*/
.....
}
h1 {
color: var(–secondary-color);
/*other styles*/
.....
}
a {
color: var(–primary-color);
/*other styles*/
.....
}
Adding the HTML “toggle switch markup”
This is essentially just a checkbox, however we will add some additional markup to style like a toggle switch. I referenced the styles from this codepen.
<div class=“theme-switch-wrapper”>
<label class=“theme-switch” for=“checkbox”>
<input type=“checkbox” id=“checkbox” />
<div class=“slider round”></div>
</label>
<em>Enable Dark Mode!</em>
</div>/Simple css to style it like a toggle switch/
.theme-switch-wrapper {
display: flex;
align-items: center;em {
margin-left: 10px;
font-size: 1rem;
}
}
.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%;
}
Adding the JavaScript
The final part is to add the bit of JavaScript to tie it all together.
We have 3 tasks in hand-
- Add event handlers to handle accordingly the check/uncheck event of toggle-switch
- Store the user preference for future visits
- Check for saved user preference, if any, on load of the website
Adding the event handlers
const toggleSwitch = document.querySelector(‘.theme-switch input[type=“checkbox”]’);function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute(‘data-theme’, ‘dark’);
}
else {
document.documentElement.setAttribute(‘data-theme’, ‘light’);
}
}toggleSwitch.addEventListener(‘change’, switchTheme, false);
Remember, the data-theme attribute we referenced in CSS above, this is where it’s getting added to our root element.
Store the user preference for future visits
We will use browser’s localStorage to store the user preference.
Let’s modify our switchTheme function -
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute(‘data-theme’, ‘dark’);
localStorage.setItem(‘theme’, ‘dark’); //add this
}
else {
document.documentElement.setAttribute(‘data-theme’, ‘light’);
localStorage.setItem(‘theme’, ‘light’); //add this
}
}
Check for saved user preference, if any, on load of the website
We will check if the theme preference is saved, if yes then we will, accordingly-
- set our
data-themeattribute - check/uncheck our toggle-switch checkbox
const currentTheme = localStorage.getItem(‘theme’) ? localStorage.getItem(‘theme’) : null;if (currentTheme) {
document.documentElement.setAttribute(‘data-theme’, currentTheme);if (currentTheme === 'dark') { toggleSwitch.checked = true; }}
That’s it! Check out the full demo below.
I recently added this to [my website](https://ananyaneogi.com), so check that out as well, maybe!Pro-Tip: How to decide on the color scheme?
My suggestion is to stay in the same spectrum of your primary or brand color and generate a palette out of it. Use the darkest shade from the palette as the background color and the lighter shades as font colors when in dark mode. I used this color shades generator for generating my color palette.
Even if you don’t end up using the exact colors generated, it is still a good place to start. Even I ended up fine tuning the colors I ultimately used.
Originally published by Ananya Neogi at https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
Follow great articles on Twitter
Learn More
☞ Build Responsive Real World Websites with HTML5 and CSS3
☞ Web Design for Beginners: Real World Coding in HTML & CSS
☞ Beginner Full Stack Web Development: HTML, CSS, React & Node
☞ The Complete HTML & CSS Course - From Novice To Professional
☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)
☞ The Complete Sass & SCSS Course: From Beginner to Advanced
#css #html
What is GEEK
Buddha Community
1626240600
How To Create Dark and Light Mode Website using jQuery
Hello Friends,
In this tutorial i will show you How To Create Dark and Light Mode Website using jQuery.
As you can see many website and mobile applications are provide light theme as well as dark theme to user, It is useful for websites which have long content and requires users to focus on the screen for a long time.
Read More : How To Create Dark and Light Mode Website using jQuery
https://websolutionstuff.com/post/how-to-create-dark-and-light-mode-website-using-jquery
Read Also : How To Generate Barcode In Laravel
https://websolutionstuff.com/post/how-to-generate-barcode-in-laravel
#how to create dark and light mode website using jquery #dark and light mode #how to add dark mode and light mode in website #day and night mode #jquery
1626415140
How To Toggle Dark and Light Mode using jQuery
Hello Guys,
In this tutorial I will show you how to toggle between dark and light mode using jQuery.
As per the current trend of web development in many websites provides to user for reading select theme like dark mode and light mode or day mode and night mode of website and it’s very easy to implement in website.
In this just write some css code and java script for toggle dark mode and light mode website also you can store in local storage for save the state of user select theme like dark mode and light of website.
Read More : How To Toggle Dark and Light Mode using jQuery
https://websolutionstuff.com/post/how-to-toggle-dark-and-light-mode-using-jquery
Read Also : How Generate PDF From HTML View In Laravel
https://websolutionstuff.com/post/how-generate-pdf-from-html-view-in-laravel
#how to toggle dark and light mode using jquery #dark and light mode #toggle between light and dark mode #jquery #day and night mode #dark mode website
1603765256
Dark Mode using CSS Variables
Are you stuck with (LESS/SASS) pre-processor based color variables and looking around for solutions to implement dark mode?
You came to the right place!
Are you looking for an elegant way to implement a dark mode in your new project?
You came to the right place!
Are you looking for a way to** listen to the operating system theme** preference and switch your app’s theme accordingly?
You came to the right place!
A complete guide for elegantly implementing and switching between light and dark themes for web apps.
Contents
- Demo
- Pre-processor independence
- Designing color variables in CSS
- Setting up light and dark themes
- Listen to the Operating System theme
#css-variables #dark-mode #dark-theme #css
1626922800
Theme Switcher with CSS Variables - Tutorial
Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!
Useful Links:
GitHub: https://github.com/redhwannacef/youtube/tree/master/theme-switcher
#css variables #css #tutorial #css variables - tutorial #css theme switcher
1596530868
Hire CSS Developer
Want to develop a website or re-design using CSS Development?
We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.
For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS
#hire css developer #css development company #css development services #css development #css developer #css