面试题：如何使用 Vue 开发网站切换主题的功能？介绍设计思路

在 Vue 中实现网站切换主题的功能，通常可以通过以下设计思路来实现：

1. 定义主题样式

首先，定义不同主题的样式。可以使用 CSS 变量（Custom Properties）或预处理器（如 SCSS）来管理主题样式。

使用 CSS 变量：

/* 默认主题 */
:root {
  --primary-color: #42b983;
  --background-color: #ffffff;
  --text-color: #2c3e50;
}

/* 暗色主题 */
[data-theme="dark"] {
  --primary-color: #1abc9c;
  --background-color: #2c3e50;
  --text-color: #ffffff;
}

使用 SCSS：

$themes: (
  light: (
    primary-color: #42b983,
    background-color: #ffffff,
    text-color: #2c3e50,
  ),
  dark: (
    primary-color: #1abc9c,
    background-color: #2c3e50,
    text-color: #ffffff,
  ),
);

@mixin theme($theme) {
  @each $key, $value in map-get($themes, $theme) {
    --#{$key}: #{$value};
  }
}

:root {
  @include theme('light');
}

[data-theme="dark"] {
  @include theme('dark');
}

2. 动态切换主题

在 Vue 中，可以通过动态绑定 data-theme 属性或类名来切换主题。

使用 `data-theme` 属性：

<template>
  <div :data-theme="theme">
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题：{{ theme }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light', // 默认主题
    };
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
    },
  },
};
</script>

<style scoped>
/* 使用 CSS 变量 */
div {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
}
</style>

使用类名：

<template>
  <div :class="theme">
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题：{{ theme }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light', // 默认主题
    };
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
    },
  },
};
</script>

<style scoped>
/* 默认主题 */
.light {
  --primary-color: #42b983;
  --background-color: #ffffff;
  --text-color: #2c3e50;
}

/* 暗色主题 */
.dark {
  --primary-color: #1abc9c;
  --background-color: #2c3e50;
  --text-color: #ffffff;
}

div {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
}
</style>

3. 持久化主题设置

为了在用户刷新页面后仍然保持主题设置，可以将主题状态保存到 localStorage 或 Cookie 中。

示例：

<template>
  <div :data-theme="theme">
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题：{{ theme }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: localStorage.getItem('theme') || 'light', // 从 localStorage 读取主题
    };
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
      localStorage.setItem('theme', this.theme); // 保存主题到 localStorage
    },
  },
};
</script>

4. 全局主题管理

如果需要在多个组件中共享主题状态，可以使用 Vuex 或 Provide/Inject 进行全局状态管理。

使用 Vuex：

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    theme: 'light',
  },
  mutations: {
    setTheme(state, theme) {
      state.theme = theme;
    },
  },
  actions: {
    toggleTheme({ commit, state }) {
      const newTheme = state.theme === 'light' ? 'dark' : 'light';
      commit('setTheme', newTheme);
      localStorage.setItem('theme', newTheme);
    },
  },
});

在组件中使用：

<template>
  <div :data-theme="theme">
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题：{{ theme }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['theme']),
  },
  methods: {
    ...mapActions(['toggleTheme']),
  },
};
</script>

5. 动态加载主题样式

如果需要支持更多主题或动态加载主题样式，可以将主题样式提取到单独的 CSS 文件中，并通过动态加载的方式切换。

示例：

<template>
  <div>
    <button @click="toggleTheme">切换主题</button>
    <p>当前主题：{{ theme }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light',
    };
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light';
      this.loadTheme(this.theme);
    },
    loadTheme(theme) {
      const link = document.getElementById('theme-style');
      if (link) {
        link.href = `/themes/${theme}.css`;
      } else {
        const newLink = document.createElement('link');
        newLink.id = 'theme-style';
        newLink.rel = 'stylesheet';
        newLink.href = `/themes/${theme}.css`;
        document.head.appendChild(newLink);
      }
    },
  },
  mounted() {
    this.loadTheme(this.theme);
  },
};
</script>