Custom CSS

How to extend and override Dustavez's styles while maintaining design consistency.

Dustavez’s styles are built entirely on CSS custom properties, making it straightforward to customize the appearance without modifying component source code.

Overriding tokens

The simplest way to customize Dustavez is to override CSS custom properties in src/styles/tokens.css. All components reference these properties, so changes propagate automatically.

:root {
  /* Change the accent color */
  --accent: #8B5CF6;
  --accent-subtle: #F3F0FF;

  /* Adjust the content width */
  --content-w: 720px;
}

Adding custom styles

For styles beyond token overrides, add a new CSS file and import it in src/styles/global.css:

/* Custom styles for your documentation */
.article img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

@import './reset.css';
@import './tokens.css';
@import './typography.css';
@import './animations.css';
@import './custom.css';

Scoped component styles

Each Astro component uses scoped <style> blocks, meaning styles don’t leak between components. If you need to override a specific component’s styles, use the :global() modifier in a parent component or add styles targeting the component’s class names in your custom CSS file.

CSS architecture

The styles are organized into focused files: