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 Theming

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 Theming

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.

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.

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.