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

Posted 2023-03-06

【中文标题】暗模式在带有 Nextjs 和 Typescript 的 Tailwind CSS V3 中不起作用

【英文标题】：Dark Mode not working in Tailwind CSS V3 with Next.js & Typescript

【发布时间】：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 我试试看，谢谢

【参考方案1】：

我最近是怎么做到的：

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

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