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;
}