feat: user theme selector; theme improvements;

[WanderGomes]

No description provided.

[github-actions]

If there are selenium UI results for this code they will be at filesenderuici@7d9d4f4

[github-actions]

If there are selenium UI results for this code they will be at filesenderuici@46dfa06

[github-actions]

If there are selenium UI results for this code they will be at filesenderuici@54a1937

[monkeyiq]

It would be nice to have more of a description.

It seems

• There is a new theme selector on the profile page which allows selecting a theme and that is only saved in the current browser session. A future PR will allow this to be saved in the database (if that is indeed something that is planned).
• There are theme modifications including the introduction of gold and silver contributors. These classes of contributors are outlined at http://www.example.com/link-here.

In this case when I go to the profile page I can select the dark theme but it is lost if I navigate to any other page from there or if I click on the save button on the profile page.

[WanderGomes]

@monkeyiq

The new theme selector feature works as follows:

The new FileSender UI has the following theme files, default.css (light) and dark.css, these theme files have the CSS 3.0 color variables used by pages and components, these variables can be modified and there can be several different themes. The theme selector feature only loads the CSS theme file selected by the user.

On the profile page, we have three theme options:

•⁠ ⁠Light
•⁠ ⁠Dark
•⁠ ⁠Device

The "device" theme is the theme selected by default, this theme follows the user's browser/OS theme, if the user's browser/OS theme is set to light, then FileSender will select and apply the light theme, if If the user's browser/OS theme is set to dark, then FileSender will select and apply the dark theme.

The user can change the theme on the profile page, there is no need to press the save button, it changes and saves the theme automatically. The selected theme is saved in the user's browser local storage, and whenever the user accesses FileSender, the theme.js file searches for the saved theme in local storage, and loads the previously chosen theme, if there is no saved theme, the user's browser/OS theme (device theme) is applied. The theme is applied to all FileSender pages.

I tried my best to explain the feature. If you require any further information, let me know.

[monkeyiq]

Thank you for the detailed description.