主色調與明暗
領銜主色能讓你在頁面中添加個人化的主色調，多數的 Tocas UI 元件都支援領銜主色。同個頁面裡可以有多個領銜主色，取決於容器繼承的設定為何。
選擇顏色
自訂顏色
卡片與標題
好吃的千層蛋糕！
按鈕
標籤
8,964
16,226
320
統計數據
42,689
32
8,652
351
核取方塊
項目切換
<style type="text/css">
html {
/** 設定領銜主色 */
--ts-accent-color: #00ADEA;
}
</style>
<!-- 在元件上啟用領銜主色 -->
<div class="ts-button is-accent"></div>
Tocas UI 會依照使用者的系統設定來自動調整明暗色系，主要使用 CSS 的 prefers-color-scheme 功能，你可以透過
<html> 標籤強制覆寫這個規則。
| 狀態指示 | 說明 | |
|---|---|---|
| is-light |
目前
|
亮色主題，適用於一般網頁閱讀或設計。 |
| is-dark |
目前
|
暗色主題，適用於夜間閱讀。 |
<!-- 指定 `is-dark` 網頁會強制使用暗色主題 -->
<html class="is-dark">色票系統
Tocas UI 使用動態色調，設計網頁時使用這些顏色能更符合 Tocas UI 規範並且在色調變更時自動切換。動態顏色即便看起來是白色，也可能會在另一個色系變為黑色，反色則是指目前系統色系相反時所呈現的顏色。
| gray 目前 | gray 反色 | primary | warning | positive | negative | |
|---|---|---|---|---|---|---|
| ts-x-50 | ||||||
| ts-x-75 | ||||||
| ts-x-100 | ||||||
| ts-x-200 | ||||||
| ts-x-300 | ||||||
| ts-x-400 | ||||||
| ts-x-500 | ||||||
| ts-x-600 | ||||||
| ts-x-700 | ||||||
| ts-x-800 | ||||||
| ts-x-900 |
<div style="color: var(--ts-gray-300);">這樣套用 CSS 變數作為顏色</div>靜態顏色不會在系統色系變更時而有所變化，適合用於已知的情境。
| gray | primary | warning | positive | negative | |
|---|---|---|---|---|---|
| ts-static-x-50 | |||||
| ts-static-x-75 | |||||
| ts-static-x-100 | |||||
| ts-static-x-200 | |||||
| ts-static-x-300 | |||||
| ts-static-x-400 | |||||
| ts-static-x-500 | |||||
| ts-static-x-600 | |||||
| ts-static-x-700 | |||||
| ts-static-x-800 | |||||
| ts-static-x-900 |
輔助樣式
因為這些樣式可以套用在任何元素，所以命名開頭一定是 has-；相關說明請參閱輔助樣式頁面。
使該元素的色調與目前全域色系完全相反，反色是動態相對詞。亮色主題中的反色會是暗色，反之亦然。
在亮色主題中，這個元素會是黑色的；在暗色主題中，這個元素會是白色的。
<div class="ts-segment has-inverted" style="color: var(--ts-gray-800)">
在亮色主題中，這個元素會是黑色的；在暗色主題中，這個元素會是白色的。
</div>強制指定某個元素的色域，可以讓該元素固定色系。
這個元素不論是在什麼環境，都一定是黑色的。
這個元素不論是在什麼環境，都一定是白色的。
<div class="ts-segment has-dark" style="color: var(--ts-gray-800)">
這個元素不論是在什麼環境，都一定是黑色的。
</div>
<div class="ts-segment has-light" style="color: var(--ts-gray-800)">
這個元素不論是在什麼環境，都一定是白色的。
</div>