Usar temas personalizados en Vuetify y pasar variables de color a los componentes

Hola usuario de nuestro sitio web, hemos encontrado la respuesta a lo que andabas buscando, continúa leyendo y la hallarás un poco más abajo.

Solución:

Editar ^(2018/10/11)

Desde la versión 1.2. podemos habilitar variables CSS
NOTA: supuestamente no funcionará en IE (Edge debería funcionar), y posiblemente algunas versiones de Safari?

De documentos (ver Propiedades personalizadas)

Habilitar customProperties también generará una variable css para cada color de tema, que luego puede usar en los bloques de sus componentes.

Vue.use(Vuetify, 
  options: 
    customProperties: true
  
)

Para valores personalizados, por ejemplo
yourcustomvariablename: '#607D8B'

usar --v-yourcustomvariablename-base (asi que base es predeterminado).

---

---

Respuesta original:

Hay un Feature Request en github: acceda a los colores del tema en los archivos de lápiz óptico

@KaelWD (uno de los desarrolladores) escribió:

Esto es algo que tendrás que implementar tú mismo. Intenté hacer algo similar antes, pero realmente no funciona a nivel de marco.

El problema está etiquetado wontfix

---

_{Editar (2018/10/11)}

También vea este hilo actualizado:
https://github.com/vuetifyjs/vuetify/issues/827 (Solicitud de función: variables css nativas)

Hay una manera de evitar esto utilizando :style attributes. Se puede utilizar para establecer propiedades CSS personalizadas de forma reactiva.

Agregue una propiedad calculada:

computed: {
    cssProps () 
        return 
            '--secondary-color': this.$vuetify.theme.secondary
        
    

Vincular estilo a cssProps:

Luego, a tu estilo:

Adaptado de esta discusión: https://github.com/vuejs/vue/issues/7346

Para cualquiera que se tropiece con esto desde Vuetify V2 en adelante, puede hacer lo siguiente para obtener acceso a las variables de color SCSS.

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div 
  background: map-get($grey, lighten-4);

Todos los colores se pueden encontrar en /node_modules/vuetify/styles/settings/_colors.scss.

Aquí puedes ver las reseñas y valoraciones de los lectores

Recuerda algo, que tienes concesión de comentar si te fue de ayuda.

---

---

Utiliza Nuestro Buscador