openblog

Appearance

css主题笔记（一）：javascript切换主题 ​

图片

一个web项目切换主题的方式

以下是以vue3项目为例：

新建一个css文件夹

里面新建2个css文件

theme_1.css

css
:root{
    --app-color: #ffffff;
}
:root{
    --app-color: #ffffff;
}

theme_2.css

css
:root{
    --app-color: #000000;
}
:root{
    --app-color: #000000;
}

现在新建文件夹theme

然后文件夹里新建两个js文件

createTheme.js

js
// 此文件引入到app.vue
// 创建css文件
export default function CreateTheme(){
    let link = document.createElement("link");
    link.type = "text/css";
    link.id = "theme";
    link.rel = "stylesheet";
    link.href = "css/theme_1.css"; //css文件路径
    document.getElementsByTagName("head")[0].appendChild(link);
}
// 此文件引入到app.vue
// 创建css文件
export default function CreateTheme(){
    let link = document.createElement("link");
    link.type = "text/css";
    link.id = "theme";
    link.rel = "stylesheet";
    link.href = "css/theme_1.css"; //css文件路径
    document.getElementsByTagName("head")[0].appendChild(link);
}

changeTheme.js

js
// 切换主题

export default function ChangeTheme(type){
      document.getElementById("theme").href = `./css/theme_${type}.css`;
}
// 切换主题

export default function ChangeTheme(type){
      document.getElementById("theme").href = `./css/theme_${type}.css`;
}

入口文件app.vue引入createTheme.js

调用

js
import CreateTheme from '@/open/theme/createTheme.js'

onMounted(()=>{
  CreateTheme()
})
import CreateTheme from '@/open/theme/createTheme.js'

onMounted(()=>{
  CreateTheme()
})

css使用

css
body{
  background: var(--app-color,#ffffff)
}
body{
  background: var(--app-color,#ffffff)
}

切换主题

html
<template>
    <div>
        <button @click="change">切换主题</button>
    </div>
</template>
<script setup lang="ts">
import ChangeTheme from '@/open/theme/changeTheme.js'
const change = ()=>{
  ChangeTheme(2)
}
</script>
<template>
    <div>
        <button @click="change">切换主题</button>
    </div>
</template>
<script setup lang="ts">
import ChangeTheme from '@/open/theme/changeTheme.js'
const change = ()=>{
  ChangeTheme(2)
}
</script>

这个方法来自网络学习，多谢大家的无私分享。

本文到此结束。

反馈信息 ​

INFO

邮箱： open_teams@163.com