[Feature] Customizable background theme colors

[fribbels]

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:

• 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

[fribbels]

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

[fribbels]

Resolved with customizable showcase card