47

What I'm working on is simple.

You click on a button (id="themes") and it opens up a div (id="themedrop") that slides down and lists the themes. (I only have two at this point)

<button id="original">Original</button><br />
<button id="grayscale">Grayscale</button>

Now when the site is loaded it loads with style1.css (main/original theme)

<link rel="stylesheet" type="text/css" href="style1.css">

Now what I'm trying to figure out is... How can I have it that when the grayscale button is clicked to change the stylesheet from style1.css to style2.css (note: files are in the same directory)

Any help would be much appreciated.

chaos
  • 122,029
  • 33
  • 303
  • 309
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144

5 Answers5

72
$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

Give this a try but not sure if it will work I have not tested it but gd luck.

Val
  • 17,336
  • 23
  • 95
  • 144
  • 3
    Thanks this helped me out (modified version): --- $("button#grayscale").click(function() { $("link[rel=stylesheet]").attr({href : "style2.css"}); }); – Michael Schwartz Oct 21 '11 at 08:50
  • yep you are right, `attr('href')` lol, sorry, btw u don't need button in front of selector followed by id selector, as IDs should be unique according to specifications and you shouldn't have duplicate IDs, hence why we use classes :) – Val Oct 21 '11 at 08:54
  • 1
    Nice answer. If only dealing with 2 variants. Won't work for 3 stylesheets. – Jay Jun 14 '14 at 11:00
  • 1
    @jay you can always convert the ids to classes, but I wanted to keep it relative to the question asked :) but I agree with you :) – Val Jun 16 '14 at 10:09
  • This is great, except how to get the page to reload with the new stylesheet? I'm doing this with LESS as well. I'm not getting errors, but it's also not reloading. – Reverend Bubbles Nov 19 '18 at 21:34
29

I would suggest you give the link-tag an id such as theme. Put the name of the css file in a data-attribute on the buttons and use the same handler on them both:

Html:

<link id="theme" rel="stylesheet" href="style1.css">

<button id="grayscale" data-theme="style2.css">Gray Theme</button>

And js:

$("button[data-theme]").click(function() {
    $("head link#theme").attr("href", $(this).data("theme"));
}
Tetaxa
  • 4,375
  • 1
  • 19
  • 25
11

You can try to do that by this way:

<link id="original" rel="stylesheet" type="text/css" href="style1.css">
<script>
function turnGrey(){
    //what ever your new css file is called
    document.getElementById("original").href="grey.css";
}
</script>
<button id="grey" onclick="turnGrey">Turn Grey</button><br />
Tân
  • 1
  • 15
  • 56
  • 102
none
  • 111
  • 1
  • 2
3

Use this :

<link href="Custom.css" rel="stylesheet" />
<link href="Blue.css" rel="stylesheet" />
<link href="Red.css" rel="stylesheet" />
<link href="Yellow.css" rel="stylesheet" />



<select id="changeCss"`enter code here`>
        <option onclick="selectCss(this)" value="Blue">Blue</option>
        <option onclick="selectCss(this)" value="Red">Red</option>
        <option onclick="selectCss(this)" value="Yellow">Yellow</option>
    </select>

<script type="text/javacript">
function selectCss() {
            var link = $("link[rel=stylesheet]")[0].href;
            var css = link.substring(link.lastIndexOf('/') + 1, link.length)
            $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css');
        }
</script>
Fopa Léon Constantin
  • 11,863
  • 8
  • 48
  • 82
1

I had a dark theme by default on my webpage. To convert it to light theme, I had used the sun icon font by google. So in a simple way, the code to switch between the themes in jquery was:

$('.theme').click(function() {
  if ($('.theme').children('img').attr('src') == 'images/lighttheme.png') {
    **$('link').attr('href', 'css/styleslight.css');**
    $('.theme').children('img').attr('src', 'images/darktheme.png')
  } else if ($('.theme').children('img').attr('src') == 'images/darktheme.png') {
    **$('link').attr('href', 'css/stylesdark.css');**
    $('.theme').children('img').attr('src', 'images/lighttheme.png');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The first line of the if and else if statement is the full answer. The remaining text involves just changing the icon when clicked from moon to sun, or vice-versa.

Aknk
  • 336
  • 3
  • 14