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.
On clicking the switch button:
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.
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’.
- How to Create Toggle Switch by using HTML and CSS ?
- How to set multiple background images using CSS?
- How to apply multiple transform property to an element using CSS ?
- Transition shorthand with multiple properties in CSS?
- CSS | Multiple Columns
- AngularJS | ng-switch Directive
- SVG <switch> Element
- How to change the “checked” background color of toggle switch in Bootstrap 4?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.