Skip to content

Implement Dark Theme and Theme Switcher #537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

cactysman
Copy link

@cactysman cactysman commented May 28, 2025

These changes are a take on implementing a dark theme (and a theme switcher) for #205.

Screenshot

  • since the splash screen is not a Vue component, it has some primitive @media(prefers-color-scheme: dark) styling
  • the TheThemeChanger component has been implemented similar to how TheViewChanger was implemented
  • the colors and the Ace editor's theme now depend on the system's color preference that can be overridden (but not persisted) with the TheThemeChanger component
  • the colors for the dark theme are mostly derived from the light theme (sometimes just switching front and back colors) or have adjusted lightness

Note

The way the color variable management looks now might actually be a little sloppy and since I'm not a designer, the dark colors might not be ideal at all, but it's a starting point!

@cactysman
Copy link
Author

cactysman commented May 28, 2025

Also I just blindly picked the "Twilight" theme (view themes here) for the Ace editor in the dark theme, that might require some more decision-making to find something that looks nice and fits in with the rest of the color scheme (note that the color for highlighted code has been and still is custom, though).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant