Help:取色

本文介绍本站常用的css变量，附使用方法。

常用颜色变量

文字

属性	描述
--color-base	基础文字颜色（例如，正文）
--color-emphasized	强调文字颜色（例如，标题）
--color-subtle	微妙文字颜色（例如，说明文字）

背景

属性	描述
--omw-surface-background-color	基础背景色
--omw-surface-background-color--hover	悬停时背景色（rgba(0, 0, 0, 0.07)）
--omw-surface-background-color--active	激活时背景色（rgba(0, 0, 0, 0.09)）
--omw-surface-border-color	边框颜色（rgba(0, 0, 0, 0.05)）
--omw-surface-box-shadow	盒子阴影（0 3px 6px rgba(0, 0, 0, 0.04)）

特殊值

属性	描述
--omw-pink	OtomadWiki粉色（#f06e8e）
--omw-blue	OtomadWiki蓝色（#00aeec）

应用颜色变量

在编写css时，使用形如var(--example-variable)的写法替换原有的color:取值。

常见的旧版写法: rgba(255,255,255,1) 或 #FFFFFF

颜色展示

color list

颜色展示

var(--color-base)

var(--color-base-fixed)

var(--color-base--hover)

var(--color-emphasized)

var(--color-subtle)

var(--color-placeholder)

var(--color-disabled)

var(--color-disabled-emphasized)

var(--color-inverted)

var(--color-inverted-fixed)

var(--color-progressive)

var(--color-progressive--hover)

var(--color-progressive--active)

var(--color-progressive--focus)

var(--color-destructive)

var(--color-destructive--hover)

var(--color-destructive--active)

var(--color-destructive--focus)

var(--color-visited)

var(--color-visited--hover)

var(--color-visited--active)

var(--color-error)

var(--color-error--hover)

var(--color-error--active)

var(--color-warning)

var(--color-success)

var(--color-icon-error)

var(--color-icon-warning)

var(--color-icon-success)

var(--color-icon-notice)

var(--color-content-added)

var(--color-content-removed)

var(--background-color-base)

var(--background-color-base-fixed)

var(--background-color-neutral)

var(--background-color-neutral-subtle)

var(--background-color-interactive)

var(--background-color-interactive--hover)

var(--background-color-interactive--active)

var(--background-color-disabled)

var(--background-color-inverted)

var(--background-color-progressive)

var(--background-color-progressive--hover)

var(--background-color-progressive--active)

var(--background-color-progressive-subtle)

var(--background-color-progressive-subtle--hover)

var(--background-color-progressive-subtle--active)

var(--background-color-destructive)

var(--background-color-destructive--hover)

var(--background-color-destructive--active)

var(--background-color-destructive-subtle)

var(--background-color-destructive-subtle--hover)

var(--background-color-destructive-subtle--active)

var(--background-color-error)

var(--background-color-error--hover)

var(--background-color-error--active)

var(--background-color-error-subtle)

var(--background-color-error-subtle--hover)

var(--background-color-error-subtle--active)

var(--background-color-warning-subtle)

var(--background-color-success-subtle)

var(--background-color-notice-subtle)

var(--background-color-content-added)

var(--background-color-content-removed)

var(--border-color-base)

var(--border-color-subtle)

var(--border-color-muted)

var(--border-color-interactive)

var(--border-color-progressive)

var(--border-color-destructive)

var(--border-color-error)

var(--border-color-warning)

var(--border-color-success)