Styles, fonts, and CSS

Customization

Change the look and feel of your documentation by changing colors, fonts, and more.

Colors

The Stainless Docs Platform uses --stl-color variables to define the colors used on your site. You can override these with your own values in your theme.css file by setting new values on the :root.

Use the light-dark() CSS function in order to specify different values for light mode and dark mode.

Accent color

The accent color is used for theming brightly colored elements on your site such as links, buttons, and other UI details.

Start by changing the base --stl-color-accent:

:root {
  --stl-color-accent: light-dark(#155dfc, #2b7fff);
  /* Green accent color */
  --stl-color-accent: light-dark(#1eb281, #11cc8d);
}

By default, text that appears on an accent-colored background (such as on buttons) is white. To change this default, set --stl-color-accent-inverse-foreground:

:root {
  --stl-color-accent: light-dark(#1eb281, #11cc8d);
  /* Use black text against an accent-colored background in dark mode */
  --stl-color-accent-inverse-foreground: light-dark(#ffffff, #000000);

If your accent color provides insufficient contrast against the background when used to color text, consider also overriding --stl-color-accent-foreground to specify a different color to use for accent-colored text:

:root {
  --stl-color-accent: light-dark(#1eb281, #11cc8d);
  /* Use a darker green for text against a light background
   * in order to ensure sufficient contrast */
  --stl-color-accent-foreground: light-dark(#008659, #11cc8d);
}

Make sure everything looks correct in both light and dark mode when you change these colors.

Background and foreground

The inputs for the base palette consist of a background color for the page and a foreground color used for text:

:root {
  --stl-color-background: light-dark(#ffffff, #0a0a0a);
  --stl-color-foreground: light-dark(#262626, #f5f5f5);
}

Light and dark mode

Specify different colors for light and dark mode using the light-dark() CSS function.

:root {
  --stl-color-background: light-dark(#ffffff, #0a0a0a);
}

Additionally, you can target the data-theme attribute on the :root element to apply styles conditionally based on the page’s current theme:

:root[data-theme="dark"] {
  /* Dark mode specific styles */
}

Always-dark or always-light sections

You can use the color-scheme CSS property to override the color scheme for a specific section of your page. For example, to keep the page header in dark mode even when the rest of the page is in light mode, you can add the following rule:

header {
  color-scheme: dark;
}

Advanced overrides

Base palette

The background and foreground colors are blended to create a full palette of light/dark shades that are used throughout the site. By default, these shades will adapt to whatever background and foreground colors you’ve configured. For advanced customization, you can override any of the default shades:

Base palette defaults

These variables blend the foreground color using CSS relative colors, abbreviated here as comments for readability.

:root {
  /* Text colors */
  --stl-color-foreground-reduced: /* foreground at 80% opacity */;
  --stl-color-foreground-muted: /* foreground at 40% opacity */;
  /* Background shades */
  --stl-color-muted-background: light-dark(/* foreground 8% */, /* foreground 16% */);
  --stl-color-faint-background: light-dark(/* foreground 4% */, /* foreground 8% */);
  --stl-color-ui-background: light-dark(var(--stl-color-background), /* foreground 4% */);
  /* Border colors */
  --stl-color-border: /* foreground at 16% opacity */;
  --stl-color-border-faint: /* foreground at 8% opacity */;
  --stl-color-border-strong: /* foreground at 40% opacity */;
  /* “Inverted” elements like buttons */
  --stl-color-inverse-background: var(--stl-color-foreground);
  --stl-color-inverse-foreground: var(--stl-color-background);
}

Color palettes

The named color palettes accent, red, green, blue, yellow, orange, purple, cyan, and pink can be overridden with new shades:

:root {
  --stl-color-accent: light-dark(#155dfc, #2b7fff);
  --stl-color-red: light-dark(#d01e22, #e34041);
  --stl-color-green: light-dark(#16a34a, #22c55e);
  --stl-color-blue: light-dark(#155dfc, #2b7fff);
  --stl-color-yellow: light-dark(#ca8a04, #eab308);
  --stl-color-orange: light-dark(#ea580c, #f97316);
  --stl-color-purple: light-dark(#9333ea, #a855f7);
  --stl-color-cyan: light-dark(#0891b2, #06b6d4);
  --stl-color-pink: light-dark(#ec4899, #ec4899);
}

Each of these palettes—as with accent above—has additional variables to ensure legible text contrast. For example, when overriding --stl-color-red, you can configure foreground and background colors as needed:

:root {
  --stl-color-red: light-dark(#d01e22, #e34041);

  /* Text color should be legible against a plain --stl-color-background */
  --stl-color-red-foreground: var(--stl-color-red);

  /* red background behind text (e.g. buttons) */
  /* red-inverse-foreground text should be legible against a red-inverse-background */
  --stl-color-red-inverse-background: var(--stl-color-red);
  --stl-color-red-inverse-foreground: rgb(255 255 255);
}

Typography

Your site uses the following CSS variables for fonts and typography which you can override with your own values:

:root {
  --stl-typography-font: 'Geist', system-ui, sans-serif;
  --stl-typography-font-heading: 'Geist', system-ui, sans-serif;
  --stl-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
  --stl-typography-line-height: 1.5;
  --stl-typography-line-height-heading: 1.2;

  --stl-typography-text-body: var(--stl-typography-scale-base);
  --stl-typography-text-body-sm: var(--stl-typography-scale-sm);
  --stl-typography-text-body-xs: var(--stl-typography-scale-xs);

  --stl-typography-text-code: var(--stl-typography-scale-sm);
  --stl-typography-text-code-sm: var(--stl-typography-scale-xs);

  --stl-typography-text-h1: var(--stl-typography-scale-5xl);
  --stl-typography-text-h2: var(--stl-typography-scale-4xl);
  --stl-typography-text-h3: var(--stl-typography-scale-3xl);
  --stl-typography-text-h4: var(--stl-typography-scale-2xl);
  --stl-typography-text-h5: var(--stl-typography-scale-xl);

  --stl-typography-scale-xs: 12px;
  --stl-typography-scale-sm: 14px;
  --stl-typography-scale-base: 16px;
  --stl-typography-scale-lg: 18px;
  --stl-typography-scale-xl: 20px;
  --stl-typography-scale-2xl: 24px;
  --stl-typography-scale-3xl: 29px;
  --stl-typography-scale-4xl: 35px;
  --stl-typography-scale-5xl: 42px;
  --stl-typography-scale-6xl: 64px;
}

Custom fonts

To use your own custom fonts, override the --stl-typography-font and --stl-typography-font-mono variables:

:root {
  --stl-typography-font: 'Your Custom Font', system-ui, sans-serif;
  --stl-typography-font-mono: 'Your Custom Mono Font', ui-monospace, monospace;
}

Add Google fonts

To use Google fonts, import them into your theme.css file:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Source+Code+Pro:wght@400;500&display=swap");

:root {
  --stl-typography-font: 'Inter', system-ui, sans-serif;
  --stl-typography-font-mono: 'Source Code Pro', ui-monospace, monospace;
}

Add Fontsource fonts

To use Fontsource, add their @font-face declarations to theme.css:

/* montserrat-latin-wght-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(@fontsource/montserrat/files/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* martian-mono-latin-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/martian-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

Add custom CSS

Refer to Starlight’s documentation for adding custom CSS to your site.