詳解web如何改變主題配色方法示例
正文
自從蘋果系統(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)文章
JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果,通過鼠標(biāo)事件調(diào)用自定義函數(shù)實(shí)現(xiàn)頁面元素樣式的遍歷與動(dòng)態(tài)切換效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10js String.prototype.trim字符去前后空格的擴(kuò)展
這篇文章主要介紹了js String.prototype.trim字符去前后空格的擴(kuò)展,需要的朋友可以參考下2020-04-04解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格table的橫向滾動(dòng)條顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)讓訪問者自助選擇網(wǎng)頁文字顏色的方法,涉及javascript針對(duì)radio表單控件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程
這篇文章主要介紹了三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06原生JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果,用原生JS實(shí)現(xiàn)的一個(gè)導(dǎo)航下拉菜單,下拉菜單的寬度與瀏覽器視口的寬度一樣,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉(zhuǎn)成Markdown,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08