主题构建器

实时设计你的主题

编辑每一个颜色与尺寸 token，桌面客户端的模拟界面随输入即时更新。右键预览中的任意区块，即可查看它由哪些 token 绘制。

浏览主题分享到主题市场

请在更宽的屏幕上打开

主题构建器需要同时容纳编辑器与客户端预览。请在桌面浏览器中打开本页面。

客户端

当前桌面客户端 —— 导出 FluxThemeJson

主题名称作者

基底主题（extends）

编辑层

形状预设

颜色40

backgroundcolors.background

继承默认 · #1c1c1eff

foregroundcolors.foreground

继承默认 · #f5f5f7ff

surfacecolors.surface

继承默认 · #2c2c2eff

surfaceForegroundcolors.surfaceForeground

继承默认 · #f5f5f7ff

primarycolors.primary

继承默认 · #3b82f6ff

primaryForegroundcolors.primaryForeground

继承默认 · #ffffffff

secondarycolors.secondary

继承默认 · #3a3a3cff

secondaryForegroundcolors.secondaryForeground

继承默认 · #f5f5f7ff

mutedcolors.muted

继承默认 · #3a3a3cff

mutedForegroundcolors.mutedForeground

继承默认 · #a1a1a6ff

accentcolors.accent

继承默认 · #3b82f62e

accentForegroundcolors.accentForeground

继承默认 · #3b82f6ff

destructivecolors.destructive

继承默认 · #ef4444ff

destructiveForegroundcolors.destructiveForeground

继承默认 · #ffffffff

bordercolors.border

继承默认 · #48484aff

inputcolors.input

继承默认 · #48484aff

ringcolors.ring

继承默认 · #3b82f6ff

successcolors.success

继承默认 · #30d158ff

warningcolors.warning

继承默认 · #ffb340ff

infocolors.info

继承默认 · #3b82f6ff

textTertiarycolors.textTertiary

继承默认 · #757578ff

hairlinecolors.hairline

继承默认 · #3e3e40ff

rowHovercolors.rowHover

继承默认 · #343436ff

chromecolors.chrome

继承默认 · #222224ff

navHovercolors.navHover

继承默认 · #2e2e30ff

navSelectedcolors.navSelected

继承默认 · #38383aff

navSelectedForegroundcolors.navSelectedForeground

继承默认 · #f5f5f7ff

navSelectedIconcolors.navSelectedIcon

继承默认 · #3b82f6ff

accentTextcolors.accentText

继承默认 · #5392f7ff

caretcolors.caret

继承默认 · #5392f7ff

textSelectioncolors.textSelection

继承默认 · #3b82f64d

dragBordercolors.dragBorder

继承默认 · #3b82f6a6

dropTargetcolors.dropTarget

继承默认 · #3b82f633

statusDownloadingcolors.statusDownloading

继承默认 · #3b82f6ff

statusCompletedcolors.statusCompleted

继承默认 · #757578ff

statusFailedcolors.statusFailed

继承默认 · #ef4444ff

statusPausedcolors.statusPaused

继承默认 · #a1a1a6ff

statusQueuedcolors.statusQueued

继承默认 · #757578ff

progressTrackcolors.progressTrack

继承默认 · #a1a1a629

progressFillcolors.progressFill

继承默认 · #3b82f6ff

圆角06

noneradius.none

继承默认 · 0

smradius.sm

继承默认 · 3

mdradius.md

继承默认 · 6

lgradius.lg

继承默认 · 8

xlradius.xl

继承默认 · 12

fullradius.full

继承默认 · 9999

间距07

xxsspacing.xxs

继承默认 · 2

xsspacing.xs

继承默认 · 4

smspacing.sm

继承默认 · 8

mdspacing.md

继承默认 · 12

lgspacing.lg

继承默认 · 16

xlspacing.xl

继承默认 · 24

xxlspacing.xxl

继承默认 · 32

字体排印26

sanstypography.sans

继承默认 · system-ui

monotypography.mono

继承默认 · monospace

xs.sizetypography.xs.size

继承默认 · 12

xs.lineHeighttypography.xs.lineHeight

继承默认 · 16

xs.weighttypography.xs.weight

继承默认 · 400

sm.sizetypography.sm.size

继承默认 · 13

sm.lineHeighttypography.sm.lineHeight

继承默认 · 18

sm.weighttypography.sm.weight

继承默认 · 400

md.sizetypography.md.size

继承默认 · 16

md.lineHeighttypography.md.lineHeight

继承默认 · 24

md.weighttypography.md.weight

继承默认 · 400

lg.sizetypography.lg.size

继承默认 · 18

lg.lineHeighttypography.lg.lineHeight

继承默认 · 28

lg.weighttypography.lg.weight

继承默认 · 400

xl.sizetypography.xl.size

继承默认 · 20

xl.lineHeighttypography.xl.lineHeight

继承默认 · 28

xl.weighttypography.xl.weight

继承默认 · 400

monoMd.sizetypography.monoMd.size

继承默认 · 13

monoMd.lineHeighttypography.monoMd.lineHeight

继承默认 · 20

monoMd.weighttypography.monoMd.weight

继承默认 · 400

caption.sizetypography.caption.size

继承默认 · 11

caption.lineHeighttypography.caption.lineHeight

继承默认 · 14

caption.weighttypography.caption.weight

继承默认 · 400

title.sizetypography.title.size

继承默认 · 15

title.lineHeighttypography.title.lineHeight

继承默认 · 20

title.weighttypography.title.weight

继承默认 · 600

阴影03

smshadow.sm

继承默认 · [{"x":0,"y":1,"blur":2,"spread":0,"color":"#0000002e","inset":false}]

mdshadow.md

继承默认 · [{"x":0,"y":4,"blur":8,"spread":-2,"color":"#0000002e","inset":false}]

lgshadow.lg

继承默认 · [{"x":0,"y":12,"blur":24,"spread":-4,"color":"#0000002e","inset":false}]

描边02

thinstroke.thin

继承默认 · 1

strongstroke.strong

继承默认 · 2

焦点环02

widthfocusRing.width

继承默认 · 2

offsetfocusRing.offset

继承默认 · 1

图标03

smicon.sm

继承默认 · 12

mdicon.md

继承默认 · 14

lgicon.lg

继承默认 · 16

密度10

controldensity.control

继承默认 · 28

navRowdensity.navRow

继承默认 · 28

toolbarButtondensity.toolbarButton

继承默认 · 28

titleBardensity.titleBar

继承默认 · 40

statusBardensity.statusBar

继承默认 · 28

statusControldensity.statusControl

继承默认 · 22

sectionHeaderdensity.sectionHeader

继承默认 · 24

taskRowdensity.taskRow

继承默认 · 44

taskRowCompactdensity.taskRowCompact

继承默认 · 30

checkMarkdensity.checkMark

继承默认 · 16

组件13

button.radiuscomponents.button.radius

继承默认 · 6

input.radiuscomponents.input.radius

只读

跟随 radius.md / radius.lg（组件库限制） · 6

dialog.radiuscomponents.dialog.radius

只读

跟随 radius.md / radius.lg（组件库限制） · 8

card.radiuscomponents.card.radius

继承默认 · 8

badge.radiuscomponents.badge.radius

继承默认 · 9999

navItem.radiuscomponents.navItem.radius

继承默认 · 6

progress.radiuscomponents.progress.radius

继承默认 · 9999

progress.heightcomponents.progress.height

继承默认 · 4

taskRow.radiuscomponents.taskRow.radius

继承默认 · 6

checkbox.radiuscomponents.checkbox.radius

继承默认 · 4

tab.radiuscomponents.tab.radius

继承默认 · 6

menu.radiuscomponents.menu.radius

只读

跟随 radius.md / radius.lg（组件库限制） · 6

tooltip.radiuscomponents.tooltip.radius

只读

跟随 radius.md / radius.lg（组件库限制） · 6

fig. gpui · dark · 共享右键任意 UI 区块查看 token

文件任务视图工具帮助

搜索任务...Ctrl+F

文件名进度状态

ubuntu-24.04.1-desktop-amd64.iso程序 · releases.ubuntu.com

62%11.4 MB/s · 3 分钟3.5 GB / 5.7 GB · 16 活跃连接

Big.Buck.Bunny.2160p.mkv视频 · download.blender.org

35%1.4 MB/s · 16 分钟752.6 MB / 2.1 GB · 8 活跃连接

annual-report-2025.pdf文档 · example.com

48%已暂停8.8 MB / 18.4 MB

lofi-mix-vol3.flac音频 · archive.org

12%失败连接超时

wallpaper-pack-4k.zip压缩包 · unsplash.com

0%等待中排队 #1

node-v22.9.0-x64.msi程序 · nodejs.org已完成

sunset-coast.png图片 · images.example.com已完成

12.8 MB/s0 B/s无限制无限制自动（推荐）剩余 128 GB

主题名称作者

表面层04

Background主窗口

colors.surface.background

255

Surface 1主窗口

colors.surface.surface1

255

Surface 2主窗口

colors.surface.surface2

255

Surface 3主窗口

colors.surface.surface3

255

交互态03

Hover主窗口

colors.element.hover

255

Selected主窗口

colors.element.selected

255

Active主窗口

colors.element.active

46

文字04

Primary主窗口

colors.text.primary

255

Secondary主窗口

colors.text.secondary

255

Muted主窗口

colors.text.muted

255

Disabled主窗口

colors.text.disabled

128

边框02

Default主窗口

colors.border.default

255

Focused主窗口

colors.border.focused

255

强调色04

Color主窗口

colors.accent.color

255

Hover主窗口

colors.accent.hover

255

Background主窗口

colors.accent.background

46

Foreground主窗口

colors.accent.foreground

255

输入框04

Background主窗口

colors.input.background

255

Border主窗口

colors.input.border

255

Focus Border主窗口

colors.input.focusBorder

255

Focus Background主窗口

colors.input.focusBackground

20

对话框02

Background设置页

colors.dialog.background

255

Barrier设置页

colors.dialog.barrier

64

开关02

Track设置页

colors.switch.track

255

Thumb设置页

colors.switch.thumb

255

语义状态03

Success主窗口

colors.status.success

255

Warning主窗口

colors.status.warning

255

Error主窗口

colors.status.error

255

阴影01

Shadow主窗口

colors.shadow

255

分段调色板16

Segment 1主窗口

colors.segmentPalette.0

255

Segment 2主窗口

colors.segmentPalette.1

255

Segment 3主窗口

colors.segmentPalette.2

255

Segment 4主窗口

colors.segmentPalette.3

255

Segment 5主窗口

colors.segmentPalette.4

255

Segment 6主窗口

colors.segmentPalette.5

255

Segment 7主窗口

colors.segmentPalette.6

255

Segment 8主窗口

colors.segmentPalette.7

255

Segment 9主窗口

colors.segmentPalette.8

255

Segment 10主窗口

colors.segmentPalette.9

255

Segment 11主窗口

colors.segmentPalette.10

255

Segment 12主窗口

colors.segmentPalette.11

255

Segment 13主窗口

colors.segmentPalette.12

255

Segment 14主窗口

colors.segmentPalette.13

255

Segment 15主窗口

colors.segmentPalette.14

255

Segment 16主窗口

colors.segmentPalette.15

255

圆角13

Progress设置页

metrics.radius.progress

px

Extra Small设置页

metrics.radius.xs

px

Segment Cell主窗口

metrics.radius.segmentCell

px

Small设置页

metrics.radius.sm

px

Medium主窗口

metrics.radius.md

px

Input主窗口

metrics.radius.input

px

Card主窗口

metrics.radius.card

px

Icon Tile主窗口

metrics.radius.iconTile

px

Dialog设置页

metrics.radius.dialog

px

Chip Large设置页

metrics.radius.chipLg

px

Chip Extra Large设置页

metrics.radius.chipXl

px

Badge主窗口

metrics.radius.badge

px

Pill设置页

metrics.radius.pill

px

间距05

Extra Small设置页

metrics.spacing.xs

px

Small设置页

metrics.spacing.sm

px

Medium设置页

metrics.spacing.md

px

Large设置页

metrics.spacing.lg

px

Extra Large设置页

metrics.spacing.xl

px

描边02

Thin设置页

metrics.stroke.thin

px

Thick设置页

metrics.stroke.thick

px

按钮03

Height Small设置页

metrics.button.heightSm

px

Height Medium设置页

metrics.button.heightMd

px

Height Large设置页

metrics.button.heightLg

px

透明度22

Subtle设置页

metrics.alpha.subtle

α

Soft设置页

metrics.alpha.soft

α

Muted设置页

metrics.alpha.muted

α

Muted Strong设置页

metrics.alpha.mutedStrong

α

Active设置页

metrics.alpha.active

α

Selected Border设置页

metrics.alpha.selectedBorder

α

Scrim设置页

metrics.alpha.scrim

α

Border设置页

metrics.alpha.border

α

Border Strong设置页

metrics.alpha.borderStrong

α

Disabled设置页

metrics.alpha.disabled

α

Glass设置页

metrics.alpha.glass

α

Focus Ring设置页

metrics.alpha.focusRing

α

Shadow Strong主窗口

metrics.alpha.shadowStrong

α

Shadow Soft设置页

metrics.alpha.shadowSoft

α

Shadow Faint设置页

metrics.alpha.shadowFaint

α

Faint设置页

metrics.alpha.faint

α

Text Selection设置页

metrics.alpha.textSelection

α

Border Subtle设置页

metrics.alpha.borderSubtle

α

Border Faint设置页

metrics.alpha.borderFaint

α

Border Medium设置页

metrics.alpha.borderMedium

α

Emphasis设置页

metrics.alpha.emphasis

α

Glass Subtle设置页

metrics.alpha.glassSubtle

α

fig. dark右键任意 UI 区块查看 token

FluxDown

搜索任务

全部5

暂停

新建下载

名称

进度

下载中12.8 MB/sdark

桌面端兼容格式

导出的 JSON 与客户端主题结构一致（appearance + colors + segmentPalette + metrics），可直接在「设置 → 外观」中导入。

Token 检视器

右键任意 UI 区块查看 token