fribbels / hsr-optimizer

A Honkai Star Rail optimizer, relic scorer, damage calculator, and various other tools for building and gearing characters
https://fribbels.github.io/hsr-optimizer/
MIT License
208 stars 42 forks source link

[Feature] Customizable background theme colors #188

Open fribbels opened 3 months ago

fribbels commented 3 months ago

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/

Image

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:

Image

fribbels commented 2 months ago

I theme-ified the app's colors in https://github.com/fribbels/hsr-optimizer/blob/679dc5c4e00f2400accc78e414048c19b6a32f9e/src/lib/theme.ts#L20

But still needs work to allow a custom theme color gen