色彩 Colors

Accuhit 的色彩只有一份來源:定義在 Element Plus 的 CSS 變數(--el-*)上。 Tailwind 的顏色 class 全部「映射」指向這些變數,因此兩邊永遠同色,切換深色模式也會自動跟上。

試試看

點右上角的深色模式開關,下面所有色票會即時變化 —— 這就是單一來源的好處。 點任何色塊或代碼可直接複製。

品牌主色 Primary

品牌主色為 #3b82f6,深淺色階由系統自動計算,請勿自行調色。

Primary 主色

--el-color-primarybg-primary

Light 3(hover)

--el-color-primary-light-3bg-primary-light-3

Light 5

--el-color-primary-light-5bg-primary-light-5

Light 7

--el-color-primary-light-7bg-primary-light-7

Light 8(淺底)

--el-color-primary-light-8bg-primary-light-8

Light 9(最淺底)

--el-color-primary-light-9bg-primary-light-9

Dark 2(active)

--el-color-primary-dark-2bg-primary-dark-2

狀態色 Semantic

狀態色沿用 Element Plus 預設,用於回饋與狀態,不可挪作裝飾用途。 每個狀態色同樣有 light-3 ~ light-9 與 dark-2 色階可用(寫法同主色,如 bg-success-light-9)。

Success 成功

--el-color-successbg-success

Warning 警告

--el-color-warningbg-warning

Danger 危險/錯誤

--el-color-dangerbg-danger

Info 中性提示

--el-color-infobg-info

中性色:文字 Text

文字顏色一律使用以下四階,禁止使用 text-gray-*(會和元件的灰不一致,深色模式也不會切換)。

主要文字(標題)

--el-text-color-primarytext-main

常規文字(內文)

--el-text-color-regulartext-regular

次要文字(說明)

--el-text-color-secondarytext-secondary

佔位文字

--el-text-color-placeholdertext-placeholder

停用文字

--el-text-color-disabledtext-disabled

中性色:邊框 Border

基礎邊框

--el-border-colorborder-base

淺邊框

--el-border-color-lightborder-light

更淺邊框(分隔線)

--el-border-color-lighterborder-lighter

極淺邊框

--el-border-color-extra-lightborder-extra-light

中性色:背景與填充 Background / Fill

頁面底色

--el-bg-color-pagebg-page

容器底色(卡片)

--el-bg-colorbg-base

浮層底色

--el-bg-color-overlaybg-overlay

填充色

--el-fill-colorbg-fill

淺填充

--el-fill-color-lightbg-fill-light

更淺填充

--el-fill-color-lighterbg-fill-lighter

給工程師:對照速查

用途	Element Plus 變數	Tailwind class
主色背景	--el-color-primary	bg-primary
主色文字	--el-color-primary	text-primary
主色淺底(選取列、標籤底)	--el-color-primary-light-9	bg-primary-light-9
標題文字	--el-text-color-primary	text-main
內文文字	--el-text-color-regular	text-regular
分隔線	--el-border-color-lighter	border-lighter
頁面底色	--el-bg-color-page	bg-page

完整的使用順位規則請看顏色使用順位。