uni-app如何动态切换主题色

• uni-app如何动态切换主题色

• a. 创建主题管理模块
• b. 创建主题切换组件/指令
• c. 更新应用样式
• 适配暗黑模式

• 基于vue3的方案二

• 步骤 1：创建主题状态管理模块
• 步骤 2：定义 CSS 变量
• 步骤 3：在组件中使用 CSS 变量
• 步骤 4：添加主题切换功能
• 步骤 5：更新 CSS 变量

uni-app如何动态切换主题色

如果您需要从后台管理系统设置主题色并通过接口传递给前端动态修改，可以采用以下策略：

a. 创建主题管理模块

在 Vue 项目中，可以利用 Pinia（假设您已经使用 Pinia 作为状态管理库）创建一个主题管理模块，用于存储和更新当前主题色：

// themeStore.js
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    primaryColor: '#123456', // 初始主题色
    // ...其他主题相关状态
  }),
  actions: {
    async updateThemeColor(newColor) {
      // 这里可能需要异步请求接口获取颜色值
      this.primaryColor = newColor;
    },
  },
});

b. 创建主题切换组件/指令

创建一个组件（如 <theme-switcher>）或自定义指令，用于接收后台传来的颜色值并触发主题更新：

// themeSwitcher.vue (简化示例)
<template>
  <div @click="applyNewColorFromBackend">切换主题</div>
</template>

<script>
import { useThemeStore } from '@/stores/themeStore';

export default {
  setup() {
    const themeStore = useThemeStore();

    const applyNewColorFromBackend = async () => {
      // 假设这里是从接口获取新的颜色值
      const newColor = await fetchThemeColorFromBackend();

      themeStore.updateThemeColor(newColor);
    };

    return {
      applyNewColorFromBackend,
    };
  },
};
</script>

c. 更新应用样式

当主题色改变后，需要实时更新应用的样式。这可以通过监听主题状态的变化，并使用 CSS 变量（CSS Custom Properties）或 Vue.js 的动态类名、内联样式等方式实现。

使用 CSS 变量：

在 uni.scss 中定义 CSS 变量：

// uni.scss
:root {
  --primary-color: #123456;
  --secondary-color: #abcdef;
  // ...
}

.my-component {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

在主题状态更新后，通过 JavaScript 更新根元素（通常是 <html> 或 <body>）上的 CSS 变量：

document.documentElement.style.setProperty('--primary-color', themeStore.primaryColor);
// ... 更新其他变量

使用 Vue.js 动态样式：

在 Vue 组件中，可以使用 v-bind:class 或 v-bind:style 结合计算属性或响应式数据来动态更新样式：

<!-- MyComponent.vue -->
<template>
  <div :class="{ 'theme-primary': isPrimary }" :style="{ color: textColor }"></div>
</template>

<script>
export default {
  computed: {
    isPrimary() {
      return this.$store.state.theme.primaryColor === '#123456';
    },
    textColor() {
      return this.$store.state.theme.textColor;
    },
  },
};
</script>

<style scoped>
.theme-primary {
  background-color: #123456;
}
</style>

3. 适配暗黑模式

如果还需要考虑暗黑模式（Dark Mode）的支持，可以在 uni.scss 中定义两套主题色，并使用媒体查询（@media (prefers-color-scheme: dark)）或系统提供的 API（如 iOS 的 window.matchMedia('(prefers-color-scheme: dark)')）来检测用户偏好并应用相应的主题。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

基于vue3的方案

在 uni-app 中实现动态切换主题色，可以结合使用状态管理库（如 Pinia）、CSS 变量（CSS Custom Properties）以及响应式更新样式。以下是一个具体的示例说明：

步骤 1：创建主题状态管理模块

首先，使用 Pinia 创建一个主题状态管理模块，用于存储当前主题色以及其他相关样式信息，并提供方法来更新主题。

// stores/themeStore.js
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    themeMode: 'light', // 'light' or 'dark'
    primaryColor: '#123456', // 默认主题色
    secondaryColor: '#abcdef', // 辅助主题色
  }),
  actions: {
    async switchTheme(mode) {
      if (mode === 'light' || mode === 'dark') {
        this.themeMode = mode;

        // 假设此处是从后台接口获取主题色
        const { primaryColor, secondaryColor } = await fetchThemeColors(mode);

        this.primaryColor = primaryColor;
        this.secondaryColor = secondaryColor;
      }
    },
  },
});

步骤 2：定义 CSS 变量

在项目全局样式文件（如 global.css 或 uni.scss）中定义 CSS 变量，这些变量将随着主题色的变化而更新。

/* global.css 或 uni.scss */
:root {
  --primary-color: #123456;
  --secondary-color: #abcdef;
}

.dark-mode {
  --primary-color: #654321; /* 示例暗黑模式主题色 */
  --secondary-color: #fedcba; /* 示例暗黑模式辅助色 */
}

步骤 3：在组件中使用 CSS 变量

在各个组件中使用 CSS 变量替代硬编码的颜色值，确保样式能够随主题色动态变化。

<!-- YourComponent.vue -->
<template>
  <div class="container" :class="{ 'dark-mode': themeStore.themeMode === 'dark' }">
    <h1 class="title">标题</h1>
    <p class="content">内容</p>
  </div>
</template>

<script>
import { useThemeStore } from '@/stores/themeStore';

export default {
  setup() {
    const themeStore = useThemeStore();

    return {
      themeStore,
    };
  },
};
</script>

<style scoped>
.container {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

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

.content {
  color: var(--secondary-color);
}
</style>

步骤 4：添加主题切换功能

在界面上添加一个主题切换按钮或其他交互方式，触发主题切换动作。

<!-- App.vue 或其他适当位置 -->
<template>
  <div id="app">
    <button @click="switchTheme">切换主题</button>

    <!-- 其他应用内容 -->
    <router-view />
  </div>
</template>

<script>
import { useThemeStore } from '@/stores/themeStore';

export default {
  setup() {
    const themeStore = useThemeStore();

    const switchTheme = () => {
      if (themeStore.themeMode === 'light') {
        themeStore.switchTheme('dark');
      } else {
        themeStore.switchTheme('light');
      }
    };

    return {
      switchTheme,
    };
  },
};
</script>

步骤 5：更新 CSS 变量

在主题状态更新后，通过 JavaScript 更新根元素（通常是 <html> 或 <body>）上的 CSS 变量类名。这可以通过在主题状态管理模块中监听主题变化，并使用 Vue.js 的 watch 或 Pinia 的 subscribe 方法来实现。

// stores/themeStore.js (补充)
import { ref, onMounted, watch } from 'vue';

export const useThemeStore = defineStore('theme', {
  // ...（省略之前定义的 state 和 actions）

  setup() {
    const htmlClassList = ref(document.documentElement.classList);

    onMounted(() => {
      watch(
        () => store.state.themeMode,
        (newMode) => {
          htmlClassList.value.toggle('dark-mode', newMode === 'dark');
        }
      );
    });
  },
});