Implementing dark mode in priceline design-system

Question

I am using priceline design-system and I confused about its dark mode support. What is the best way for implementing dark mode when using this design system? Should I create separate theme for dark or there is another way?

Answer 1

You can use <ThemeProvider> for this, like so:

    <ThemeProvider
  theme={{
    palette: {
      primary: {
        base: '#ff001d',
        dark: '#ffa52f'
      }
    }
  }}
>
  <Button>Custom</Button>
</ThemeProvider>

This outputs this with red being normal and orange being dark. It switches on mouse hover, but that's not shown with the GIF recording software I used.

With javascript you can do it using the following:

Syntax:

getPaletteColor(colorShade)(props)

getPaletteColor(color, shade)(props)

getPaletteColor(shade)(props)

Usage:

const Component = styled.div`
  color: ${getPaletteColor('primary.base')};
`

I'm not too sure about the javascript part myself, but it's correct according to multiple sources.