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

2023-03-07 06:01:25

正文

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

在開始一個專案時，我們通常會將用到的主題色，和一些全域性設定，通過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改變主題配色的資料請關注it145.com其它相關文章！