¿Cuál es la mejor implementación para la función de cambio de modo oscuro si estoy usando sass con VueJS?
tengo un proyecto con variables sass para los colores.
/* variables */ /* ------------- */ $bg-main: #f8f8f8; $btn-secondary-c: #f6f6f6; $bg-items: #fff; $text-c-1: #625f6e; $text-c-2: #5e5873; $color-main: #6e6b7b; $shadow-c: rgba(34, 41, 47, 0.05); /* ------- */y tiene su propio archivo y tiene un alcance global para mi aplicación vue
src --components --assets ----_variables.scssy mis componentes Vue se crean en estilo SFC (Componentes de archivo único) así
<template> <main> <div class="content-wrapper"> <ProductsSection/> </div> </main> </template> <script> import ProductsSection from "./ProductsSection.vue" export default { name: 'MainSection', components: { ProductsSection, }, } </script> <style lang="scss" scoped> .content-wrapper{ background-color: $bg-main; } </style>mi pregunta es ¿cuál es la mejor implementación para esta situación?
Realmente me gusta modificar el atributo html:
// index.html <html lang="en" data-theme="dark"> ... </html> // App.vue <template> <button @click="changeTheme('light')">light theme</button> <button @click="changeTheme('dark')">dark theme</button> </template> <script> methods: { changeTheme(newTheme) { document.documentElement.setAttribute('data-theme', newTheme) } } </script> <style lang="scss"> @import "./assets/style.scss"; </style> // style.scss [data-theme="dark"] { --bg-color1: #121416; --font-color: #f4f4f4; } [data-theme="light"] { --bg-color1: #f4f4f4; --font-color: #121416; } ... body { background-color: var(--bg-color1); color: var(--font-color); }Espero que captes la idea