0

I have searched through many different methods to switch between different cascading style sheets, but have not been able to get any to work. I want to be able to have a sun button to link to the default style sheet and the moon button to link to the dark style sheet. Below are the pieces of my code that I have linking the style sheets and the buttons I want to link to those style sheets.

I know there are many questions like this, but I have tried them all and have not gotten them to work.

Thank you in advance.

    <!-- Template Stylesheets -->
<link href="../assets/css/template/template.css" rel="stylesheet" 
type="text/css" id="default">
<link href="../assets/css/template/template2.css" rel="alternate stylesheet" 
type="text/css" id="dark">
<link href="../assets/css/template/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/template/navigation.css" rel="stylesheet">

<link id="pagestyle" rel="stylesheet" type="text/css" href="template.css">
<script type="text/javascript">
function swapStyleSheet(template){
document.getElementById('pagestyle').setAttribute('href', template);
}
</script>


    <!-- Buttons in body to Switch -->
<li class="nav-item">
<a onclick="swapStyleSheet('template.css')" class="nav-link" href="#"><span data-feather="sun"></span></a>
</li>
<li class="nav-item">
<a onclick="swapStyleSheet('template2.css')" class="nav-link" href="#"><span data-feather="moon"></span></a>
</li>
user8752653
  • 1
  • 1
  • You want to change the `href` of one `` or change a body class and make all the rules in each theme start with that class. How were you expecting this to work based on your research? – charlietfl Aug 07 '18 at 18:22
  • you sent us only HTML. post what you have tried with JavaScript? – Ivnhal Aug 07 '18 at 18:23
  • I'm not sure you're using `rel="alternate"` correctly. It looks like that is supposed to be used if you have a different domain name for your mobile app, not an alternate stylesheet for your page. – Ilene Aug 07 '18 at 18:29
  • @IvnH Sorry, I edited it to show what I last tried with javascript – user8752653 Aug 07 '18 at 18:46
  • @charlietfl I've updated the question with the code I last tried to use but did now work. I'd like to use javascript. – user8752653 Aug 07 '18 at 18:48
  • This is a duplicate of: https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page – ViktorMS Aug 07 '18 at 18:50
  • Your new href is ignoring the rest of the path to where the stylesheets are – charlietfl Aug 07 '18 at 18:51
  • @ViktorH yes, I saw that, but I still cannot get it to work with that as a source to help. If you have any other suggestions, that would helps as I've already tried that – user8752653 Aug 07 '18 at 18:52
  • You are close.... just concatenate the rest of the path in your function – charlietfl Aug 07 '18 at 18:52
  • Possible duplicate of [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) – hcs Aug 07 '18 at 19:11

1 Answers1

0

function changeCSS(cssFile, cssLinkIndex) {

  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}
<a href="#" onclick="changeCSS('template.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('template2.css', 0);">STYLE 2</a>
ViktorMS
  • 1,112
  • 10
  • 25
  • It's still not working for some reason. The links show up and it is recognized when I click them, but the style does not change at all – user8752653 Aug 07 '18 at 19:01