How to Switch Between Multiple CSS Stylesheets using JavaScript? Last Updated : 15 Oct, 2024 Comments Improve Suggest changes Like Article Like Report To switch between multiple CSS stylesheets using JavaScript, the href attribute of the <link> element can be changed dynamically in the HTML document that links to the stylesheets. <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.Example 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 stylesheet --> <link id="theme" rel="stylesheet" type="text/css" href="light.css" /> </head> <body> <h2>Changing Style Sheets</h2> <br /> Click the button below to switch between light and dark themes.<br /> <button onclick="toggleTheme()">Switch</button> <script> function toggleTheme() { // Select the <link> element let theme = document.getElementById('theme'); // Toggle between light.css and dark.css if (theme.getAttribute('href') == 'light.css') { theme.setAttribute('href', 'dark.css'); } else { theme.setAttribute('href', 'light.css'); } } </script> </body> </html> CSS /* dark.css */ body { background-color: black; color: white; } CSS /* light.css */ body { background-color: white; color: black; } Output: Example 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. let 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> CSS /* light.css */ body { background-color: white; color: black; } CSS /* dark.css */ body { background-color: black; color: white; } CSS /* aquatic.css */ body { background-color: #4DB6AC; color: #004D40; } CSS /* geeky.css */ body { background-color: #282C34; color: #61DAFB; } Output: 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'. Comment More infoAdvertise with us Next Article How to Switch Between Multiple CSS Stylesheets using JavaScript? chitrankmishra Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read How to Create Multiple Themes using Tailwind CSS ? In this article, we will discuss how to create multiple themes using Tailwind CSS. Tailwind CSS is a popular utility-first CSS framework that provides a lot of pre-designed CSS classes for designing websites. With Tailwind CSS, you can easily create multiple themes for your website. This means that 3 min read How to Remove and add Style with .css() Function using JavaScript? There are many cases, especially as the content gets more interactive, where the developer wants styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles doesn't help. The so 3 min read How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to check if CSS property is supported in browser using JavaScript ? Few CSS properties are not supported in some browsers, thus it is required to check whether a CSS property & its value are supported in the current browser. We can find it using JavaScript using CSS.supports() method. Syntax: supports(propertyName, value) supports(condition) There are two distin 2 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read How to read CSS rule values with JavaScript? DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript. Using getElementsByTagName() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse document.getE 3 min read How to reload CSS without reloading the page using JavaScript ? While working with CSS, you might have come across situations where you made some changes in the stylesheet and had to do a hard reload to see the changes reflected in your browser. Or maybe the style depends on some user interaction and you don't wish to hard reload the page every time. Sometimes y 2 min read How to Create dark theme using Slider in CSS ? In this article, we will learn to create a dark theme using the slider in CSS. In modern websites, we see a wonderful feature to change the website themes just by checking a slider. To check this awesome feature go to the geeksforgeeks.org website where you can change the theme as per your preferenc 3 min read How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link 2 min read Like