Create a Settings tab on the sidebar menu where the user can select a custom theme. Antd already provides some functionality for this that look quite nice: https://ant.design/
I believe the current theme color is defined here: https://github.com/fribbels/hsr-optimizer/blob/main/src/App.jsx#L17 and some of the components use hardcoded color values (like sliders) but those can probably be moved to color tokens. There are also some areas of the optimizer with colors that need to be overridden but it should be fairly easy to spot if the base theme is changed (see "Take screenshot" output for example).
Thoughts for implementation:
I would like the background to have a blurred image or have some blurred texture instead of just flat
We should maybe preset some themes (name them after characters?) and then allow a hex color selector for a custom theme
Motivation
Currently the optimizer is just blue
Goal
Create a Settings tab on the sidebar menu where the user can select a custom theme. Antd already provides some functionality for this that look quite nice: https://ant.design/
I believe the current theme color is defined here: https://github.com/fribbels/hsr-optimizer/blob/main/src/App.jsx#L17 and some of the components use hardcoded color values (like sliders) but those can probably be moved to color tokens. There are also some areas of the optimizer with colors that need to be overridden but it should be fairly easy to spot if the base theme is changed (see "Take screenshot" output for example).
Thoughts for implementation: