adaptive theme option

[EricWvi]

Enhancement

What about three options for Lychee, i.e., light, dark, system?
In system mode, it will follow the os's theme. So that Lychee is light during the day, and dark during the night.
Btw, appreciate the work. Nice project!

[ildyria]

I am going to leave this as a good first issue. I will not be working on this, but this is a good way to get into Lychee code base.

https://tailwindcss.com/docs/dark-mode#with-system-theme-support

Some inspiration

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
  "dark",
  localStorage.theme === "dark" ||
    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// Whenever the user explicitly chooses light mode
localStorage.theme = "light";
// Whenever the user explicitly chooses dark mode
localStorage.theme = "dark";
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("theme");

Files to modify are likely to be:

• https://github.com/LycheeOrg/Lychee/blob/master/resources/views/vueapp.blade.php#L31
• https://github.com/LycheeOrg/Lychee/blob/master/resources/js/components/settings/General.vue#L4
• and some others.