chakra-ui icon indicating copy to clipboard operation
chakra-ui copied to clipboard

Published 20 hours ago • verified publisher icon chakra-ui

next js dark mode

Open calummoore opened this issue 11 months ago • 2 comments

Description

I only want to use dark mode. I've tried setting it in every place possible.

layout.tsx

import type { Metadata } from 'next'
import { Providers } from './providers'
import { ColorModeScript } from '@chakra-ui/react'
import { theme } from './theme'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={steradian.className}>
        <ColorModeScript initialColorMode='dark' storageKey='payy.network.color.mode' type='cookie' />
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

providers.tsx

'use client'

import { theme } from './theme'
import { ChakraProvider } from '@chakra-ui/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ChakraProvider theme={theme}>
        {children}
      </ChakraProvider>
    </>
  )
}

theme.ts

export const theme = extendTheme({
  initialColorMode: 'dark',
  useSystemColorMode: false
})
Screenshot 2024-03-12 at 23 16 49

Link to Reproduction

n/a

Steps to reproduce

Load page

Chakra UI Version

2.2.0

Browser

Brave

Operating System

  • [X] macOS
  • [ ] Windows
  • [ ] Linux

Additional Information

  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/next-js": "^2.2.0",
    "@chakra-ui/react": "^2.8.2",
    "@codemirror/lang-javascript": "^6.2.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@uiw/codemirror-theme-atomone": "^4.21.24",
    "@uiw/codemirror-theme-tokyo-night": "^4.21.24",
    "@uiw/codemirror-theme-vscode": "^4.21.24",
    "@uiw/react-codemirror": "^4.21.24",
    "add": "^2.0.6",
    "axios": "^1.6.7",
    "chakra-ui-flashless": "^0.0.8",
    "framer-motion": "^11.0.8",
    "lodash": "^4.17.21",
    "next": "14.1.3",
    "react": "^18",
    "react-async-hook": "^4.0.0",
    "react-dom": "^18",
    "react-resizable": "^3.0.5",
    "yarn": "^1.22.22"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-resizable": "^3.0.7",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "typescript": "^5"
  }

calummoore avatar Mar 13 '24 03:03 calummoore

I'm also running into the same issue running NextJs aswell...

kengeene avatar Jun 04 '24 16:06 kengeene

Have you tried creating a config variable with the ThemeConfig type and passing that in to extendTheme?

const config: ThemeConfig = {
  initialColorMode: 'dark',
  useSystemColorMode: false,
};

const theme = extendTheme({
  config,
});

This is how I've set up my theme within my Next.js app and I'm able to default to dark mode as well as toggle to light mode. I have no global.css file either to avoid potential unnecessary overrides.

McC4b3r avatar Jul 26 '24 17:07 McC4b3r