Copy page Copied! Copy failed 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:
Variable Name Description Default Value --sb-font-headingsFont family for headings "Lexend Variable", Segoe UI, Roboto, sans-serif--sb-font-textFont family for regular text "Inter Variable", Segoe UI, Roboto, sans-serif--sb-font-monoFont family for code and monospaced text "JetBrains Mono Variable", Menlo, Consolas, monospace
Variable Name Description Default Value --sb-header-heightHeight of the header 3.5rem
Variable Name Description Default Light Value Default Dark Value --sb-heading-colorColor for headings hsl(240, 6%, 10%)hsl(0, 0%, 100%)--sb-text-colorColor for regular text hsl(240, 5%, 26%)hsl(240, 5%, 85%)--sb-link-underline-colorColor for link underlines hsl(199, 95%, 74%)hsl(201, 90%, 27%)--sb-active-link-colorColor for active links hsl(200, 98%, 39%)hsl(199, 95%, 74%)--sb-code-text-colorColor for inline code text hsl(201, 90%, 27%)hsl(199, 95%, 74%)--sb-highlight-background-colorBackground color for highlighted text hsl(204, 94%, 95%)hsl(202, 80%, 14%)--sb-decoration-colorColor for decorative elements hsl(240, 5%, 54%)hsl(240, 5%, 54%)
Variable Name Description Default Value --sb-background-colorBackground color for the entire page hsl(0, 0%, 100%) (light), hsl(240, 6%, 10%) (dark)--sb-border-radiusBorder radius for elements like buttons and cards 0.375rem--sb-transition-timingTiming function for transitions and animations cubic-bezier(0.4, 0, 0.2, 1)--sb-tint-colorPrimary tint color used in various elements white (light), black (dark)--sb-tint-color-oppositeOpposite of the primary tint color black (light), white (dark)--sb-code-background-colorBackground color for code blocks and inline code hsl(0, 0%, 98%) (light), hsl(240, 4%, 16%) (dark)--sb-hero-backgroundBackground gradient for hero sections linear-gradient(-45deg, hsl(200, 98%, 39%) 50%, hsl(199, 95%, 74%) 50%)--sb-hero-filterFilter applied to hero background blur(68px)--sb-hero-name-backgroundBackground gradient for hero name text linear-gradient(-20deg, hsl(200, 98%, 39%) 30%, hsl(199, 95%, 74%))--bprogress-colorColor for the progress bar shown during page navigation var(--sb-active-link-color)
Variable Name Description Default Light Value Default Dark Value --sb-info-background-colorBackground color for info callout boxes hsl(214, 100%, 97%)hsl(225, 41%, 17%)--sb-info-text-colorText color for info callout boxes hsl(226, 71%, 40%)hsl(213, 94%, 68%)--sb-tip-background-colorBackground color for tip callout boxes hsl(138, 76%, 97%)hsl(149, 36%, 14%)--sb-tip-text-colorText color for tip callout boxes hsl(143, 64%, 24%)hsl(142, 52%, 51%)--sb-important-background-colorBackground color for important callout boxes hsl(250, 100%, 98%)hsl(263, 44%, 17%)--sb-important-text-colorText color for important callout boxes hsl(263, 69%, 42%)hsl(255, 92%, 76%)--sb-warning-background-colorBackground color for warning callout boxes hsl(48, 100%, 96%)hsl(13, 26%, 13%)--sb-warning-text-colorText color for warning callout boxes hsl(23, 61%, 38%)hsl(43, 74%, 50%)--sb-danger-background-colorBackground color for danger callout boxes hsl(0, 86%, 97%)hsl(356, 38%, 16%)--sb-danger-text-colorText color for danger callout boxes hsl(0, 70%, 35%)hsl(0, 91%, 71%)
Last updated: 10/7/25, 7:03 PM