useColorSchemeVar

Specifies a string value based on the active color scheme.

Example

Change the color mode of in this site's header to see the color scheme alias change.

Color scheme alias: day

import React from 'react'
import {useColorSchemeVar} from '@primer/react'


export default function Default() {
  const colorSchemeVar = useColorSchemeVar({light: 'day', dark: 'night'}, 'other')


  return <span>Color scheme alias: {colorSchemeVar}</span>
}

import React from 'react'
import {useColorSchemeVar} from '@primer/react'

export default function Default() {
  const colorSchemeVar = useColorSchemeVar({light: 'day', dark: 'night'}, 'other')

  return <span>Color scheme alias: {colorSchemeVar}</span>
}

Best practices

Our design tokens handle all of GitHub's color schemes, so this hook should not be used to create custom color schemes.

API

Loading data for useColorSchemeVar...