flo-bit
commented
3 months ago I like the light mode design.
For the modifiers, the way you're currently doing it, seems very painful and hard to maintain and also breaks on reactive changes.
See this example: (changing to light mode and then searching adds new items that don't have the correct styles).
With tailwind what you usually do is add classes with the dark: modifier, like so:
<div class="text-black dark:text-white">Hello there</div>and then it will just magically switch text color, depending on the mode (which you can set by adding and removing the dark class to the body and setting darkMode: 'class' in tailwind.config.js).
I've set up the above and changed the ThemeToggle and SearchBar to use those dark: modifiers (there's also active: and hover: modifier for pressing down and hovering respectively) as an example (see my commit). If you could switch all the other elements to that, that would be great.
just a quick heads up: you leaked your youtube api key with this PR, depending on what permissions you gave that key someone could do lots of stuff with that, you should delete that as soon as possible!