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')
  }
}
复制代码

效果展现

相关文章

相关标签/搜索

高可用切换

红包项目实战

网站主机教程

每日一句

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

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<