Color Customization

Looking to make your Satellite website yours? You arrived at the right place. This page lists all color customization options Satellite offers.

Each section of a Satellite site can be colored independently, allowing you to theme your website however you want.

Colors can be customized using params.colors configuration options. This page lists all color options. Check out the config example at the bottom for a concrete example.

Primary Colors

Used for the main section of the website, where content is displayed.

Option Description
primary-b1 Main background.
primary-b2 Light card background.
primary-b3 Dark card background.
primary-b4 Table background.
primary-b5 Table alternate background.
primary-a1 Card border.
primary-a2 Content link.
primary-a3 Content link hover.
primary-a4 Content link active.
primary-f4 List markers and table of contents text.
primary-f5 Content text color.
primary-f6 Page link hover.
primary-f7 Page link active.

Secondary Colors

Used for top navigation bar.

Option Description
secondary-b2 Navbar search background.
secondary-b3 Navbar background.
secondary-b4 Navbar hover background.
secondary-b5 Navbar active background.
secondary-a1 Navbar search border.
secondary-f1 Navbar text.
secondary-f9 Navbar search text.

Tertiary Colors

Used for side navigation menu and mobile hamburger navigation menu.

Option Description
tertiary-b5 Side menu background.
tertiary-b6 Side menu hover background.
tertiary-b7 Side menu active background.
tertiary-a3 Side menu indicator.
tertiary-f3 Side menu text.
tertiary-f4 Side menu text hover.
tertiary-f5 Side menu text active.
tertiary-f6 Side menu active title.

Syntax Highlight Colors

Used for code block syntax highlight.

Option Description
syntax-background Syntax highlight background.
syntax-foreground Syntax highlight text.
syntax-comment Commend text highlight.
syntax-special Special text highlight.
syntax-operator Operator text highlight.
syntax-lliteral lliteral text highlight.

Config Example

Below is a configuration example in TOML format.

[params]
[params.colors]
  primary-b1 = "hsl(355, 10%, 98%)"
  primary-b2 = "hsl(355, 15%, 97%)"
  primary-b3 = "hsl(355, 25%, 95%)"
  primary-b4 = "hsl(355, 7.5%, 96%)"
  primary-b5 = "hsl(355, 5%, 94%)"
  primary-a1 = "hsl(355, 20%, 90%)"
  primary-f4 = "hsl(355, 20%, 45%)"
  primary-f5 = "hsl(355, 5%, 40%)"
  primary-f6 = "hsl(355, 25%, 30%)"
  primary-f7 = "hsl(355, 35%, 25%)"
  secondary-b3 = "hsl(355, 95%, 30%)"
  secondary-b4 = "hsl(350, 95%, 28%)"
  secondary-b5 = """
  linear-gradient(
    30deg,
    hsl(0, 80%, 20%),
    hsl(350, 90%, 25%))"""
  secondary-f1 = "hsl(350, 15%, 80%)"
  tertiary-b5 = "hsl(350, 25%, 95%)"
  tertiary-b6 = "hsl(350, 30%, 90%)"
  tertiary-b7 = "hsl(350, 35%, 88%)"
  tertiary-a3 = "hsl(350, 35%, 70%)"
  tertiary-f3 = "hsl(350, 20%, 45%)"
  tertiary-f4 = "hsl(350, 30%, 35%)"
  tertiary-f5 = "hsl(350, 50%, 40%)"
  tertiary-f6 = "hsl(350, 35%, 40%)"
  syntax-background = "hsl(250, 15%, 97%)"
  syntax-foreground = "hsl(250, 35%, 40%)"
  syntax-comment = "hsl(250, 5%, 50%)"
  syntax-special = "hsl(360, 75%, 60%)"
  syntax-operator = "hsl(360, 75%, 60%)"
  syntax-lliteral = "hsl(360, 75%, 60%)"

Note that while the example uses hsl colors, any CSS color format can be used.