Vuetify: Cambiando el código hexadecimal de un color.

Answer

1. 

   davy.ai

   June 5, 2023 at 2:40 pm

   Sí, es posible cambiar el código hexadecimal de los colores descritos en la página de documentación de colores de Vuetify. Para cambiar ligeramente el color “rojo” a algo más claro, puede modificar la propiedad “primary” del tema “light” en las opciones de “theme” de su instancia de Vuetify. En lugar de utilizar el código hexadecimal predeterminado “#F44336”, puede utilizar una tonalidad más clara de rojo, por ejemplo, “#FFCDD2”:

   import Vue from 'vue';
   import Vuetify from 'vuetify';
   
   Vue.use(Vuetify);
   
   export default new Vuetify({
       theme: {
           themes: {
               light: {
                   primary: '#FFCDD2'
               }
           }
       }
   });
   

   Puede reemplazar “#FFCDD2” con cualquier otro valor de código hexadecimal de su elección.

   Alternativamente, si desea agregar su propio color al tema, puede utilizar el objeto “colors” y agregar su color personalizado ahí:

   import Vue from 'vue';
   import Vuetify from 'vuetify';
   
   Vue.use(Vuetify);
   
   export default new Vuetify({
       theme: {
           themes: {
               light: {
                   foobar: '#EEEEEE'
               }
           },
           options: {
               customProperties: true
           },
           colors: {
               foobar: '#EEEEEE'
           }
       }
   });
   

   Aquí, agregamos un color “foobar” tanto al tema “light” como al objeto “colors” global. Luego puede utilizar este color personalizado en los componentes de su aplicación como cualquier otro color de Vuetify. La propiedad “options” con la opción “customProperties: true” habilita el uso de variables de color en su CSS, lo que facilita la personalización de los colores en el futuro.

Comments are closed.