Skip to content

Theme system overhaul#4212

Merged
AuroraLS3 merged 58 commits into
masterfrom
4114/theme-overhaul
Aug 17, 2025
Merged

Theme system overhaul#4212
AuroraLS3 merged 58 commits into
masterfrom
4114/theme-overhaul

Conversation

@AuroraLS3

@AuroraLS3 AuroraLS3 commented Aug 13, 2025

Copy link
Copy Markdown
Collaborator

This PR introduces a /theme-editor page to the website, complete with CRUD functionalities, css color definitions, as well as variable generation so that those colors can be selected for each element on the Plan website.

With this theme.yml files are removed and only World Pie colors remain in config.yml since they could not yet be reliably implemented in the current theme system due to limitations of the MultiSelect component. In the future there will be a Manage page for managing world settings that will include colors in order to replace the world pie color settings in config.yml files.

The goal for this system is to allow further customization of the website without needing to maintain Html customization, as well as sharing themes if wanting to do so.


There are two storage mechanisms to support both HTTP/export and HTTPS

  • Themes are stored in local storage of the browser, can be downloaded and placed in the web_themes directory in Plan folder
  • If authorized with manage.themes permission (HTTPS) user can press Save to store the theme in web_themes directory directly.
  • Theme editor is always available, except in HTTPS mode access.theme.editor permission is needed

Unrelated features implemented on this branch:

  • Session hijack vulnerability patched by linking cookies to IP addresses and using SecureRandom in cookie generation.
  • Kills tables now contain more values and can be searched or sorted
  • Translated all timestamps and time amounts based on selected locale
  • Translated Country names
  • Translated all Calendar content
  • Translated Query page content
  • Replaced all MultiSelect components with react-select which provides a more intuitive selection of multiple items
  • Performance graph tabs now sync their range selector so that you can switch between them easier
  • Network performance graph colors now vary between servers

TODO items before merge:

  • Fix color edit form showing some elements on top of Example section
  • Add examples for Tabs and Plugin colors
  • Check that all the buttons use proper components that are affected by style in theme-editor
  • Add monochromatic theme that was already implemented

TODO items after merge:

  • Update Highcharts so that appropriate locale can be applied

Affects issues:

AuroraLS3 added 30 commits June 8, 2025 21:01
Listed currently in-use colors and related use cases based on night mode overrides and easy to find elements

TODO:
- Persistence of current theme
- Color editor
- Use case previews
- Taking the new theme css to use
  - Using use case colors for things
- Theme selector
- Themes & theme storage
- Check that all elements are there
- Night mode support for theme editor
- Translation support for theme editor
- Take most colors into use in css
- Add some missing colors
- Translations
- Color CRUD functionalities
- Use case examples
- Reimplement color translation functions to use class based system
- Fixes to color translation functions
- Use theme system to generate theme css for the page
- Fixed some color conversion function issues
- Translation fixes for improved react-i18n usage
- Performance graph range selector sync between graphs
- Modal and Tab colors fixed
- Modal overlay fixed on night mode
- Theme text fixed on night mode
- Text color fixes
- Kills table searchability
- Graph colors now use same css variables on both light and night mode
- Fixed theme switching for main theme even when in editor
@AuroraLS3 AuroraLS3 merged commit 1674392 into master Aug 17, 2025
4 of 5 checks passed
@AuroraLS3 AuroraLS3 deleted the 4114/theme-overhaul branch August 17, 2025 07:55
VRXDev2 pushed a commit to VRXDev2/Plan that referenced this pull request Jan 5, 2026
Adds a new theme system to the website

Unrelated features implemented on this branch:

- Session hijack vulnerability patched by linking cookies to IP addresses and using SecureRandom in cookie generation.
- Kills tables now contain more values and can be searched or sorted
- Translated all timestamps and time amounts based on selected locale
- Translated Country names
- Translated all Calendar content
- Translated Query page content
- Replaced all MultiSelect components with react-select which provides a more intuitive selection of multiple items
- Performance graph tabs now sync their range selector so that you can switch between them easier
- Network performance graph colors now vary between servers

Affects issues:
- Close plan-player-analytics#4114
- Partially plan-player-analytics#3346
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.

Theme system overhaul

1 participant