由于系统颜色模式，Chakra UI 颜色模式在页面刷新时更改答案

【问题标题】：Chakra UI color mode changes on page refresh, because of system color mode由于系统颜色模式，Chakra UI 颜色模式在页面刷新时更改
【发布时间】：2022-04-23 21:34:02
【问题描述】：

我正在使用 Chakra UI 运行 NextJS，问题是当 useSystemColorMode 设置为 true 时，它会忽略用户在页面刷新时的选择并将其设置回系统颜色模式。例如。系统颜色模式为深色，用户将按钮切换到浅色模式，然后刷新页面，这会自动撤消浅色模式并将其设置回深色。我希望它保持轻盈。

注意：当使用系统作为初始颜色模式时，主题会随着系统偏好而改变。但是，如果用户手动选择了另一个主题，则该主题将在下一页加载时使用。要将其重置为系统偏好，只需从 localStorage 中删除 chakra-ui-color-mode 条目。

我期望初始颜色模式是系统颜色模式（在我的情况下 = 深色），当用户将按钮切换到浅色模式时，在页面刷新时它应该保持浅色。

pages\dogs.tsx（这里是切换亮/暗模式）

import { Button, useColorMode } from '@chakra-ui/react';
import Head from 'next/head';
import Link from 'next/link';

import { LoginWithCentredForm } from '@components/LoginWithCentredForm';

const Dogs = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <>
      <Head>
        <title>Dogs</title>
      </Head>
      <h1>Dogs</h1>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </Button>
      <h2>
        <Link href="/">
          <a>Go back home!</a>
        </Link>
        <LoginWithCentredForm />
      </h2>
    </>
  );
};

export default Dogs;

主题\index.tsx

import { extendTheme, ThemeConfig } from '@chakra-ui/react';

export const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: true,
};

export const theme = extendTheme({
  config,
  fonts: {
    heading: 'Work Sans, system-ui, sans-serif',
    body: 'Inter, system-ui, sans-serif',
  },
});

pages\_documents.tsx

import { ColorModeScript } from '@chakra-ui/react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

import { theme } from '../theme';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&family=Inter:wght@400;500;600;700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

pages\_app.tsx

import type { AppProps } from 'next/app';
import { ChakraProvider, CSSReset } from '@chakra-ui/react';

import { theme } from '../theme';

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ChakraProvider theme={theme}>
      <CSSReset />
      <Component {...pageProps} />
    </ChakraProvider>
  );
};

export default App;

【问题讨论】：

标签： typescript next.js chakra-ui

【解决方案1】：

我使用 useEffect 在组件安装后立即将颜色模式切换到正确的模式，延迟 1.5 秒，我注意到它在没有延迟的情况下无法正常工作。

useEffect(() => {
    if (localStorage.getItem('chakra-ui-color-mode') === 'light' && colorMode === 'dark') {
      setTimeout(() => toggleColorMode(), 1500)
    } else if (localStorage.getItem('chakra-ui-color-mode') === 'dark' && colorMode === 'light') {
      setTimeout(() => toggleColorMode(), 1500)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

【讨论】：