vuetify v-switch change inactive color

2 min read 05-10-2024

Customizing Vuetify v-Switch: Changing the Inactive Color

Vuetify's v-switch component provides a visually appealing and convenient way to toggle settings within your application. While the default styling works well, sometimes you might want to personalize the inactive state, giving it a distinct look that aligns with your application's design. This article will guide you through the process of customizing the inactive color of Vuetify's v-switch.

Understanding the Issue

The default v-switch in Vuetify has a blue active state and a light grey inactive state. You might want to change the inactive color to match your brand theme or create a more visually appealing contrast.

The Default Vuetify v-Switch Code

Here's a basic example of a Vuetify v-switch component:

<template>
  <v-switch
    v-model="isActivated"
    label="Activate"
  ></v-switch>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
    };
  },
};
</script>

This code renders a basic switch with the default styling. Let's dive into customizing its appearance.

Customizing the Inactive Color

We can achieve this by leveraging Vuetify's powerful theming system. Here's how:

Create a Custom Theme: Define a custom theme in your vuetify.config.js file:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'light', // Can be 'light' or 'dark'
    themes: {
      light: {
        colors: {
          // Customize your colors here.
          primary: '#1867c0', // Default Vuetify blue
          secondary: '#607d8b', // Example secondary color
          inactiveSwitch: '#ccc', // Custom inactive switch color
        },
      },
    },
  },
})

Apply the Custom Theme: In your v-switch component, add the following to apply the custom theme:

<template>
  <v-switch
    v-model="isActivated"
    label="Activate"
    :theme="customTheme" // Apply the custom theme
  ></v-switch>
</template>

<script>
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default {
  data() {
    return {
      isActivated: false,
      customTheme: 'light', // Name of your custom theme
    };
  },
  created() {
    this.$vuetify = createVuetify({
      components,
      directives,
      theme: {
        defaultTheme: 'light',
        themes: {
          light: {
            colors: {
              primary: '#1867c0',
              secondary: '#607d8b',
              inactiveSwitch: '#ccc',
            },
          },
        },
      },
    })
  },
};
</script>

In this example, we've defined a custom inactiveSwitch color. You can adjust this color value to any hex code or color name that you prefer.

Conclusion

By customizing the inactive color of your Vuetify v-switch components, you can create a more visually appealing and brand-consistent experience for your users. This approach offers a flexible and scalable way to modify Vuetify's default styles to perfectly match your application's design requirements.

Additional Resources

Vuetify Documentation: https://vuetifyjs.com/
Vuetify Theme Customization: https://vuetifyjs.com/en/styles/theming
CSS Color Names: https://www.w3schools.com/cssref/css_colors.asp