Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

next js dark mode #8355

Open
1 of 3 tasks
calummoore opened this issue Mar 13, 2024 · 0 comments
Open
1 of 3 tasks

next js dark mode #8355

calummoore opened this issue Mar 13, 2024 · 0 comments
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode

Comments

@calummoore
Copy link

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

  • 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"
  }
@segunadebayo segunadebayo added the Topic: Color Mode 🌓 Issue or PR related to color mode label Mar 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Topic: Color Mode 🌓 Issue or PR related to color mode
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@calummoore @segunadebayo