feat: optimze ui in dark mode, add color themes, replace dark mode impl, add debug inspector

[Innei]

Signed-off-by: Innei i@innei.in

Main Changes

1. Insert theme detect script to avoid page first fresh.
2. Init tailwind color palette
3. Fix some wrong color in dark mode
4. Unify header button UI style.

For DX

1. Add click-to-component to quick jump to code location from UI

[Innei]

---

[hyoban]

jotai-dark has disableTransition option too 🥹

https://github.com/hyoban/jotai-dark#usage

[Innei]

jotai-dark has disableTransition option too 🥹

hyoban/jotai-dark#usage

After customizing atomDark's configuration in the case of multiple windows, there may be issues in multiple windows

[Innei]

@hyoban Maybe there are some bugs in the color transition.

CleanShot.2024-06-03.at.4.29.06.mp4

[Innei]

@hyoban This way is possible, maybe there is a problem with the css injection script provided by jotai-dark

const isDarkAtom = atomDark({
  // disableTransition: true,

  storageKey: "theme",
  applyDarkMode(isDark) {
    const $css = document.createElement("style");
    $css.innerHTML = `* {
      transition: none !important;
    }`;
    document.head.appendChild($css);

    void document.body.offsetHeight;

    document.documentElement.dataset.theme = isDark ? "dark" : "light";

    void document.body.offsetHeight;
    $css.remove();
  },
});

[DIYgod]

The active status may no longer be necessary since the icon already indicates it. Additionally, the style of the active state feels somewhat discordant, I preferred the previous rounded

[DIYgod]

Also, I feel like this button is a bit big, what do you think?

[Innei]

I wonder if it would be better to unify the style of HeaderActionButton.

[DIYgod]

I think it's too tight here, it's better to keep a little padding

[Innei]

Would it be visually better to have the HeaderActionButton on the same baseline

[DIYgod]

I'm not sure, but you can try to improve it. I can merge this PR first since it includes other modifications.

[hyoban]

Just a note. Currently, jotai-dark will reset back to the system theme if user preference is the same as the system.