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 <html>. Change themes CSS to in such way they become .dark body { /* props */ }, .teal body { /* props */ } — Adam Azad
– Adam Azad, Commented Jan 2, 2018 at 14:41
Or see this stackoverflow.com/questions/13735247/… and instead of elements by tag name, you can give the link an id and just target that to change it's href — Pete
– Pete, Commented Jan 2, 2018 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
– Muhammad Jafar, Commented Jan 2, 2018 at 15:18

Muhammad Jafar · Accepted Answer · 2018-01-02 15:31:42Z

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 2, 2018 at 15:31

Muhammad Jafar

841 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

OverCoder · Accepted Answer · 2018-01-02 16:00:15Z

0

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');

edited Jan 2, 2018 at 16:00

answered Jan 2, 2018 at 15:45

OverCoder

1,61124 silver badges33 bronze badges

Collectives™ on Stack Overflow

Dynamically changing CSS style files with onchange event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related