Theming
Theming in Vocs is highly configurable. You can either theme your documentation via CSS variables through the configuration (vocs.config.ts
), or via CSS classes.
Configuration
You can modify the default accent color, color scheme, and other variables via the vocs.config.ts
file.
Accent Color
The accent color of your documentation can be modified via the accentColor
property.
import { defineConfig } from 'vocs'
export default defineConfig({
theme: {
accentColor: '#ff0000',
},
title: 'Viem'
})
Light & Dark Accent Colors
You can also chose separate colors for light and dark mode.
import { defineConfig } from 'vocs'
export default defineConfig({
theme: {
accentColor: {
light: 'black',
dark: 'white',
}
},
title: 'Viem'
})
Engrained Accent Colors
You can even get more engrained control of the primitive accent colors.
import { defineConfig } from 'vocs'
export default defineConfig({
theme: {
accentColor: {
backgroundAccent: { light: 'white', dark: 'black' },
backgroundAccentHover: { light: 'whitesmoke', dark: 'gray' },
backgroundAccentText: { light: 'black', dark: 'white' },
textAccent: { light: 'black', dark: 'white' },
}
},
title: 'Viem'
})
Color Scheme
The color scheme is the overall contextual "color mode" for your documentation. It can be either a "light mode" or a "dark mode". By default, Vocs detects the system's preferred color scheme, and adapts to that.
You can specify and force a color scheme for your documentation. If a colorScheme
property
is specified, Vocs will always use that, regardless of the system's preferred
color scheme.
export default defineConfig({
theme: {
colorScheme: 'dark'
},
title: 'Viem'
})
Variables
You can also modify any of the CSS variables used in Vocs. This is useful if you want to have more control over the styling of your documentation.
import { defineConfig } from 'vocs'
export default defineConfig({
theme: {
variables: {
color: {
background: {
light: 'white',
dark: 'black'
}
},
content: {
horizontalPadding: '40px',
verticalPadding: '80px'
}
}
},
title: 'Viem'
})
Class Theming
Every element in Vocs is designed to be customized via CSS classes. You can
override any of the default styles by modifying the .Vocs_{element}
class. If you inspect
your documentation's HTML, you can see the classes that are applied to each element, and it is
just a matter of overriding those classes in your own CSS.
For example, if you want to change the color of the h1
headings in your documentation, you can
override the .Vocs_H1
class.
.Vocs_H1 {
color: red;
}