En este artículo, aprenderemos a crear un tema oscuro usando el control deslizante en CSS. En los sitios web modernos, vemos que es una característica maravillosa para cambiar el tema del sitio web con solo marcar un control deslizante. Para verificar esta característica increíble, vaya al sitio web geeksforgeeks.org donde puede cambiar el tema según sus preferencias. En este artículo, aprenderemos a crear un control deslizante para cambiar el tema del sitio web. Permite a los usuarios personalizar la interfaz del sitio web según sus preferencias es la mejor experiencia de usuario. Aquí vamos a crear un buen control deslizante para cambiar el tema de nuestro sitio web.
Pasos para crear un control deslizante de tema oscuro: estos son los siguientes pasos para crear un control deslizante de tema oscuro.
- Crear una página web usando HTML
- Defina todas las variables de CSS, como el color de fondo, el color de texto principal, el color de texto secundario para el tema predeterminado y el tema oscuro.
- Agregue funcionalidad usando JavaScript para alternar el modo predeterminado al modo oscuro.
Ejemplo: El siguiente ejemplo demuestra cómo crear un tema oscuro usando el control deslizante en CSS.
Paso 1: cree un archivo index.html y agregue el siguiente código html para proporcionar una estructura básica a la página web.
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- Stylesheet link --> <link rel="stylesheet" href="./style.css"> <!-- JavaScript file --> <script defer src="/script.js"></script> <!-- Instead of add defer, embedd javascript file in body tag --> </head> <body> <!--Heading Section--> <header> <nav> <!-- Add your custom menu here and theme slider --> <div class="theme-switch-container"> <label class="theme-slider" for="checkbox"> <input type="checkbox" id="checkbox" /> <div class="round slider"></div> </label> <p>use this slider to change theme</p> </div> </nav> </header> <!-- Main Section --> <main> <h1>GeeksforGeeks</h1> <p> GeeksforGeeks is a best learning plateform for geeks. </p> <p> click below link to open geeksforgeeks website </p> <a href="https://www.geeksforgeeks.org/"> GeeksforGeeks </a> </main> </body> </html>
Paso 2: ahora crearemos un nuevo archivo para agregar estilo al código html anterior.
Nombre de archivo: estilo.css
CSS
/* Default light theme */
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--text-color: #424242;
--background-color: #fff;
--heading-color: #292922;
}
/* Dark theme */
[theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--text-color: #e1e1ff;
--background-color: #161625;
--heading-color: #818cab;
}
/* Adding css variable in our webpage */
body {
background-color: var(--background-color);
color: var(--text-color);
}
h1 {
color: var(--secondary-color);
}
a {
color: var(--primary-color);
}
/* Slider styling */
.theme-switch-container {
display: flex;
align-items: center;
}
.theme-slider {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-slider input {
display: none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked+.slider {
background-color: #66bb6a;
}
input:checked+.slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
Paso 3: Ahora crearemos un archivo javascript y haremos la función toggleSwitch que nos permitirá alternar entre el tema oscuro y el claro.
Nombre de archivo: script.js
Javascript
const toggleSwitch =
document.querySelector('.theme-slider input[type="checkbox"]');
/* Function to change theme */
function switchTheme(e) {
/* Once checkbox is checked default theme change to dark */
if (e.target.checked) {
document.documentElement.setAttribute('theme', 'dark');
}
/* While page in dark mode and checkbox is
checked then theme back to change light*/
else {
document.documentElement.setAttribute('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
Producción:
Publicación traducida automáticamente
Artículo escrito por vikashgautam11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA