Theming
Customize Raven Design to match your brand and design preferences.
Theme System
Raven Design comes with light and dark themes out of the box.
Light Theme
Clean, professional appearance with white backgrounds and dark text.
Light theme is the default. No configuration needed.
Dark Theme
Raven-inspired dark mode with deep blacks and iridescent accents.
Use class="raven-theme-dark" or data-theme="dark"
Theme Toggle
Allow users to switch between light and dark themes.
Add a toggle button to your site
JavaScript for theme switching is included in the Layout component
Custom Themes
Create your own theme by overriding CSS variables.
Override CSS Variables
Define your custom colors before importing Raven Design CSS.
Example variables: --raven-color-primary-500, --raven-color-background-primary, --raven-font-family-base
Custom Theme Class
Create a custom theme with a class.
Available CSS Variables
Raven Design exposes hundreds of CSS Custom Properties.
Color Variables
--raven-color-primary-500--raven-color-secondary-500--raven-color-background-primary--raven-color-surface-primary--raven-color-text-primary--raven-color-text-secondary--raven-color-border-primary
Plus: blue-500, raven-900, gray-100, success-500, warning-500, error-500
Spacing and Typography
--raven-spacing-xs,--raven-spacing-sm,--raven-spacing-md,--raven-spacing-lg,--raven-spacing-xl--raven-font-family-base,--raven-font-size-base,--raven-font-weight-bold--raven-radius-sm,--raven-radius-md,--raven-radius-lg,--raven-radius-full