How to toggle between two CSS documents with a <button> in HTML

Related searches

I'm trying to use a dark theme and light theme on my webpage, but I can't find a way to toggle them with just one button (so 1st click of the button turns on the dark theme and 2nd time turns it off). I would prefer to be able to do this without the use of a third-party JavaScript library. I have found a way to do this with an <option> element but that isn't the "toggle button" I want:

  <button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
    <select id="select">
        <option>Dark Theme</option>
        <option>Revert To Original</option>
    </select>

and

function getTheme () {
    function changeTheme (Theme) {
        document.getElementById('style').setAttribute('href', Theme);
    }
    var index = document.getElementById("select").selectedIndex;
    switch (index) {
        case 0:
          changeTheme('css/dark.css');
          break;
          case 1: changeTheme('css/main.css');
    }
}

Thanks for your help!

Another way is to use a boolean. You can change the value of the boolean on each click. And you can toggle the css with this boolean.

<button onclick=getTheme()>Click to use this theme.</button>

Js

var bool = true;
function getTheme() { 
  function changeTheme (theme) {
    document.getElementById('style').setAttribute('href', theme);
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  changeTheme(theme);
}
Edit based on comment

This does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"

You can use the same logic, like:

var bool = true;
function getTheme() { 
  function changeTheme (theme, text) {
    document.getElementById('style').setAttribute('href', theme);
    document.getElementById('themeToggle').innerText = text;
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  var text  = bool ? 'Dark theme' : 'Light theme';
  changeTheme(theme, text);
}

Switching between multiple CSS files using Javascript, Assign an id to your link. Fetch it in JS by its id and change the href attribute. <link rel="stylesheet" type="text/css" href="example1.css" id="lnk"/>. How to toggle between two CSS documents with a <button> in HTML. Ask Question - TO is asking for a button to toggle between two states – Andreas Apr 11 at 12:52.

I know this seems a bit amateur but you can do something like this,

<button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
<script>
var click = 0;
function getTheme()
{   
    click++;
    if(click%2 == 0)
        changeTheme('css/dark.css');
    else
        changeTheme('css/main.css');
}
</script>

and change text on button accordingly. Let me know if it works.

How to Allow Your Visitors to Switch Between Alternate CSS Styles , How to Allow Your Visitors to Switch Between Alternate CSS Styles / Themes For example, if you want to provide two themes for your site, one called "blue" styles for different aspects of your web page into different files. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

A simple way is:

HTML

<input type="button" value="Dark" id="button" onclick=getTheme()></input> 

JavaScript

function getTheme () {
  var button = document.getElementById("button");
    if(button.value === "Dark") {
      button.value = "Revert To Original";
    } else {
      button.value = "Dark";
    }
}

Inside the if/else you can put your change theme function.

https://codepen.io/anon/pen/xedzVz?editors=1111

JavaScript Change CSS Class Style className Toggle Tutorial, Learn to change, toggle and swap CSS classes using JavaScript event handling. create a function that toggles between two CSS classes as an element is repeatedly clicked. </style> <script> function toggleClass(el){ var kids = document. You can "fake" multiple files into one CSS file link by using the @import statement at the beginning of your primary custom CSS file (for example, with Google fonts, Google will also provide an @import url that you can use inside an existing stylesheet). @import is used more often when you're using a framework with an existing stylesheet, like

How to let Visitors to Switch Between two or three CSS Styles , 2) Copied the two .css files style2 and style3 to the theme 's root folder. Added But no switching of styles as expected are happened. Anything that appears between these two tags is the content of the comment, visible only in the code and not rendered by the browser. A CSS comment can take up any number of lines. Here are two examples:

Alternative Style: Working With Alternate Style Sheets – A List Apart, You've even gone the extra mile and created several alternative style But now you need a cross-browser way to dynamically switch between the style sheets. Style sheets can be associated with documents using a list of link elements To make paul.css preferred, a title attribute is added, giving the default style a name � To avoid these hassles, you can put the CSS styles into a .css file and link it to the HTML files. That way, one CSS file can be used to style many HTML pages. Here are the advantages of linking a CSS file to HTML: Time-effective — you only need to create a single CSS file to style all HTML files.

The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9. The toggle() method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on.

Comments
  • stackoverflow.com/questions/8796107/…
  • Possible duplicate of How to make changeable themes using CSS and JavaScript
  • @Rob "I have found a way to do this..." - TO is asking for a button to toggle between two states
  • Use a closure, a global variable, check the value of the href attribute, ...
  • this does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"
  • Wow nice answer