-
|
I'm trying to use Mantine with Nextra and am trying to get dark mode to sync between the 2. I try to get the theme using useTheme from the next-themes package, but it's not working in _app.js. I can access it in the component directly but now have to render the MantineProvider for each component. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
First you need to install the latest version of next-themes and nextra "dependencies": {
"next-themes": "0.2.0-beta.2",
"nextra-theme-docs": "2.0.0-alpha.54",
"nextra": "2.0.0-alpha.54"
....
}Then you should ba able to access the theme in _app.js import 'nextra-theme-docs/style.css'
import { useTheme } from 'next-themes'
import React from 'react'
const TestTheme = ({ children }) => {
const { theme, setTheme, systemTheme } = useTheme()
console.log('theme', theme, systemTheme)
return children
}
export default function MyApp({ Component, pageProps }) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout || (page => page)
return getLayout(
<TestTheme>
<Component {...pageProps} />
</TestTheme>
)
}Or you can find the theme from localStoreage |
Beta Was this translation helpful? Give feedback.
-
|
This is working great, but there is one bug. When I go from system to dark mode and refresh, the Mantine components go to light mode. You can try it here: https://docs.openship.org and the _app.js: https://github.com/openshiporg/docs/blob/main/pages/_app.js. |
Beta Was this translation helpful? Give feedback.
-
|
I tried this answer out in the blog theme, and useTheme still produces "theme undefined undefined" in the console. Here is the path in my node_modules to the nextra-theme-blog. C:\Users{username}\project\node_modules\nextra-theme-blog\node_modules\next-themes There is next-themes, nextra, and nextra-theme-blog in my node_modules. Am I supposed to remove next-themes from my dependencies? |
Beta Was this translation helpful? Give feedback.
-
|
Did you find a solution for this? @evanxshu |
Beta Was this translation helpful? Give feedback.
-
Having the same issue. Anyone has a solution? |
Beta Was this translation helpful? Give feedback.
-
|
@arno-fukuda A workaround is creating a new hook that sets a "isDarkMode" variable in my case: const { resolvedTheme } = useTheme();
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
setIsDarkMode(resolvedTheme === 'dark');
}, [resolvedTheme]);then using "isDarkMode" in the code to check what theme is used. |
Beta Was this translation helpful? Give feedback.
First you need to install the latest version of next-themes and nextra
Then you should ba able to access the theme in _app.js