Skip to content

Implement Dark Theme and Theme Switcher#537

Open
cactysman wants to merge 1 commit into
undergroundwires:masterfrom
cactysman:feat/dark-theme
Open

Implement Dark Theme and Theme Switcher#537
cactysman wants to merge 1 commit into
undergroundwires:masterfrom
cactysman:feat/dark-theme

Conversation

@cactysman

@cactysman cactysman commented May 28, 2025

Copy link
Copy Markdown

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

cactysman commented May 28, 2025

Copy link
Copy Markdown
Author

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