Load additional CSS file w/ a toggle switch when switched

Question

I have a additional css file I would like to load, once enabled through a toggle switch. & inversely allow it to be unset and revert back to the default .css file when un-switched.

I seem to be having a bit a troubles in successfully adding this, as writing java-script is a bit tricky for me sometimes. So I call on the community to offer their input & how they would go about adding this ability. Thanks to everyone in advance for you're time & reading!

Here is the URL for the site: (https://phpstack-726541-2423367.cloudwaysapps.com/) You can see the toggle switch in the top right corner

It would be greatly appreciated for the simplest solution possible to this :)

????

Bootstrap toggle switch, so no custom or additonal css to include. 
The path for the intended css file is 'assets/css/dark-theme.css'

<div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>

It looks like you are wanting to to do a dark them toggle? Why not just use classes to switch the styling? — Aurange, Mar 29 '22 at 00:48
Hey there thanks for responding! Yes. What I am looking to achieve is a dark theme that can be enabled on toggle by the user, if desired. — , Mar 29 '22 at 01:36

score 0 · Answer 1 · answered Mar 29 '22 at 01:56

0

TL;DR. Switch CSS classes to control color themes

You might want to review this answer: https://stackoverflow.com/a/63087710/7216508

I understand you are using Bootstrap, and thus the code snippet below might not be ready-to-use by simple copy-paste. But hope it'd give you a general understanding of how this could be achieved.

In a nut-shell, you could assign theme colors in CSS variables and override their values depending on the user selection. In your case you might want to merge the two CSS files and refactor the structure a bit.

document.querySelector('.switch').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

:root {
  --bg-nav: #333;
  --bg-body: #f0f0f0;
  --text-nav: #fff;
  --text-body: #202020;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-body);
  color: var(--text-body);
}

body.dark {
  --bg-nav: #112200;
  --bg-body: #333;
  --text-nav: #fff;
  --text-body: #fff;
}
main {
  flex: 1;
  padding: 15px;
}

header, footer {
  background-color: var(--bg-nav);
  color: var(--text-nav);
  padding: 10px;
}

<header>Header Nav</header>
<main>
  <h1>Test Page</h1>
  <p>Here is a sample page</p>
  <button class="switch">Switch theme</button>
</main>
<footer>Footer Nav</footer>

answered Mar 29 '22 at 01:56

Bumhan Yu

2,078
1
10
20

Hey thanks for this! I will give this method a try & see how it works out :) It's always interesting to see how others may approach something, as there can be numerous ways to achieve something. – Mar 29 '22 at 02:00
You're welcome. I'd advise against using two separate CSS files and dynamically load the files upon interaction, as it's an unnecessary traffic and might cause performance concerns. As described in [this SO answer](https://stackoverflow.com/a/63087710/7216508) and demonstrated in [this demo](https://www.codeply.com/v/bV4XYd7H9h), it might need some tweak but rather straightforward by CSS/SCSS structure. – Bumhan Yu Mar 29 '22 at 02:06
Adding onto my previous comment, as it's past the 5 minute edit limit. You had mentioned potentially merging my additional CSS file, with the default one. Do you mean using something such as the @import function to include the 'dark-theme.css' file? – Mar 29 '22 at 02:10
There are a few different ways to implement it, and unfortunately I'm not well versed in Bootstrap's CSS convention. That said, you could either use the `@import` into the main CSS file or a compile a consolidated CSS from SCSS directly. I still recommend that you review [this SO answer](https://stackoverflow.com/a/63087710/7216508) and [its demo here](https://www.codeply.com/v/bV4XYd7H9h) as they demonstrate more practical, Bootstrap-relevant examples. – Bumhan Yu Mar 29 '22 at 02:26
Ok awesome! Thanks for follow up my good man :). If you check the site now, you will see that I am progressing with you're proposal. & if you toggle the switch it is now applying the alternative CSS. Now I just have to go through & add all the rest of the desired CSS :D Thanks a bunch amigo! – Mar 29 '22 at 02:29

Load additional CSS file w/ a toggle switch when switched

1 Answers1

TL;DR. Switch CSS classes to control color themes