快捷導(dǎo)航

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

更新時(shí)間：2023年03月06日 15:56:23 作者：今天又學(xué)到了

這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

自從蘋(píng)果系統(tǒng)支持了暗色主題之后，越來(lái)越多的網(wǎng)站開(kāi)始支持暗色模式，來(lái)改善用戶(hù)夜晚使用網(wǎng)站的舒適度，那么一般都是如何處理的呢.

在開(kāi)始一個(gè)項(xiàng)目時(shí)，我們通常會(huì)將用到的主題色，和一些全局配置，通過(guò)css變量定義在根元素，注意，變量必須以"--"開(kāi)頭

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

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

一、通過(guò)在根元素定義選擇器來(lái)改變主題

定義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>

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

自定義標(biāo)簽屬性

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

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

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

樣式一般定義在:root中，當(dāng)然也可以定義在html、body標(biāo)簽中，目的是為了能夠在全局使用

二、通過(guò)prefers-color-scheme來(lái)改變主題

通過(guò)媒體查詢(xún)，獲取系統(tǒng)主題，來(lái)改變網(wǎng)站主題. scheme有三個(gè)可選值，分別是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 { }

通過(guò)通知，監(jiān)聽(tīng)主題色的變化

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

三、通過(guò)顏色反轉(zhuǎn)來(lái)改變主題

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

// 顏色反轉(zhuǎn)，色調(diào)反轉(zhuǎn)
filter: invert(1) hue-rotate(180deg);

特殊紀(jì)念日，網(wǎng)站置灰，也是用filter來(lái)實(shí)現(xiàn)的

filter: grayscale(1);

總結(jié)

以上就是三種改變主題的方法，不過(guò)通常我們做法是使用dateset + media(prefers-color-scheme)結(jié)合的方式來(lái)處理. 優(yōu)先使用dateset，如果用戶(hù)沒(méi)有設(shè)置dateset，就使用media來(lái)獲取系統(tǒng)主題，然后設(shè)置即可，更多關(guān)于web改變主題配色的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: