vue3通过css对按钮替换主题颜色

vue3使用css通过按钮替换主题

定义一个对象用来存放颜色

const theme = reactive({
  fontColor: "",
  backgroundColor: "",
});

写个方法用来存储对象

const setWhiteTheme = () => {
  theme.fontColor = "#DA7093";
  theme.backgroundColor = "#fff";
};
const setBlackTheme = () => {
  theme.fontColor = "#fff";
  theme.backgroundColor = "#DA7093";
};

最后弄一个按钮来控制这个颜色的变化

const checkedStatus = ref("未选中");
const select = (e: any) => {
  if (e.target.checked == true) {
    //当判断复选框被选中时，可以做一些处理事件
    checkedStatus.value = "选中";
    window.sessionStorage.setItem("xzz", checkedStatus.value);
    setBlackTheme();
  } else {
    checkedStatus.value = "未选中";
    window.sessionStorage.setItem("xzz", checkedStatus.value);
    setWhiteTheme();
  }
};

最后通过v-bind给最外层的盒子添加需要替换的颜色

.main {
  color: v-bind("theme.fontColor");
  background-color: v-bind("theme.backgroundColor");
}

    <div class="main">
        <input type="checkbox" class="dn" id="dn" ref="e" @click="select">
    </div>

效果如下：