Global CSS
Learn how to customize global CSS in Chakra UI
info
Please read the overview first to learn
how to properly customize the styling engine, and get type safety.Example
Here's an example of how to customize the global CSS in Chakra UI.
theme.ts
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
globalCss: {
"*::placeholder": {
opacity: 1,
color: "fg.subtle",
},
"*::selection": {
bg: "green.200",
},
},
})
export const system = createSystem(defaultConfig, customConfig)
After customizing the global CSS, make sure to update your provider component to use the new system.
components/ui/provider.tsx
"use client"
import { system } from "@/components/theme"
import {
ColorModeProvider,
type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"
export function Provider(props: ColorModeProviderProps) {
return (
<ChakraProvider value={system}>
<ColorModeProvider {...props} />
</ChakraProvider>
)
}