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

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

 更新時間:2023年03月06日 15:56:23   作者:今天又學到了  
這篇文章主要為大家介紹了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+CSS實現(xiàn)的藍色table選項卡效果

    JS+CSS實現(xiàn)的藍色table選項卡效果

    這篇文章主要介紹了JS+CSS實現(xiàn)的藍色table選項卡效果,通過鼠標事件調用自定義函數(shù)實現(xiàn)頁面元素樣式的遍歷與動態(tài)切換效果,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • js String.prototype.trim字符去前后空格的擴展

    js String.prototype.trim字符去前后空格的擴展

    這篇文章主要介紹了js String.prototype.trim字符去前后空格的擴展,需要的朋友可以參考下
    2020-04-04
  • 解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題

    解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題

    今天小編就為大家分享一篇解決layui數(shù)據(jù)表格table的橫向滾動條顯示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS實現(xiàn)讓訪問者自助選擇網頁文字顏色的方法

    JS實現(xiàn)讓訪問者自助選擇網頁文字顏色的方法

    這篇文章主要介紹了JS實現(xiàn)讓訪問者自助選擇網頁文字顏色的方法,涉及javascript針對radio表單控件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • 三分鐘學會用ES7中的Async/Await進行異步編程

    三分鐘學會用ES7中的Async/Await進行異步編程

    這篇文章主要介紹了三分鐘學會用ES7中的Async/Await進行異步編程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • 原生JS實現(xiàn)導航下拉菜單效果

    原生JS實現(xiàn)導航下拉菜單效果

    這篇文章主要介紹了JS實現(xiàn)導航下拉菜單效果,用原生JS實現(xiàn)的一個導航下拉菜單,下拉菜單的寬度與瀏覽器視口的寬度一樣,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • JavaScript中的ES6 Proxy的具體使用

    JavaScript中的ES6 Proxy的具體使用

    這篇文章主要介紹了JavaScript中的ES6 Proxy的具體使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • Javascript中拼接大量字符串的方法

    Javascript中拼接大量字符串的方法

    這篇文章主要介紹了Javascript中拼接大量字符串的方法,本文實現(xiàn)的就是JS語言中的Heredoc語法,需要的朋友可以參考下
    2015-02-02
  • JavaScript的11個小技巧整理

    JavaScript的11個小技巧整理

    這篇文章介紹了JavaScript的11個小技巧,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • 一文詳解JavaScript?如何將?HTML?轉成?Markdown

    一文詳解JavaScript?如何將?HTML?轉成?Markdown

    這篇文章主要介紹了一文詳解JavaScript如何將HTML轉成Markdown,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08

最新評論