Muchos sitios web en Internet están disponibles en varios temas. Se puede obtener cualquier característica creando múltiples hojas de estilo en el código HTML y habilitando una a la vez. Se incluye un archivo CSS en el HTML en la etiqueta <head> usando la etiqueta <link>.
<link id="theme" rel="stylesheet" type="text/css" href="light.css" />
El atributo «href» especifica la ubicación del archivo del archivo CSS. Al modificar esta etiqueta, podemos agregar un nuevo CSS al sitio web. La implementación se puede realizar mediante cualquiera de los siguientes métodos.
Método 1: cuando desee hacer un cambio o un botón de alternancia, para alternar el CSS. Cambia entre los valores dependiendo del valor actualmente activo.
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>
Producción:
Tema de luz: 
al hacer clic en el botón de cambio:
Tema oscuro:
Método 2: cuando desea seleccionar entre varias hojas de estilo. El valor del atributo «href» se pasa a la llamada de función en sí.
Requisito previo: Prepare todas las hojas de estilo en una carpeta.
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>
Producción:
Tema claro: Tema 
oscuro: Tema 
geek: Tema 
acuático:
Nota: Los archivos CSS correspondientes con los nombres requeridos deben estar disponibles y la ruta a ellos debe pasarse usando la función. Los archivos especificados aquí se colocan en la misma carpeta del archivo HTML para que la ruta se asemeje a ‘light.css’.
Publicación traducida automáticamente
Artículo escrito por chitrankmishra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA