Dynamically changing CSS style files with onchange event

Question

I'm currently able to dynamically change style rules directly via JS, but I find this rther limiting and I'd rather be able to to hot-swap entire CSS stylesheet files. Any suggestions?

My code:

<label>Themes :</label>
<select name="background" id="bg" onchange="changeBg(this)">
    <option value="white">Default</option>
    <option value="#444">Dark</option>
    <option value="teal">Teal</option>
</select>

// Changing Themes
function changeBg(x){
    var body = document.getElementById('body');
    body.style.backgroundColor = x.value;
}

And perhaps I'd have multiple stylesheet definitions, like so:

<!-- Themes -->
    <link type="text/css" rel="stylesheet" media="all" href="style.css" id="theme1_css">
    <link type="text/css" rel="stylesheet" media="all" href="themes/dark.css" id="theme2_css">
    <link type="text/css" rel="stylesheet" media="all" href="themes/teal.css" id="theme3_css">

Save on HTTP requests and use a master class name in ``. Change themes CSS to in such way they become `.dark body { /* props */ }`, `.teal body { /* props */ }` — Adam Azad, Jan 02 '18 at 14:41
See https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page — Stuart, Jan 02 '18 at 14:41
Or see this https://stackoverflow.com/questions/13735247/changing-the-href-of-a-link-tag-using-javascript and instead of elements by tag name, you can give the link an id and just target that to change it's href — Pete, Jan 02 '18 at 14:50
The problem is, I'm using bootstrap too. so if i replace all link tags with new css tag then all link include the bootstrap will removed too. I don't want that way — Muhammad Jafar, Jan 02 '18 at 15:18
How to do that with onchange event on select tag html? @Pete — Muhammad Jafar, Jan 02 '18 at 15:20
`var link = document.getElementById('link-id');` // give the link tag and id `link.href = 'themes/' + x.value + '.css';` // the value of the option should be the stylesheet name - eg dark or teal — Pete, Jan 02 '18 at 15:23

score 0 · Answer 1 · answered Jan 02 '18 at 15:31

0

So I edit the js script into this:

// Changing Themes
function changeBg(x){
    var link = document.getElementById('theme1_css');
    link.href = 'themes/' + x.value + '.css';
}

credit: thanks to @Pete

answered Jan 02 '18 at 15:31

Muhammad Jafar

84
1
3
12

OverCoder · Answer 2 · 2018-01-02T16:00:15.610

The basic idea is that you can use the disabled property to set/unset themes:

<link rel="stylesheet" type="text/css" href="dark.css" data-theme="dark">
<link rel="stylesheet" type="text/css" href="light.css" data-theme="light">

And:

function setTheme(theme) {
    var styles = document.querySelectorAll('link[rel="stylesheet"]');
    styles.forEach(function(style) {
        var styleTheme = style.getAttribute('data-theme');
        style.disabled = styleTheme && styleTheme !== theme;
    });
}

Now set theme with something like:

setTheme('light');

Dynamically changing CSS style files with onchange event

2 Answers2