即使是品牌宣傳也能靈活回應。 您可以根據使用者的偏好設定調整網站的呈現方式。 不過,首先說明如何擴展網站的品牌宣傳,以便加入瀏覽器本身。
自訂瀏覽器介面
部分瀏覽器可讓您根據網站的調色盤建議主題顏色。
瀏覽器介面會根據建議的顏色進行調整。在網頁的 head
中名為 theme-color
的 meta
元素中加入顏色。
<meta name="theme-color" content="#00D494">
您可以使用 JavaScript 更新 theme-color
的值。但請善用這項能力。
如果瀏覽器色彩配置經常變更,可能會對使用者造成困擾。
建議你思考一些巧妙的方式,調整主題顏色。如果變更過於雜亂,使用者可能會感到困擾。
您也可以在網頁應用程式資訊清單檔案中指定主題顏色。 這是內含網站中繼資料的 JSON 檔案。
來自文件 head
的資訊清單檔案連結。使用 rel
值為 manifest
的 link
元素。
<link rel="manifest" href="/manifest.json">
在資訊清單檔案中,使用鍵/值組合列出中繼資料。
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
如果訪客決定將您的網站新增至主畫面 瀏覽器會使用資訊清單檔案中的資訊,顯示適當的捷徑。
提供深色模式
許多作業系統都允許使用者指定淺色或深色調色盤的偏好設定
建議您根據使用者的主題偏好設定最佳化您的網站。
您可以在 prefers-color-scheme
媒體功能中存取這項偏好設定。
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
請使用 meta
元素中的 prefers-color-scheme
媒體功能指定主題顏色。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
你也可以在 SVG 中使用 prefers-color-scheme
媒體功能。
如果使用 SVG 檔案做為網站小圖示,則可以根據深色模式進行調整。
Thomas Steiner 寫道
在 SVG 網站小圖示中顯示 prefers-color-scheme
,用於深色模式圖示。
使用自訂屬性設定主題
如果您在 CSS 的多個位置使用相同的顏色值,在 prefers-color-scheme
媒體查詢中重複所有選取器可能變得非常繁瑣。
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
使用 CSS 自訂屬性儲存顏色值。 自訂屬性的運作方式與程式設計語言中的變數類似。您可以在不更新變數名稱的情況下更新變數的值。
如果您在 prefers-color-scheme
媒體查詢中更新自訂屬性的值,
您不必重複編寫所有選取器
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
如需更多透過自訂屬性設定主題的進階範例,請參閱建立色彩配置一文。
圖片
如果您在 HTML 中使用 SVG,也可以套用自訂屬性。
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
如此一來,圖示就會隨著網頁上的其他元素變更顏色。
如果您希望在以深色模式顯示圖像時調低亮度,可以在 CSS 中套用篩選器。
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
針對部分圖片,建議您在深色模式中完全取代這些圖片。
舉例來說,您可能想要顯示色彩配置較深的地圖。
使用包含 <source>
元素的 <picture>
元素,並搭配 prefers-color-scheme
媒體查詢。
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
表單
瀏覽器會為表單欄位提供預設調色盤。 告知瀏覽器您的網站提供深色和淺色模式。 如此一來,瀏覽器就能為表單提供適當的預設樣式。
請將以下內容新增至 CSS:
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
您也可以使用 HTML。請在文件的 head
中加入以下指令:
<meta name="supported-color-schemes" content="light dark">
請使用 CSS 中的 accent-color
屬性設定核取方塊、圓形按鈕和其他表單欄位的樣式。
html {
accent-color: red;
}
深色主題通常包含較淺的品牌顏色。您可以更新深色模式的 accent-color
值。
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
在此情況下,使用自訂屬性就適合這麼做,因為您可以集中存放所有顏色宣告。
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
除了提供深色模式外,你也可以根據使用者偏好調整網站。 接下來,我們將說明如何讓網站適應各種無障礙功能。
隨堂測驗
測試您對主題設定的瞭解程度
如要在網頁外提供會影響瀏覽器的主題顏色,請使用:
<meta>
標記如要連結至使用者對淺色或深色主題的系統偏好設定,請使用:
(prefers-color-scheme)
媒體查詢因此,雖然您支援深色主題,但所有表單輸入內容仍會採用淺色主題。建議做法
<meta name="supported-color-schemes" content="light dark">
加進 HTML <head>
標記。html { color-scheme: light dark; }
新增至 CSS。