CODEWITHSUNDEEP
cssvue.jscolorsthemesvuetify.js
cppstudy
cppstudy

Reputation: 95

Vuetify: defining a base color for all text

I need to define a base color for all text in a Vue + Vuetify project. I've tried modifying the theme's primary color on vuetify.ts:

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#E53935",
      },
    },
  },
})

This, however, only applies for some cases; v-text-input labels and text outside of Vuetify components, among others, won't use this value. Is there any good alternative to explicitly styling it via css?

Upvotes: 0

Views: 340

Answers (1)

Varit J Patel
Varit J Patel

Reputation: 3520

In order to update the variables using css. you need to configure the webpack.config.js as below.

{
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              // This is the path to your variables
              data: "@import '@/styles/variables.scss'"
            },
            // Requires sass-loader@^8.0.0
            options: {
              // This is the path to your variables
              prependData: "@import '@/styles/variables.scss'"
            },
          },
        ],
      },

Inside, styles folder, variables.scss file keeps variables which needs to be override.

There is a list of variables defined in below link i.e global, component-wise, etc

Vuetify CSS Variables

Hope this helps!

Upvotes: 1

Related Questions