How to switch between multiple CSS stylesheets using JavaScript ?

21 Jul, 2020
Many websites on the internet are available in multiple themes. One can obtain any feature by making multiple stylesheets into the HTML code and enabling one at a time. A CSS file is included into the HTML in the <head> tag using the <link> tag.
<link id="theme" rel="stylesheet" type="text/css" href="light.css" />

The “href” attribute specifies the file location of the CSS file. By altering this tag, we can add new CSS to the website. The implementation can be done using any of the following methods.
Method 1: When you want to make a switch or toggle button, to toggle the CSS. It switches between the values depending upon the currently active value.
HTML
<!DOCTYPE html><html>  <head>    <!-- Add the style sheet. -->    <link id="theme" rel="stylesheet"         type="text/css" href="light.css" />      <script>        function toggleTheme() {            // Obtains an array of all <link>            // elements.            // Select your element using indexing.            var theme = document.getElementsByTagName('link')[0];              // Change the value of href attribute             // to change the css sheet.            if (theme.getAttribute('href') == 'light.css') {                theme.setAttribute('href', 'dark.css');            } else {                theme.setAttribute('href', 'light.css');            }        }    </script></head>  <body>    <h2>Changing Style Sheets</h2>    <br />    Click below button to switch between     light and dark themes.<br />          <button onclick="toggleTheme()">Switch</button></body>  </html>
Output:
Light Theme:On clicking the switch button:
Dark Theme:
Method 2: When you want to select from multiple style sheets. The value for the “href” attribute is passed to the function call itself.
Prerequisite: Prepare all the style sheets in a folder.
HTML
<!DOCTYPE html><html>  <head>    <!-- Add the style sheet. -->    <link id="theme" rel="stylesheet"         type="text/css" href="light.css" />      <script>        function toggleTheme(value) {              // Obtain the name of stylesheet             // as a parameter and set it             // using href attribute.            var sheets = document                .getElementsByTagName('link');              sheets[0].href = value;        }    </script></head>  <body>    <h2>Changing Style Sheets</h2>    <br />    Switch between multiple themes     using the buttons below.<br />      <button onclick="toggleTheme('light.css')">        Light    </button>          <button onclick="toggleTheme('dark.css')">        Dark    </button>          <button onclick="toggleTheme('geeky.css')">        Geeky    </button>          <button onclick="toggleTheme('aquatic.css')">        Aquatic    </button></body>  </html>
Output:
Light Theme:Dark Theme:Geeky Theme:Aquatic Theme:
Note: The corresponding CSS files with required names should be available and the path to them should be passed using the function. The files specified here are placed in the same folder of the HTML file so that the path resembles ‘light.css’.
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS