Preview

Here's a preview of your changes to the Theme. When you set the changes, the entire document site will change with the theme.

You can copy automatically generated codes or share your custom theme with anyone.

Colors

secondary
success
warning
error
dark
alert
purple
violet
cyan
lite

Typography

inline codes

Hyperlink Text

Link Component

Our mission is to make cloud computing accessible to everyone. We build products for developers and designers. And those who aspire to become one.

Heading
Heading

Heading

Heading

Heading

Heading

Basic Components

Option 1

Customization

Custom themes is a very simple thing in Geist UI, click change, copy or share.

Colors

basic

accents_1
accents_2
accents_3
accents_4
accents_5
accents_6
accents_7
accents_8
foreground
background

status

success
successLight
successDark
error
errorLight
errorDark
warning
warningLight
warningDark

others

selection
secondary
link
border
code
cyan
purple
alert
violet

Expressiveness

basic

linkStyle
linkHoverStyle
dropdownBoxShadow
shadowSmall
shadowMedium
shadowLarge

Layout

Most layout spacing depends on these variables, unreasonable changes may cause layout imbalance.

basic

pageWidth
pageWidthWithMargin
pageMargin
radius

gaps

gap
gapNegative
gapHalf
gapHalfNegative
gapQuarter
gapQuarterNegative

Theme Codes

This is all your changes, click copy to use it in your own project.