vue3使用css實現主題切換

時間 2021-08-14

標籤 javascript css vue java git github web typescript 微信 markdown 欄目 CSS 简体版

原文原文鏈接

在開發本身的小項目過程當中，臨時起意想作一個光暗主題切換，因而就開始各類查資料搗鼓，看看 less 怎麼辦，再找找 scss 怎麼整。偶然發現知乎上有一篇對國外大神文章的翻譯，介紹了使用 css 實現的主題切換。因而在本身的項目中動手試一試~javascript

知乎連接css

原文連接vue

`css` 自定義屬性

以 -- 開頭的屬性，另外 scss 是以 $ 開頭，less 是以 @ 開頭
定義後經過 var() 使用變量
在 :root 選擇器中定義，能夠做用於全局文檔中的全部元素

光暗主題配色參考 github ~java

// style/variable.css
/* 默認dark主題 */
:root {
  --bg-color: #0d1117;
  --text-color: #f0f6fc;
}

/* light主題 */
:root[theme='light'] {
  --bg-color: #fff;
  --text-color: #2c3e50;
}
複製代碼

// App.vue
#app {
  /* 字體顏色 */
  color: var(--text-color);
  /* 背景顏色 */
  background-color: var(--bg-color);
}

/* tips: 根據實際配置,我我的參考 github 作的是 hedaer 是保持顏色不變,只改變 content 部分 */
/* 使用方法一致 */
複製代碼

`js` 屬性切換

經過 switch 標籤的 change 事件切換
document.documentElement 引用文檔的根元素 DOM，即 <HTML> 元素
經過添加和移除 theme 屬性達到切換 css 的目的

// val: true - 暗, false - 光
const handleThemeChange = (val: Boolean) => {
  if (!val) {
    document.documentElement.setAttribute('theme', 'light')
  } else {
    document.documentElement.removeAttribute('theme')
  }
}
複製代碼

效果展現

相關文章

相關標籤/搜索

高可用切換

紅包項目實戰

網站主機教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<