Home-theater-designers
Implementar temas oscuros en nuestras aplicaciones web ha pasado de ser un lujo a una necesidad. Los usuarios de dispositivos ahora quieren cambiar de temas claros a temas oscuros y viceversa debido tanto a preferencias estéticas como a razones prácticas.
MUO Vídeo del día DESPLÁCETE PARA CONTINUAR CON EL CONTENIDO
Los temas oscuros ofrecen una paleta de colores más oscura para las interfaces de usuario, lo que hace que la interfaz sea agradable a la vista en entornos con poca luz. Los temas oscuros también ayudan a conservar la duración de la batería en dispositivos con pantallas OLED o AMOLED.
Estas ventajas y más hacen que sea más razonable ofrecer a los usuarios la opción de cambiar a temas oscuros.
Configurar la aplicación de prueba
Para comprender mejor cómo agregar temas oscuros en Vue, necesitará crear una aplicación Vue simple para probar su desarrollo.
Para inicializar la nueva aplicación Vue, ejecute el siguiente comando desde su terminal:
npm init vue@latest
Este comando instalará la última versión del crear-vue paquete, el paquete para inicializar nuevas aplicaciones Vue. También le pedirá que elija entre un conjunto particular de funciones. No es necesario seleccionar ninguno, ya que no es necesario para el alcance de este tutorial.
Agregue la siguiente plantilla al aplicación.vue archivo en su aplicación src directorio:
<!-- App.vue -->
<template>
<div>
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<button class="toggle-button">Toggle Dark Mode</button>
</div>
</template>
El bloque de código anterior describe toda la aplicación en HTML normal, sin secuencias de comandos ni bloques de estilo. Utilizará las clases de la plantilla anterior con fines de estilo. A medida que implementes el tema oscuro, la estructura de la aplicación cambiará.
Diseñar la aplicación de prueba con variables CSS
Variables CSS o propiedades personalizadas de CSS , son valores dinámicos que puedes definir en tus hojas de estilo. Las variables CSS proporcionan herramientas excelentes para la creación de temas porque le permiten definir y administrar valores como colores y tamaños de fuente en un solo lugar.
Utilizará variables CSS y selectores de pseudoclases CSS para agregar un tema normal y uno en modo oscuro para su aplicación Vue. En el src/activos directorio, cree un estilos.css archivo.
Agregue los siguientes estilos a este archivo estilos.css:
/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}
[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}
Estas declaraciones contienen un selector de pseudoclase especial ( :raíz ) y un selector de atributos ( [ tema-datos='verdadero'] ). Los estilos que incluye en un selector raíz apuntan al elemento principal más alto. Actúa como el estilo predeterminado de la página web.
El selector de tema de datos apunta a elementos HTML con ese atributo establecido en verdadero. En este selector de atributos, puede definir estilos para el tema del modo oscuro, para anular el tema claro predeterminado.
Estas declaraciones definen variables CSS utilizando el -- prefijo. Almacenan valores de color que luego puedes usar para diseñar la aplicación para temas claros y oscuros.
hay niveles de memoria caché
Editar el src/main.js archivo e importar el archivo estilos.css:
// main.js
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Ahora agregue algunos estilos más en estilos.css , bajo el tema de datos selector. Algunas de estas definiciones harán referencia a las variables de color utilizando el era palabra clave. Esto le permite cambiar los colores en uso simplemente cambiando el valor de cada variable, como lo hacen los estilos iniciales.
* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
.styled-text {
font-size: 18px;
font-weight: bold;
}
.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
Puede establecer una propiedad de transición en todos los elementos utilizando el selector CSS universal ( * ) para crear una animación fluida al cambiar de modo:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Estas transiciones crean un cambio gradual en el color de fondo y el color del texto cuando se alterna el modo oscuro, lo que brinda un efecto agradable.
Implementando la lógica del modo oscuro
Para implementar el modo de tema oscuro, necesitará lógica de JavaScript para cambiar entre temas claros y oscuros. En tus aplicación.vue archivo, pegue el siguiente bloque de script debajo del bloque de plantilla escrito en API de composición de Vue :
<!-- App.vue -->
<script setup>
import { ref } from 'vue';
// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
El script anterior incluye toda la lógica de JavaScript para cambiar entre los modos claro y oscuro en su aplicación web. El guión comienza con un importar declaración para importar la función de referencia para manejar datos reactivos (datos dinámicos) en Vue.
A continuación, define un obtenerModoOscuroInicial función que recupera la preferencia del modo oscuro del usuario desde el del navegador Almacenamiento local . Declara el modo oscuro ref, inicializándolo con la preferencia del usuario recuperada por la función getInitialDarkMode.
El guardarPreferenciaDarkMode La función actualiza la preferencia del modo oscuro del usuario en el LocalStorage del navegador con el establecer artículo método. Finalmente, el alternar modo oscuro La función permitirá a los usuarios alternar el modo oscuro y actualizar el valor de LocalStorage del navegador para el modo oscuro.
Aplicar el tema del modo oscuro y probar la aplicación
Ahora, en el bloque de plantilla de tu aplicación.vue archivo, agregue el selector de atributos del tema de datos al elemento raíz para aplicar condicionalmente el tema del modo oscuro según su lógica:
<!-- App.vue -->
<template>
<!-- added the data theme attribute selector to apply the dark theme
conditionally -->
<div :data-theme="darkMode">
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<!--added the dark mode switch button-->
<button @click="toggleDarkMode" class="toggle-button">
Toggle Dark Mode
</button>
</div>
</template>
Aquí, estás vinculando el selector de tema de datos a la referencia de modo oscuro. Esto asegura que cuando modo oscuro es cierto, el tema oscuro entrará en vigor. El detector de eventos de clic en el botón alterna entre los modos claro y oscuro.
Ejecute el siguiente comando en su terminal para obtener una vista previa de la aplicación:
npm run dev
Deberías ver una pantalla como esta:
Cuando haces clic en el botón, la aplicación debería alternar entre temas claros y oscuros:
Aprenda a integrar otros paquetes en sus aplicaciones Vue
Las variables CSS y la API LocalStorage facilitan la adición de un tema oscuro a su aplicación Vue.
Hay muchas bibliotecas de terceros y extras de Vue integrados que le permiten personalizar sus aplicaciones web y utilizar funciones adicionales.