如何通过编程方式修改NuxtUI的主题主色调？

手动修改方式（静态配置） #

在app.config.ts中直接设置主色调，这是静态修改的方式：

export default defineAppConfig({
  ui: {
    primary: 'green',
    // primary:'sky',
    gray: 'cool',
  },
});

编程式修改并实现换色按钮 #

要实现类似NuxtUI官网的动态换色功能，核心是利用Nuxt的响应式配置API来修改全局主题：

核心实现思路 #

通过Nuxt提供的useAppConfig组合式API，动态修改全局ui.primary值，同时可选通过本地存储持久化用户的主题选择，避免刷新后恢复默认。

换色组件代码示例 #

创建components/ColorSwitcher.vue组件：

<template>
  <div class="flex gap-2">
    <UButton 
      variant="solid" 
      :color="appConfig.ui.primary === 'green' ? 'green' : 'gray'"
      @click="switchColor('green')"
    >
      绿色
    </UButton>
    <UButton 
      variant="solid" 
      :color="appConfig.ui.primary === 'sky' ? 'sky' : 'gray'"
      @click="switchColor('sky')"
    >
      蓝色
    </UButton>
    <UButton 
      variant="solid" 
      :color="appConfig.ui.primary === 'rose' ? 'rose' : 'gray'"
      @click="switchColor('rose')"
    >
      粉色
    </UButton>
  </div>
</template>

<script setup>
const appConfig = useAppConfig()
// 从本地存储读取保存的主题，默认值为'green'
const savedPrimaryColor = useLocalStorage('nuxt-ui-primary', 'green')

// 初始化主题为用户之前选择的颜色
appConfig.ui.primary = savedPrimaryColor.value

// 切换主题的方法
const switchColor = (color) => {
  appConfig.ui.primary = color
  savedPrimaryColor.value = color
}
</script>

在项目中使用组件 #

在布局或页面中引入该组件，比如app.vue：

<template>
  <div class="p-4">
    <ColorSwitcher />
    <!-- 所有NuxtUI组件会自动应用新的主色调 -->
    <UCard class="mt-4" title="主题测试卡片">
      <UButton type="submit">测试按钮</UButton>
    </UCard>
  </div>
</template>

<script setup>
import ColorSwitcher from '~/components/ColorSwitcher.vue'
</script>

关键说明 #

• useAppConfig：Nuxt提供的全局响应式配置工具，修改appConfig.ui.primary后，所有NuxtUI组件会自动更新主色调样式。
• useLocalStorage：Nuxt内置工具，用于持久化用户的主题选择，刷新页面后保持设置。
• 支持的颜色值：primary属性接受Tailwind CSS的预设颜色名（如green、sky、rose、purple等），直接对应框架的颜色体系。

内容的提问来源于stack exchange，提问作者Stefan