利用Typescript与Vue2.0让多主题切换变简单

前端

2023-10-09 08:22:33

轻松实现多主题切换：使用 CSS 替代繁琐的 Sass

创建 ColorConfig

打造多主题切换功能的第一步是建立一个 colorConfig.ts 文件，其中包含主题配置。在这个文件中，我们将定义不同主题的色值，包括主色、次色、文本色和背景色。

在 Style.less 中使用主题变量

接下来，我们需要在 style.less 文件中利用主题变量。在该文件中，我们将创建根变量来保存主题色值，并将其应用于不同的元素。这样做可以确保主题变化时，这些变量的值也会随之改变。

利用 Vuex 管理主题状态

为了管理主题状态，我们在 Vuex 中创建一个 theme 模块。该模块包含一个 theme 状态，用于存储当前主题，以及 SET_THEME mutation 和 setTheme action，用于更改主题。

在组件中使用主题状态

最后，我们需要在组件中使用主题状态。在组件的 created() 生命周期钩子中，我们可以调用 setTheme() 方法来设置主题。在模板中，我们可以使用 v-if 指令根据主题状态渲染不同的内容，实现主题切换。

代码示例

// colorConfig.ts
export const colorConfig = {
  dark: {
    primary: '#000',
    secondary: '#fff',
    text: '#fff',
    background: '#333'
  },
  light: {
    primary: '#fff',
    secondary: '#000',
    text: '#000',
    background: '#eee'
  }
};

// style.less
:root {
  --primary: #000;
  --secondary: #fff;
  --text: #fff;
  --background: #333;
}

body {
  background-color: var(--background);
  color: var(--text);
}

.primary-text {
  color: var(--primary);
}

.secondary-text {
  color: var(--secondary);
}

Vuex Theme 模块

// store/theme.js
const state = {
  theme: 'dark'
};

const mutations = {
  SET_THEME: (state, theme) => {
    state.theme = theme;
  }
};

const actions = {
  setTheme: ({ commit }, theme) => {
    commit('SET_THEME', theme);
  }
};

export default {
  state,
  mutations,
  actions
};

组件使用主题状态

<template>
  <div :class="theme">
    <p class="primary-text">This is primary text.</p>
    <p class="secondary-text">This is secondary text.</p>
  </div>
</template>

<script>
export default {
  created() {
    this.$store.dispatch('setTheme', 'dark');
  },
  computed: {
    theme() {
      return this.$store.state.theme;
    }
  }
};
</script>