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

透過 CSS 的 prefers-color-scheme 功能,我們現在可以依照使用者裝置的明暗設定(如:黑暗色系)來變更元件的樣式。當使用者啟用夜間黑暗模式時,除了系統會採用暗色主題外,Tocas UI 也會反轉整個色調令背景以暗色為主。

設計者亦能在頁面直接指定 Tocas UI 的預設明暗色系而不須特別依照使用者的裝置設定。這個色系共有兩個階段:Light(亮色)、Dark(暗色)。

預設情況下的 Tocas UI 會依照使用者系統的色系為主來決定該使用亮色(Light)還是暗色(Dark)。但也能在 <html> 標籤中指定 [data-scheme="dark"] 來強制覆寫這個規則。

說明
標準亮色,適用於一般網頁閱讀或設計。
標準暗色,適用於夜間閱讀且對比不會過於明顯。
<html data-scheme="dark">

整個 Tocas UI 都是基於動態色調打造的,這也是為什麼在切換亮暗色系時能夠這麼容易。這些是 CSS 變數,你也能使用這些顏色讓整體設計符合 Tocas UI 規範並且在色調變更時自動切換。

設計時須注意這是動態顏色,這意味著目前看起來為白色時可能會在另一個色系變為黑色,而所謂的反色是指目前系統色系相反時所呈現的顏色。

若不希望顏色動態呈現,請使用下方的靜態顏色。

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

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

指定反色

is-inverted 套用在任何元素上,就能使該元素的色調與目前全域色系完全相反,這可以在亮色主題中呈現出暗色元素。需要注意的是:反色是相對詞,會基於系統的設置而動態更改。例如在亮色主題中的反色會是暗色,反之亦然。如果需要設計一個絕對黑色的元素,則需要參考下方的強制色域用法。

在亮色主題中,這個元素會是黑色的;在暗色主題中,這個元素會是白色的。
<div class="ts-box is-inverted" style="color: var(--ts-gray-800)">
    <div class="ts-content">
        在亮色主題中,這個元素會是黑色的;在暗色主題中,這個元素會是白色的。
    </div>
</div>
強制色域

透過 is-darkis-light 強制指定某個元素的色域,可以讓該元素固定色系。例如說:正在打造一個黑色的側邊欄,那麼就可以將該元素指定為 is-dark,這樣不論是在亮色或暗色系統中,這個元素都一定是基於暗色調顯示。

這個元素不論是在什麼環境,都一定是黑色的。
這個元素不論是在什麼環境,都一定是白色的。
<div class="ts-box is-dark" style="color: var(--ts-gray-800)">
    <div class="ts-content">
        這個元素不論是在什麼環境,都一定是黑色的。
    </div>
</div>
<div class="ts-box is-light" style="color: var(--ts-gray-800)">
    <div class="ts-content">
        這個元素不論是在什麼環境,都一定是白色的。
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n