Next.js多主题网站CSS变量更新异常及初始主题闪烁问题求助

一、修复主题bg-color不生效问题 #

当前CSS中body的背景色直接引用:root的--bg-color，而主题变量定义在页面子容器的[data-theme]选择器下，由于CSS变量的作用域规则，:root的变量优先级更高，body无法继承子容器的变量值。

修复步骤： #

1. 修改CSS选择器，将主题变量直接定义在:root[data-theme="xxx"]下，覆盖:root的默认变量：

body {
  margin: 0;
  font-family: Inconsolata, monospace;
  background-color: var(--bg-color);
}

:root {
  --bg-color: #262a33;
  --main-color: #43ffaf;
  --sub-color: #526777;
  --sub-alt-color: #1f232c;
  --text-color: #e5f7ef;
  --error-color: #ff5f5f;
}

/* 直接在根元素上定义主题变量，覆盖默认值 */
:root[data-theme="superuser"] {
  --bg-color: #262a33;
  --main-color: #43ffaf;
  --sub-color: #526777;
  --sub-alt-color: #1f232c;
  --text-color: #e5f7ef;
  --error-color: #ff5f5f;
}

/* 示例：添加其他主题 */
:root[data-theme="light"] {
  --bg-color: #ffffff;
  --main-color: #2ecc71;
  --sub-color: #bdc3c7;
  --sub-alt-color: #f8f9fa;
  --text-color: #2d3436;
  --error-color: #e74c3c;
}

2. 移除[data-theme]中多余的background-color设置（原代码中先设置背景色再定义变量，会导致使用旧变量值）。

二、修复页面刷新时Navbar主题闪烁问题 #

闪烁原因是服务端渲染时，Redux主题状态未初始化，页面默认使用:root的主题，客户端hydrate后才切换到选中主题。需在服务端渲染阶段就设置正确的主题属性。

修复步骤： #

1. 将主题存入Cookie：在切换主题的Redux Action中，把主题值写入Cookie，确保服务端能读取：

export const setTheme = (theme) => {
  // 写入Cookie，有效期1年
  document.cookie = `theme=${theme}; expires=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString()}; path=/`;
  return { type: 'SET_THEME', payload: theme };
};

2. 自定义Next.js _document.tsx：在服务端渲染时从Cookie读取主题，添加到<html>标签的data-theme属性：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 从请求Cookie中获取主题，默认使用"superuser"
    const theme = ctx.req?.cookies?.theme || 'superuser';
    return { ...initialProps, theme };
  }

  render() {
    return (
      <Html data-theme={this.props.theme}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. 同步Redux初始状态：在Reducer中，客户端从Cookie读取主题，保证初始状态与服务端一致：

const initialState = {
  preferences: {
    // 客户端从Cookie读取，服务端默认用"superuser"
    theme: typeof window !== 'undefined' 
      ? document.cookie.split('; ').find(row => row.startsWith('theme='))?.split('=')[1] || 'superuser' 
      : 'superuser'
  }
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_THEME':
      return {
        ...state,
        preferences: {
          ...state.preferences,
          theme: action.payload
        }
      };
    default:
      return state;
  }
}

4. 移除Layout中的冗余设置：由于已在<html>标签上设置data-theme，Layout组件中的<div data-theme={theme}>可以删除，避免重复设置。

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