search

pacocoursey / next-themes

Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
https://next-themes-example.vercel.app/
MIT License
4.92k stars 176 forks source link

[Wish] Theme only for subpages or subcomponents #219

Open rafalzawadzki opened 11 months ago

rafalzawadzki commented 11 months ago

Currently the ThemeProvider does not scope themes to its children, so themes apply to the whole document. This makes it very cumbersome to exclude some pages from theming (only with workarounds like https://github.com/pacocoursey/next-themes/issues/203 or https://github.com/pacocoursey/next-themes/issues/187) and impossible to theme specific component trees.

Use case: Create a customisable widget. Have a dashboard with a single default theme, but the themes inside widgets to be changeable.

For example in pseudocode:

<ThemeProvider forceTheme='light'>
  <Dashboard />
  <ThemeProvider forceTheme='dark'>
    <Widget /> // ❌ <-- This does not work; both dashboard and widget will have the same theme
  </ThemeProvider>
</ThemeProvider>

The same applies to pages and layouts within - it's impossible to nest themes or even make only one part of your app themable. For example:

<>
  <Dashboard />  // ❌ <-- This does not work; the dashboard will have dark theme even though it's out of scope
  <ThemeProvider forceTheme='dark'>
    <Page />
  </ThemeProvider>
</>

Any idea if this is possible at all or requires a custom solution?

merzoo commented 10 months ago

i got same issue in next13.5.4 app dir