Skip to content

[Feature 693] Change theme selection control#708

Open
denete wants to merge 3 commits intoaccius:Stagingfrom
denete:feature-693
Open

[Feature 693] Change theme selection control#708
denete wants to merge 3 commits intoaccius:Stagingfrom
denete:feature-693

Conversation

@denete
Copy link
Contributor

@denete denete commented Mar 10, 2026

What does this PR do?

The current button approach does not lend itself to offering more than a small handful of themes. With the idea of allowing more user-contributed themes, moving to a more compact interface would be preferred. This PR does the following.

  • Replaces buttons with a select element
  • Includes a theme preview element
  • Includes a custom theme reset to reset colors to the default theme colors
  • Adds translations for the new interface
  • Removes code that was used for the button interface
  • Fixes bugs with the rgba color selectors regarding setting the values of the components
  • Removes the fixed hue settings to allow users full freedom with the custom theme

Type of change

  • Bug fix
  • New feature
  • Performance improvement
  • Refactor / code cleanup
  • Documentation
  • Translation
  • Map layer plugin

How to test

  1. Open settings and select display
  2. Select a theme and confirm that it loads and the preview updates
  3. Select custom theme and adjust colors
  4. Select reset custom theme button and confirm reset to default theme colors

Checklist

  • App loads without console errors
  • Tested in Dark, Light, and Retro themes
  • Responsive at different screen sizes (desktop + mobile)
  • If touching server.js: caches have TTLs and size caps (we serve 2,000+ concurrent users)
  • If adding an API route: includes caching and error handling
  • If adding a panel: wired into Modern, Classic, and Dockable layouts
  • No hardcoded colors — uses CSS variables (var(--accent-cyan), etc.)
  • No .bak, .old, console.log debug lines, or test scripts included

Screenshots (if visual change)

Before...
Screenshot 2026-03-10 181136

After...

Screenshot 2026-03-10 180806 Screenshot 2026-03-10 180934 Screenshot 2026-03-10 181021

denete added 3 commits March 10, 2026 10:28
added a preview panel to let users see theme as selected,
changed to hex only to avoid bug with rgba selector and custom
theme storage, included theme attribute removal in application of
custom theme
incorrectly with a string instead of an object, moved excessive styles
from style preview to main.css, added reset for custom theme, added
translations for theme reset, removed unused functions from the button
theme selectors
passed by props from a parent, added translations for sample button text
@denete
Copy link
Contributor Author

denete commented Mar 10, 2026

This addresses #693.

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