预览

这里是你变更主题后的即时预览。此外,当你每次更新主题变量时,整个文档站点也会随之变化。

你可以拷贝自动生成的代码,或是与任何人分享你自定义的主题样式。

色彩

secondary
success
warning
error
dark
alert
purple
violet
cyan
lite

排版

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

基础组件

Option 1

定制化

在 Geist UI 中自定义主题非常简单,点击更改,然后拷贝或是分享。

色彩

基础

accents_1
accents_2
accents_3
accents_4
accents_5
accents_6
accents_7
accents_8
foreground
background

状态

success
successLight
successDark
error
errorLight
errorDark
warning
warningLight
warningDark

其他

selection
secondary
link
border
code
cyan
purple
alert
violet

表现力

基础

linkStyle
linkHoverStyle
dropdownBoxShadow
shadowSmall
shadowMedium
shadowLarge

布局

大多数的布局间距都依赖这些变量,不合理的更改可能会导致布局失衡。

基础

pageWidth
pageWidthWithMargin
pageMargin
radius

间距

gap
gapNegative
gapHalf
gapHalfNegative
gapQuarter
gapQuarterNegative

主题代码

这里是你所有的变更,点击 copy 按钮即可使用在你自己的项目中。