Toggle switch button to switch between two different stylesheets

Question

I have an exam at uni soon and my web design professor asked us to create a website.
In this website we need to apply a style change, switching between 2 different css stylesheets.
I thought about doing a black and white version by default and then, with a toggle switch button, passing to a colored version.
I created the button but I can't understand how to link and transition from one stylesheet to another. I imagine I need to use Javascript but I don't know what to do. This my html part for the button:

.switch {
  position: relative;
  height: 34px;
  width: 60px;
  display: inline-block;
  }
.switch input {
  display: none;
  }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: white;
  border-radius: 26px;
  transition: 0,4s;
  }
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background-color: black;
  left: 4px;
  top: 4px;
  transition: 0.4s;
  }
input:checked + .slider {
  background-color: #fffe54;
  }
input:checked + .slider:before {
  transform: translateX(26px);
  }

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

If someone can help me it will be much appreciated!

is it just the styling of this one element with class .slider that you need to toggle? — Ramon de Vries, Jun 10 '20 at 12:19
Here you have an example - [Dark/Light mode](https://jsfiddle.net/tomik23/vk61pjdq/) style settings are saved in localstorage, you can use it at home — Grzegorz T., Jun 10 '20 at 12:30
With that button I need to toggle the color palette of the whole website. (A bit like a night/day mode switch, but I want to achieve a dark/color mode switch) — chiab, Jun 10 '20 at 12:31
@chiab And this is how it works, the colors are set for the whole page. They are stored in localstorage. — Grzegorz T., Jun 10 '20 at 12:33
@GrzegorzT. thank you! But how can I achieve the same using a different stylesheet? That's my issue — chiab, Jun 10 '20 at 12:33
@chiab You don't need another style sheet, you have one style sheet and you only change the state in js. `:root { --primary-color: #24242b; ... } html [data-theme="dark"] { --primary-color: #f89898; ... }` — Grzegorz T., Jun 10 '20 at 12:36
@GrzegorzT. I know I don't need it but it's compulsory for my exam :/ Thank you though! — chiab, Jun 10 '20 at 12:40

score 0 · Answer 1 · answered Jun 10 '20 at 12:22

0

I found this thread: How to change the css stylesheet dynamically for a website being viewed?

There is more than one solution in the thread, let me know if one of them works for you.

answered Jun 10 '20 at 12:22

Rémy Huot

31
1
2
5

i don't think the op has to litterly change a stylesheet. but just the styling – Ramon de Vries Jun 10 '20 at 12:23
@RamondeVries well he specified: "switching between 2 different css stylesheets" – Rémy Huot Jun 10 '20 at 12:32

score 0 · Answer 2 · answered Jun 10 '20 at 12:23

The best think you can actually do is to assign a default class to the body of your website, and when you click the button, you switch class, using different classes. When you click back the switch button then it reapply the default class.

In this way you can load both stylesheets but use only one of them.

Or just load one with different styles.

You can find a partial example of how to do it here on w3schools.

Grzegorz T. · Answer 3 · 2020-06-10T13:34:55.560

I have prepared an example of how you can change style sheets.

You should also create two style files. I called them blue and red ;) style.red.css and style.blue.css

Of course, this should be saved in localstorage so that you do not have to click each time you go to another page but I have already left it for you ;)

const button = document.querySelector('button');
const type = 'red';

const headStyle = (type) => {
  const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('link');
  style.rel = 'stylesheet';
  style.id = 'colorTheme';
  style.href = `./style.${type}.css`;
  head.appendChild(style);
  document.documentElement.setAttribute('data-theme', type)
  console.log(style);
}

button.addEventListener('click', () => {
  const colorTheme = document.querySelector('#colorTheme');
  colorTheme.parentNode.removeChild(colorTheme);
  const typeTheme = document.documentElement.getAttribute('data-theme');
  typeTheme === 'red' ? headStyle('blue') : headStyle('red')
})

window.addEventListener('load', headStyle(type));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>switch</button>
  <script src="./script.js"></script>
</body>

</html>

Toggle switch button to switch between two different stylesheets

3 Answers3