我一直在努力使我的 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: [],
};
uj5u.com熱心網友回復：
我最近的做法是：
將darkMode: 'class',添加到您的組態檔中。
然后你可以手動將 className "dark" 附加到 body 標簽，當你想啟用暗模式時，所有的dark:tailwind-class東西都會啟用。您也可以按部分進行。這是檔案https://www.tailwindcss.com/docs/dark-mode
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/382654.html