暗模式在带有 Nextjs 和 Typescript 的 Tailwind CSS V3 中不起作用答案

【问题标题】：Dark Mode not working in Tailwind CSS V3 with Next.js & Typescript暗模式在带有 Nextjs 和 Typescript 的 Tailwind CSS V3 中不起作用
【发布时间】：2022-01-18 22:33:21
【问题描述】：

我一直在努力使我的 Next.js 应用程序中的暗模式工作。我正在使用 Context 来处理暗模式下的更改，并尝试使用 getLayout 功能为应用程序获得类似应用程序的体验。这是目录中不同文件的代码。

对于src/contexts/color-mode.tsx：

import { createContext, useContext, FC, useState } from "react";

interface IThemeContext {
  dark: boolean;
  toggleDark?: () => void;
}

const defaultState = {
  dark: false,
};

const ThemeContext = createContext<IThemeContext>(defaultState);

export const useTheme = () => useContext(ThemeContext);

const ThemeProvider: FC = ({ children }) => {
  const [dark, setDark] = useState(defaultState.dark);
  const toggleDark = () => {
    setDark(!dark);
  };
  return (
    <ThemeContext.Provider value={{ dark, toggleDark }}>
      {dark ? <div className="dark">{children}</div> : <div>{children}</div>}
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

对于src/pages/index.tsx：

import { useTheme } from "contexts/color-mode";
import { NextPageWithLayout, Marketing } from "layouts";

const Page: NextPageWithLayout = () => {
  const { toggleDark } = useTheme();
  return (
    <div className="flex items-center justify-center flex-col">
      I hoped that this would render ahout now!
      <span className="text-red-600">Does this render!?</span>
      <button
        onClick={toggleDark}
        className="text-white bg-black rounded-md px-3 py-2 dark:text-black dark:bg-white"
      >
        Toggle Mode
      </button>
    </div>
  );
};

Page.getLayout = (page) => <Marketing>{page}</Marketing>;

export default Page;

src/layouts/marketing.tsx中主页的布局：

import { Navbar } from "components";
import type { FC } from "react";

const Marketing: FC = ({ children }) => {
  return (
    <div className={"min-h-screen w-screen"}>
      <Navbar />
      <p>This is the marketing pages layout.</p>

      {children}
    </div>
  );
};

export default Marketing;

导航栏除了一些样板文件之外不包含任何内容。

_app 的代码在src/pages/_app.tsx:

import { useEffect } from "react";
import ThemeProvider from "contexts/color-mode";
import { EnhancedApp } from "layouts";
import { noCopy } from "utils";
import "styles/tailwind.css";

const MyApp = ({ Component, pageProps }: EnhancedApp) => {
  useEffect(() => {
    noCopy();
  }, []);
  const getLayout = Component.getLayout ?? ((page) => page);
  return (
    <ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
  );
};

export default MyApp;

No Copy 函数处理不使用 react 特性的 dom。

如果您能提供帮助，那将不胜感激。提前致谢。

这里是tailwind.config.js：

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

【问题讨论】：

你能发布你的顺风配置文件吗
@lockednlevered 当然，这里是：
module.exports = { 内容：["./src/**/*.{js,ts,jsx,tsx}"]，主题：{ 扩展：{}，}，插件： [], };
我最近的做法是：将darkMode：'class'，添加到您的配置文件中，当您想要启用暗模式时，您可以手动将类“dark”附加到body标签，然后所有的黑暗：顺风级的东西都将启用。您也可以在每个部分上执行此操作。这里的基础是文档tailwindcss.com/docs/dark-mode
@lockednlevered 我试试看，谢谢

标签： reactjs typescript next.js tailwind-css use-context

【解决方案1】：

我最近是怎么做到的：

将darkMode: 'class', 添加到您的配置文件中。

然后你可以手动将className“dark”附加到body标签，当你想启用暗模式时，所有dark:tailwind-class的东西都会启用。您也可以按部分进行。这是文档https://www.tailwindcss.com/docs/dark-mode

【讨论】：