Theming

vue-styled-components provides a ThemeProvider component for theming your components. This component passes a theme to all its descendant Vue components via props. All styled components within the render tree will have access to the provided theme.

Basic

The ThemeProvider wraps its children components and passes a theme object to them. All styled components within the ThemeProvider's scope can access this theme object.

In this example, the StyledLink component uses the primary color from the provided theme.

Reactive

You can also make your theme reactive by using Vue's reactivity system. This allows you to dynamically change the theme and see the updates reflected in your styled components.

Function Theme

You may need to use function themes, instead of object themes. For example, you may need to reverse colors, or change the color based on other conditions.

Using Theme in Non-Styled Components

By defining themes within the ThemeProvider, you ensure that all components have access to the same theme styles, achieving a globally consistent visual appearance. Even non-styled components in Vue can access the theme by injecting $theme and use properties defined in the theme for their styles.

Getting Theme by Hook

Yet you can also get theme by using useTheme hook, but it must be used within a ThemeProvider.

The usage see useTheme

How to Get Theme Hints with TypeScript

When using styled components, you might reference your theme context like ${props => props.theme.primary}. To enable TypeScript to provide autocomplete hints and type checking for your theme properties, you can extend the DefaultTheme interface.

// xxx.d.ts
import '@vue-styled-components/core'

export {}

interface Theme {
  primary: string
}

declare module '@vue-styled-components/core' {
  export interface DefaultTheme extends Theme {}
}

By defining and extending the Theme interface, TypeScript will recognize your custom theme properties, providing hints when you use ${props => props.theme.primary} in your styled components.