feat: add dark theme support

[ecmchow]

Added dark theme support

1. Moved common colors to CSS variables to allow theme switching
2. Added theme toggle button in sidebar
3. Use prefers-color-scheme as default value
4. User selected/toggled theme will be persisted via localStorage

Screenshots:

[d1wilko]

@ecmchow this is really cool

but it's a big change, so I will need to take some time to go through it

Thanks for the work on this

[d1wilko]

hey @ecmchow just a heads up that I have asked one of our designers to look at your PR to make sure they are happy

they might ask for some color changes but we will address that if/when it happens :)

[ecmchow]

@d1wilko Thanks for letting me know. I've kind of guessed the purpose of these color and hand-picked the dark theme color by reducing lightness only, so it might not fit the design system/standard. So feel free to adjust the color and variable names to your needs :)

[d1wilko]

hey @ecmchow great work on this - some suggestions to improve it a little :)

[d1wilko]

does this need 2 semi ciolons?

[d1wilko]

is useEffect needed here?

[d1wilko]

I think we can simplify this a bit - there no need for state AND localStorage - localStorage should suffice

something like this could work

import { useEffect } from 'react';

import useLocalStorage from './use-local-storage';

const DARK = 'dark';
const LIGHT = 'light';

const useTheme = () => {
  const isSystemThemeDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches === true;

  const [storedTheme, setStoredTheme] = useLocalStorage('selected_theme', isSystemThemeDark ? DARK : LIGHT);

  useEffect(() => {
    if (
      (storedTheme === DARK)
    ) {
      document.body.classList.add(DARK);
    } else {
      document.body.classList.remove(DARK);
    }
  }, [storedTheme]);

  const toggleTheme = () => {
    setStoredTheme(storedTheme === DARK ? LIGHT : DARK);
  };

  return { storedTheme, toggleTheme };
};

export default useTheme;

[d1wilko]

I'm not sure what the theme is?

[d1wilko]

if you change the hook - this will need to change :)

[ecmchow]

@d1wilko Thanks for the suggestions. I've simplified the theme hook and cleanup the style a bit, please have a look and let me know if there is more comments :)

[d1wilko]

looks great thank you

I need to make some changes to the colors as per our UX guys but I will do that and add you as a reviewer before we do a proper release