Provide themes without any wrappers

.changeset/silly-walls-pump.md

@@ -0,0 +1,12 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+Provide themes without any wrappers
+
+- It makes it easy to switch to next.js app router and utilize server components
+- Wrapper would force everything to be client component.
+- Has more granular configuration for theme and colorScheme
+- Possibility of adding theme sets - i.e., dark and light variants of each theme.
+

docs/pages/docs/docs-theme/api/use-config.mdx

@@ -37,8 +37,8 @@ context.
   [Navigation](/docs/docs-theme/theme-configuration#navigation)
 - `themeSwitch`: data about
   [Theme Switch](/docs/docs-theme/theme-configuration#theme-switch)
-- `nextThemes`: data about theme configuration (see
-  [pacocoursey/next-themes](https://github.com/pacocoursey/next-themes))
+- `nextjs-themes`: data about theme configuration (see
+  [react18-tools/nextjs-themes](https://github.com/react18-tools/nextjs-themes))
 - `notFound`: data to display when the page is not found
 - `primaryHue`: data about
   [Theme Color](/docs/docs-theme/theme-configuration#theme-color)

docs/pages/docs/docs-theme/theme-configuration.mdx

@@ -183,10 +183,10 @@ Customize the theme behavior of the website.
       <>
         Configuration for the{' '}
         <a
-          href="https://github.com/pacocoursey/next-themes#themeprovider"
+          href="https://github.com/react18-tools/nextjs-themes/blob/main/guides/getting-started.md#configuration"
           target="_blank"
         >
-          next-themes
+          nextjs-themes
         </a>{' '}
         package.
       </>

package.json

@@ -49,7 +49,6 @@
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "@mdx-js/react": "^2.3.0",
-      "next-themes": "^0.2.1",
       "next": "13.5.6"
     },
     "patchedDependencies": {

packages/nextra-theme-blog/package.json

@@ -61,7 +61,7 @@
     }
   },
   "dependencies": {
-    "next-themes": "^0.2.1"
+    "nextjs-themes": "^4.0.1"
   },
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",

packages/nextra-theme-blog/src/cusdis.tsx

@@ -1,6 +1,6 @@
-import { useTheme } from 'next-themes'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
+import { useTheme } from 'nextjs-themes'
 import type { ReactElement } from 'react'
 import { useEffect } from 'react'
 import { useBlogContext } from './blog-context'

packages/nextra-theme-blog/src/index.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from 'next-themes'
+import { ThemeSwitcher } from 'nextjs-themes'
 import type { NextraThemeLayoutProps } from 'nextra'
 import type { ReactElement, ReactNode } from 'react'
 import { ArticleLayout } from './article-layout'
@@ -41,15 +41,16 @@ export default function Layout({
   const extendedConfig = { ...DEFAULT_THEME, ...context.themeConfig }
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <>
+      <ThemeSwitcher />
       <BlogLayout config={extendedConfig} opts={context.pageOpts}>
         {children}
       </BlogLayout>
-    </ThemeProvider>
+    </>
   )
 }
 
-export { useTheme } from 'next-themes'
+export { useTheme } from 'nextjs-themes'
 export { useBlogContext } from './blog-context'
 export { getStaticTags } from './utils/get-tags'
 export * from './types'

packages/nextra-theme-blog/src/theme-switch.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from 'next-themes'
+import { useTheme } from 'nextjs-themes'
 import { useMounted } from 'nextra/hooks'
 import { MoonIcon, SunIcon } from 'nextra/icons'
 

packages/nextra-theme-docs/package.json

@@ -47,7 +47,7 @@
     "intersection-observer": "^0.12.2",
     "match-sorter": "^6.3.1",
     "next-seo": "^6.0.0",
-    "next-themes": "^0.2.1",
+    "nextjs-themes": "^4.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "zod": "^3.22.3"
   },

packages/nextra-theme-docs/src/components/head.tsx

@@ -1,7 +1,7 @@
 import type { NextSeoProps } from 'next-seo'
 import { NextSeo } from 'next-seo'
-import { useTheme } from 'next-themes'
 import NextHead from 'next/head'
+import { useTheme } from 'nextjs-themes'
 import { useMounted } from 'nextra/hooks'
 import type { ReactElement } from 'react'
 import { useConfig } from '../contexts'

packages/nextra-theme-docs/src/components/theme-switch.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from 'next-themes'
+import { useTheme } from 'nextjs-themes'
 import { useMounted } from 'nextra/hooks'
 import { MoonIcon, SunIcon } from 'nextra/icons'
 import type { ReactElement } from 'react'

packages/nextra-theme-docs/src/contexts/config.tsx

@@ -1,4 +1,4 @@
-import { ThemeProvider } from 'next-themes'
+import { ThemeSwitcher } from 'nextjs-themes'
 import type { FrontMatter, PageMapItem, PageOpts } from 'nextra'
 import { metaSchema } from 'nextra/normalize-pages'
 import type { ReactElement, ReactNode } from 'react'
@@ -108,19 +108,14 @@ export const ConfigProvider = ({
     frontMatter: pageOpts.frontMatter
   }
 
-  const { nextThemes } = extendedConfig
+  const { nextThemes: nextjsThemes } = extendedConfig
 
   return (
-    <ThemeProvider
-      attribute="class"
-      disableTransitionOnChange
-      defaultTheme={nextThemes.defaultTheme}
-      storageKey={nextThemes.storageKey}
-      forcedTheme={nextThemes.forcedTheme}
-    >
+    <>
+      <ThemeSwitcher {...nextjsThemes} />
       <ConfigContext.Provider value={extendedConfig}>
         <MenuProvider value={{ menu, setMenu }}>{children}</MenuProvider>
       </ConfigContext.Provider>
-    </ThemeProvider>
+    </>
   )
 }

packages/nextra-theme-docs/src/index.tsx

@@ -262,7 +262,7 @@ export {
   Card,
   FileTree
 } from 'nextra/components'
-export { useTheme } from 'next-themes'
+export { useTheme } from 'nextjs-themes'
 export { Link } from './mdx-components'
 export {
   Bleed,