[FEAT] Dark Mode

[Liinkiing]

Add support for dark mode 🥵🥵

Inspired from chakra-ui and xstyled.dev.

It allows for example to use some hooks to set a value depending on the color mode, and add a new props in KleeProvider named defaultColorMode which can either be light | dark. It also add the beginning of styling some components (Menu, Popover or Tabs for exemple) in the theme, via their dedicated objects, to allow easy overriding between light and dark modes, but also it means that anyone can extendTheme and set their own color

Example

const appTheme = extendTheme({
  modes: {
    dark: {
      menu: {
        background: 'black',
        borderColor: 'white',
        optionGroup: {
          background: 'red',
          borderColor: 'cyan',
        },
      },
    },
    light: {
      menu: {
        background: 'white',
        borderColor: 'black',
        optionGroup: {
          background: 'blue',
          borderColor: 'violet',
        },
      },
    },
  },
})

When providing the appTheme to the KleeProvider it will automatically apply those colors on the Menu component and it will react to the color scheme changes.

More informations here: https://styled-system.com/guides/color-modes/

A lot of utility hooks have been introduced, à la xstyled.dev, you can find them in src/hooks/theme.ts.

For now, it does not provide a way to save in localstorage / cookies the preference nor use the media prefers color scheme. Maybe it will be implemented later, but for now it covers a use case that I had in one of my application, so for now I only need to set if I want to the library to be in dark mode or in light mode once.

Storybook

The storybook now introduces a dark mode toggler to test the various components in their light / dark modes.

[github-actions]

size-limit report 📦

Path	Size
dist/klee.cjs.production.min.js	133.64 KB (+0.91% 🔺)
dist/klee.esm.js	117.7 KB (+1.05% 🔺)