詳解web如何改變主題配色方法示例

Posted on by

正文

自從蘋果系統支持瞭暗色主題之後，越來越多的網站開始支持暗色模式，來改善用戶夜晚使用網站的舒適度，那麼一般都是如何處理的呢.

在開始一個項目時，我們通常會將用到的主題色，和一些全局配置，通過css變量定義在根元素，註意，變量必須以"–"開頭

:root {
  --color-primary: white;
}

以下是可以改變主題的幾種方式

一、通過在根元素定義選擇器來改變主題

定義class

html.dark {
  --docsearch-modal-background: #23272f;
  --docsearch-hit-background: #23272f;
  --docsearch-highlight-color: #149eca;
}

<html class="dark"></html>

定義dateset

:root[data-theme='dark'] { 
    --color-primary: #3C7EFF; 
}

<html date-theme='dark'></html>

// 設置頁面根元素的 dataset
const doc = document.documentElement; 
const newTheme = theme === 'light' ? 'dark' : 'light'; 
doc.dataset.theme = newTheme;

自定義標簽屬性

:root[arco-theme='dark'] { 
    --color-primary: #3C7EFF; 
}

<html arco-theme='dark'></html>

// 設置頁面根元素的 dataset
const [theme, setTheme] = useStorage('arco-theme', 'light');
const doc = document.documentElement; 
doc.setAttribute('arco-theme', 'dark');

樣式一般定義在:root中，當然也可以定義在html、body標簽中，目的是為瞭能夠在全局使用

二、通過prefers-color-scheme來改變主題

通過媒體查詢，獲取系統主題，來改變網站主題. scheme有三個可選值，分別是light、dark 和 no-preference，代表著亮色主題、暗色主題和未知，大部分瀏覽器都支持該特性，可以在這裡查看 caniuse.

:root {
      --font-color: black;
}
  
@media (prefers-color-scheme: dark) {
  :root {
      --font-color: white;
  }
}

獲取主題色

const theme = window.matchMedia('(prefers-color-scheme: dark)');
if (theme.matches) { } else { }

通過通知，監聽主題色的變化

// handleChange(event) { if (event.matches) {} else {} }
const theme = window.matchMedia('(prefers-color-scheme: dark)');
theme.addListener(handleChange);
theme.removeListener(handleChange);

三、通過顏色反轉來改變主題

這種filter方式，就是所謂的一行代碼改變主題的方式，加入如下代碼即可，不過這種一刀切的方式不夠靈活，有些元素不需要顏色反轉，還需要再加一層hue-rotate(180deg)反轉回來，不推薦使用.

// 顏色反轉，色調反轉
filter: invert(1) hue-rotate(180deg);

特殊紀念日，網站置灰，也是用filter來實現的

filter: grayscale(1);

總結

以上就是三種改變主題的方法，不過通常我們做法是使用dateset + media(prefers-color-scheme)結合的方式來處理. 優先使用dateset，如果用戶沒有設置dateset，就使用media來獲取系統主題，然後設置即可，更多關於web改變主題配色的資料請關註WalkonNet其它相關文章！

推薦閱讀：