溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“web怎么改變主題配色”，在日常操作中，相信很多人在web怎么改變主題配色問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web怎么改變主題配色”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
自從蘋果系統支持了暗色主題之后，越來越多的網站開始支持暗色模式，來改善用戶夜晚使用網站的舒適度，那么一般都是如何處理的呢.
在開始一個項目時，我們通常會將用到的主題色，和一些全局配置，通過css變量定義在根元素，注意，變量必須以"--"開頭
:root {
--color-primary: white;
}以下是可以改變主題的幾種方式
html.dark {
--docsearch-modal-background: #23272f;
--docsearch-hit-background: #23272f;
--docsearch-highlight-color: #149eca;
}<html class="dark"></html>
: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標簽中，目的是為了能夠在全局使用
通過媒體查詢，獲取系統主題，來改變網站主題. 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 { }通過通知，監聽主題色的變化
// 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來實現的
filter: grayscale(1);
到此，關于“web怎么改變主題配色”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
