Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

January 2, 2022 04:06 am GMT

Implementing a theme switcher using javascript

In this simple tutorial you are going to learn how to implement a theme switcher for your website using CSS and Javascript.

Let's start by creating a simple HTML structure.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Simple theme switcher</title>    <link rel="stylesheet" href="./style.css" />  </head>  <body>    <div>      <h1>Simple theme switcher</h1>      <p>This is your first paragraph</p>    </div>  </body></html>

And a simple CSS to start, just to prepare the page.

body {  display: flex;  justify-content: center;}div {  max-width: 600px;  width: 100%;}button {  cursor: pointer;}

Now we are going to create a button that will trigger the theme.

We can start with a dark-theme button and a script that will include a data-theme attribute to the body element.

<div>  <h5>Theme:</h5>  <button onClick="switchTheme('dark')">Dark</button></div><script>  function switchTheme(theme) {    document.querySelector('body').setAttribute('data-theme', theme);  }</script>

Now we have to implement the themes.

we start by creating the :root variables.

:root {  --white: #FFFFFF;  --black: #000000;  --gray-100: #EEEEEE;  --gray-800: #1c1c1c;  --blue: #0000b8;}body {  /* ... */  background-color: var(--white);  color: var(--black);}

Let's also include other themes

<button onClick="switchTheme('light')">Light</button><button onClick="switchTheme('dark')">Dark</button><button onClick="switchTheme('blue')">Blue</button>

[data-theme='light'] {  background-color: var(--white);  color: var(--black);}[data-theme='dark'] {  background-color: var(--gray-800);  color: var(--gray-100);}[data-theme='blue'] {  background-color: var(--blue);  color: var(--white);}

You should now be able to see the buttons and switch to the selected theme, but the theme is reset to the default theme when reloading the page. In the next section we will store that selected theme on localStorage.

Storing theme on localStorage

Now let's store the selected theme, so we can keep the style even if the user reload the page.

function saveTheme(theme) {  localStorage.setItem('theme', theme)}function loadTheme(theme) {  return localStorage.getItem('theme')}function setTheme(theme) {  document    .querySelector('body')    .setAttribute('data-theme', theme)}function switchTheme(theme) {  setTheme(theme)  saveTheme(theme)}const theme = loadTheme()setTheme(theme)

That's it.

Now challenge for you .

Implement a toggle switcher from light to dark theme using only one button. You can use emoji to identify the states and .

Original Link: https://dev.to/marcosrjjunior/implementing-a-theme-switcher-using-javascript-347d

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To