feat(ui): Added theming support

[lupusA]

Hi,
this PR adds a preliminary theming support. Themes are defined in CSS and can be selected at the top right of the UI.

Note that this PR is currently a draft. The selection is not persistent and there is still some work to do. This PR also contains some minor code refactorings.

ui-theming-small.mp4

This PR closes #118

Cheers,

[jkowalski]

I've tried this and it is very nice feature, but we need some tweaks:

1. When I open the UI for the first time I get black-on-black experience:

My old ui-preferences.json had:

{"bytesStringBase2":false,"theme":"dark","pageSize":50}

Switching the theme to something else and switching back fixed the issue but it is annoying. Can we remap dark to dark-theme and light to light-theme when we fetch the preferences for backwards compatibility?

2. The font size for the drop-down is a tiny bit too large compared to other fonts - can you make it a notch smaller?

3. Also, would it make sense to introduce Preferences tab and move theme selector over there? I'm not sure the dropdown belongs on every single page.

4. Pastel scheme has black-on-dark red danger button which is hard to read, should it be white-on-red or use lighter red?

5. Section headers in pastel theme are too subtle pink on white which looks odd, perhaps make it darker purple:

7. The expanded dropdown weirdly overlaps with Repository/Update Description button:

[lupusA]

Hey @jkowalski,

will work on it on the weekend.

Cheers,

[lupusA]

Hi @jkowalski,

i worked in the preferences tab. Would you mind to test it?

Cheers,

[jkowalski]

This is looking very promising, i found couple issues:

1. When i hover over a link in dark mode, the text is dark-on-dark and unreadable:

2. Can we make the dark mode background closer to what it was before, right now the gray is quite bright.

3. In the preferences panel:

"Bytes to the base of 2"

Can we convert this to a 2-item drop-down or a radio button:

Size Display:
[x] Use base-10 suffixes (KB, MB, GB, TB)
[ ] Use base-2 suffixes (KiB, MiB, GiB, TiB)

4. Now that we have Page Size in preferences, can we make it editable and remove all the other page selectors froma actual tables?

5. As for the theme selection, can we make the dropdown narrower? Perhaps make the whole preferences panel 1/2 or 1/3 width until we have more controls to add there?

[lupusA]

Hey @jkowalski,

thanks for the feedback. The points you listed can easily be fixed. I will fix them in the next commit. Maybe, we need to rebase after that 😄

Considering point 4, I would argue that we keep it as a readonly preferences. I would find it cumbersome to switch back to the preferences tab to just change the pagination settings.

It is more convenient to set the page size below the actual table, when there are too many items.

What do you think?

Cheers,

[lupusA]

Hi @jkowalski,

point 5 is still open. The other points have been incorporated in the latest commit and can be tested.

Cheers,

[lupusA]

Hi @jkowalski,

i will finalize this pr on the weekend. There are some minor things to be solved related to the dark theme.

Would you mind checking if this PR than can be merged?

Cheers

[jkowalski]

This is great, we could probably improve theme selector a bit (icons instead of names), but i'm going to merge this and integrate into Kopia so folks can try it out.