es en en en en en en en en en en en en en fi en en ca en en kn en en pt en en en hi en cv en en en en en en en en en en en en en en en en ja de en hbs_lat en es kn en en en en en en en en en en en en en en en en en en en en en en arz tr kn de en sv hbs_lat fr en en th en en fr en en hi en en la la en en tr en fr en en en en es kn en en en en la en en en es hbs_lat en fr en en th en en fr en en hi en en la la en en en en en en en es hbs_lat en fr en en en th en en fr en en hi en en la la en en en en en en en en
Primer Brand defines various global styling defaults using CSS variables, while also allowing app-level customization through its ThemeProvider.
CSS variables are available for most styling dimensions such as typography, color and sizing. They are defined in the primary stylesheet: main.css.
ThemeProvider extends theming capabilities at runtime by enabling real-time color mode switching among other things.
Using the CSS stylesheet and ThemeProvider in tandem is crucial to make theming work correctly.
The ThemeProvider should wrap your React application root to enable theming correctly. It can also be nested to apply isolated behavior to children.
The stylesheet contains all of the required rules for design tokens and components. It also includes a CSS reset, so we recommend loading this as early as possible in your HTML   to minimize undesirable rendering behavior.
Set a color mode
Primer Brand supports the following color modes through a dedicated prop by applying HTML data-* attributes:
The ThemeProvider applies the data attributes and handles state-changes internally.
ThemeProvider will apply light mode by default if the colorMode is not specified. This is recommended for top-level placement.
The following example demonstrates how light mode will enable by default, and can also be changed to dark declaratively:
const Example = () => { const [colorMode, setColorMode] = React.useState() const handleChange = (event) => { event.preventDefault() setColorMode('dark') } return (              Heading    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum.     {colorMode === 'dark' ? "I'm in dark mode now" : 'Switch to dark mode'}         ) } render(Example)
const Example = () => {
const [colorMode, setColorMode] = React.useState()
const handleChange = (event) => {
alt="placeholder, blank area with an off-white background color"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien
sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar
? "I'm in dark mode now"
: 'Switch to dark mode'}
Locking the color mode
For tighter control over appearance - such as forcing areas of a layout to appear in dark mode - we recommend nesting ThemeProvider and explicitly applying a color mode.
Heading    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum.    Call to action                       Heading    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus elementum.    Call to action
alt="placeholder, blank area with an off-white background color"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
alt="placeholder, blank area with an off-white background color"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien
sit ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar