CSS Variables

The default theme's CSS can be customized using CSS variables. You can override these variables in your own CSS file to change the appearance of your site. To see how to add your own CSS file, refer to the Custom Themes guide.

The following CSS variables are available:

Typography

Variable Name	Description	Default Value
`--sb-font-headings`	Font family for headings	`"Lexend Variable", Segoe UI, Roboto, sans-serif`
`--sb-font-text`	Font family for regular text	`"Inter Variable", Segoe UI, Roboto, sans-serif`
`--sb-font-mono`	Font family for code and monospaced text	`"JetBrains Mono Variable", Menlo, Consolas, monospace`

Typography Sizes

Variable Name	Description	Default Value
`--sb-header-height`	Height of the header	`3.5rem`

Typography Colors

Variable Name	Description	Default Light Value	Default Dark Value
`--sb-heading-color`	Color for headings	`hsl(240, 6%, 10%)`	`hsl(0, 0%, 100%)`
`--sb-text-color`	Color for regular text	`hsl(240, 5%, 26%)`	`hsl(240, 5%, 85%)`
`--sb-link-underline-color`	Color for link underlines	`hsl(199, 95%, 74%)`	`hsl(201, 90%, 27%)`
`--sb-active-link-color`	Color for active links	`hsl(200, 98%, 39%)`	`hsl(199, 95%, 74%)`
`--sb-code-text-color`	Color for inline code text	`hsl(201, 90%, 27%)`	`hsl(199, 95%, 74%)`
`--sb-highlight-background-color`	Background color for highlighted text	`hsl(204, 94%, 95%)`	`hsl(202, 80%, 14%)`
`--sb-decoration-color`	Color for decorative elements	`hsl(240, 5%, 54%)`	`hsl(240, 5%, 54%)`

Layout

Variable Name	Description	Default Value
`--sb-background-color`	Background color for the entire page	`hsl(0, 0%, 100%)` (light), `hsl(240, 6%, 10%)` (dark)
`--sb-border-radius`	Border radius for elements like buttons and cards	`0.375rem`
`--sb-transition-timing`	Timing function for transitions and animations	`cubic-bezier(0.4, 0, 0.2, 1)`
`--sb-tint-color`	Primary tint color used in various elements	`white` (light), `black` (dark)
`--sb-tint-color-opposite`	Opposite of the primary tint color	`black` (light), `white` (dark)
`--sb-code-background-color`	Background color for code blocks and inline code	`hsl(0, 0%, 98%)` (light), `hsl(240, 4%, 16%)` (dark)
`--sb-hero-background`	Background gradient for hero sections	`linear-gradient(-45deg, hsl(200, 98%, 39%) 50%, hsl(199, 95%, 74%) 50%)`
`--sb-hero-filter`	Filter applied to hero background	`blur(68px)`
`--sb-hero-name-background`	Background gradient for hero name text	`linear-gradient(-20deg, hsl(200, 98%, 39%) 30%, hsl(199, 95%, 74%))`
`--bprogress-color`	Color for the progress bar shown during page navigation	`var(--sb-active-link-color)`

Callout Boxes

Variable Name	Description	Default Light Value	Default Dark Value
`--sb-info-background-color`	Background color for info callout boxes	`hsl(214, 100%, 97%)`	`hsl(225, 41%, 17%)`
`--sb-info-text-color`	Text color for info callout boxes	`hsl(226, 71%, 40%)`	`hsl(213, 94%, 68%)`
`--sb-tip-background-color`	Background color for tip callout boxes	`hsl(138, 76%, 97%)`	`hsl(149, 36%, 14%)`
`--sb-tip-text-color`	Text color for tip callout boxes	`hsl(143, 64%, 24%)`	`hsl(142, 52%, 51%)`
`--sb-important-background-color`	Background color for important callout boxes	`hsl(250, 100%, 98%)`	`hsl(263, 44%, 17%)`
`--sb-important-text-color`	Text color for important callout boxes	`hsl(263, 69%, 42%)`	`hsl(255, 92%, 76%)`
`--sb-warning-background-color`	Background color for warning callout boxes	`hsl(48, 100%, 96%)`	`hsl(13, 26%, 13%)`
`--sb-warning-text-color`	Text color for warning callout boxes	`hsl(23, 61%, 38%)`	`hsl(43, 74%, 50%)`
`--sb-danger-background-color`	Background color for danger callout boxes	`hsl(0, 86%, 97%)`	`hsl(356, 38%, 16%)`
`--sb-danger-text-color`	Text color for danger callout boxes	`hsl(0, 70%, 35%)`	`hsl(0, 91%, 71%)`

Last updated: 10/7/25, 7:03 PM

Edit this page on GitHub