此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

主題色系

善用動態顏色與全域色調設計介面。
主色調與明暗

領銜主色能讓你在頁面中添加個人化的主色調,多數的 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-dark` 網頁會強制使用暗色主題 -->
<html class="is-dark">
色票系統

Tocas UI 使用動態色調,設計網頁時使用這些顏色能更符合 Tocas UI 規範並且在色調變更時自動切換。動態顏色即便看起來是白色,也可能會在另一個色系變為黑色,反色則是指目前系統色系相反時所呈現的顏色。

<div style="color: var(--ts-gray-300);">這樣套用 CSS 變數作為顏色</div>

靜態顏色不會在系統色系變更時而有所變化,適合用於已知的情境。

輔助樣式

因為這些樣式可以套用在任何元素,所以命名開頭一定是 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>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標