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.