Nuxt运行时修改CSS变量及Vuetify主题颜色方法问询

一、调整全局SCSS变量，适配运行时修改 #

SCSS是预编译语言，运行时无法直接修改，因此需要将SCSS变量映射到 CSS自定义属性 ，实现动态更新：

1. 修改 @/assets/variables.scss ：

// 定义根节点的CSS自定义属性（设置默认值）
:root {
  --v-primary: #1976d2; // 对应原Vuetify primary默认色
  --v-secondary: #424242; // 对应原Vuetify secondary默认色
  // 可添加更多需要动态修改的变量
// 将SCSS变量映射到CSS自定义属性，兼容原有代码
$primary: var(--v-primary);
$secondary: var(--v-secondary);

2. 项目中所有使用 $primary / $secondary 的SCSS代码，会自动编译为 var(--v-primary) ，后续修改CSS自定义属性即可实时生效。

二、运行时修改CSS自定义属性 #

获取接口返回的主题数据后，通过DOM API修改根节点的CSS属性：

// 假设接口返回的主题数据格式：{ primary: '#xxxxxx', secondary: '#xxxxxx' }
const updateCSSVariables = (themeData) => {
  const root = document.documentElement;
  root.style.setProperty('--v-primary', themeData.primary);
  root.style.setProperty('--v-secondary', themeData.secondary);
  // 其他自定义变量同理

三、运行时修改Vuetify主题颜色 #

Nuxt 2 + Vuetify 2 场景 #

通过 this.$vuetify.theme 直接修改主题配置：

const updateVuetifyTheme = (themeData) => {
  // 修改浅色主题
  this.$vuetify.theme.themes.light.primary = themeData.primary;
  this.$vuetify.theme.themes.light.secondary = themeData.secondary;
  // 如果项目支持深色模式，同步修改深色主题
  this.$vuetify.theme.themes.dark.primary = themeData.darkPrimary || themeData.primary;
  this.$vuetify.theme.themes.dark.secondary = themeData.darkSecondary || themeData.secondary;

Nuxt 3 + Vuetify 3 场景 #

使用Vuetify提供的 useVuetify composable获取主题实例：

import { useVuetify } from 'vuetify';
const vuetify = useVuetify();
const updateVuetifyTheme = (themeData) => {
  vuetify.theme.global.colors.value.primary = themeData.primary;
  vuetify.theme.global.colors.value.secondary = themeData.secondary;
  // 深色模式修改同理
  vuetify.theme.global.colors.value.dark.primary = themeData.darkPrimary || themeData.primary;

四、整合接口请求与主题更新（以Nuxt 2为例） #

创建客户端插件 ~/plugins/theme.js ，统一处理主题加载与更新：

export default async ({ app, $axios }) => {
  // 优先读取本地存储的主题（避免刷新后重置）
  const savedTheme = localStorage.getItem('customTheme');
  if (savedTheme) {
    const themeData = JSON.parse(savedTheme);
    updateCSSVariables(themeData);
    updateVuetifyTheme.call({ $vuetify: app.$vuetify }, themeData);
  // 请求接口获取最新主题
  try {
    const themeData = await $axios.$get('/api/theme');
    updateCSSVariables(themeData);
    updateVuetifyTheme.call({ $vuetify: app.$vuetify }, themeData);
    // 持久化到本地存储
    localStorage.setItem('customTheme', JSON.stringify(themeData));
  } catch (err) {
    console.error('主题接口请求失败:', err);
  // 定义更新函数
  function updateCSSVariables(themeData) {
    const root = document.documentElement;
    root.style.setProperty('--v-primary', themeData.primary);
    root.style.setProperty('--v-secondary', themeData.secondary);
  function updateVuetifyTheme(themeData) {
    this.$vuetify.theme.themes.light.primary = themeData.primary;
    this.$vuetify.theme.themes.light.secondary = themeData.secondary;
    this.$vuetify.theme.themes.dark.primary = themeData.darkPrimary || themeData.primary;

在 nuxt.config.js 中注册插件（仅客户端运行）：

export default {