欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年03月06日 15:56:23   作者:今天又學(xué)到了  
這篇文章主要為大家介紹了web如何改變主題配色方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

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

在開始一個(gè)項(xiàng)目時(shí),我們通常會(huì)將用到的主題色,和一些全局配置,通過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>
// 設(shè)置頁面根元素的 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è)置頁面根元素的 dataset
const [theme, setTheme] = useStorage('arco-theme', 'light');
const doc = document.documentElement; 
doc.setAttribute('arco-theme', 'dark');

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

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

通過媒體查詢,獲取系統(tǒng)主題,來改變網(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 { }

通過通知,監(jiān)聽主題色的變化

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

三、通過顏色反轉(zhuǎn)來改變主題

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

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

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

filter: grayscale(1);

總結(jié)

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

相關(guān)文章

最新評(píng)論