詳解web如何改變主題配色方法示例
正文
自從蘋果系統(tǒng)支持了暗色主題之后,越來越多的網站開始支持暗色模式,來改善用戶夜晚使用網站的舒適度,那么一般都是如何處理的呢.
在開始一個項目時,我們通常會將用到的主題色,和一些全局配置,通過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來改變主題
通過媒體查詢,獲取系統(tǒng)主題,來改變網站主題. 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 { }
通過通知,監(jiān)聽主題色的變化
// 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來實現(xiàn)的
filter: grayscale(1);
總結
以上就是三種改變主題的方法,不過通常我們做法是使用dateset + media(prefers-color-scheme)結合的方式來處理. 優(yōu)先使用dateset,如果用戶沒有設置dateset,就使用media來獲取系統(tǒng)主題,然后設置即可,更多關于web改變主題配色的資料請關注腳本之家其它相關文章!
相關文章
js String.prototype.trim字符去前后空格的擴展
這篇文章主要介紹了js String.prototype.trim字符去前后空格的擴展,需要的朋友可以參考下2020-04-04解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09一文詳解JavaScript?如何將?HTML?轉成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉成Markdown,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08