[UI] Add Nord Light and Dark theme

[redromnon]

This PR adds the Nord Theme, specifically two variants - Light and Dark.

Also added separate variables

• --text-gametitle - Color of game's name on the game card
• --text-log - Color of the yellow warning text above the game's log

Nord Light

Nord Dark

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Add Nord Light Theme
• Add Nord Dark Theme
• Refactor Game's Title and Log text
• Refactor common CSS attributes
• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[redromnon]

@biliesilva Can you test this PR?

[biliesilva]

@biliesilva Can you test this PR?

Yes, I will finish some things that I'm doing and will test it :)

[biliesilva]

Invert the color of these icons/menus from this:

to this and set the inactive to #748AA0

I think is better to select another color for these icons, because it doesn't contrast with the background. Maybe this color:
#5FA1B4

Also, this color doesn't contract well with the background. Could you make these changes:

• Change the color of the links to #527AAA
• Change the Play button and Installed color to #639F30
• Change the settings buttons to #81A1C1

And this changes too:

[redromnon]

The thing is, I can't alter colors for most of the individual UI components easily. It would require a lot of refactoring.

For instance,

• The icons/buttons of the library follow --accent/ #88c0d0 for active and --text-default/#2e3440 for inactive state [1st Screenshot]
• The blue UI components of the game's settings page all follow the --accent theme which is #88c0d0
  [2nd Screenshot]
• The same applies for the Accounts page where the language selection follows the input field color like the search bar #adb2ba, Go To Library follows the --accent and the account name fields follow the same --background/#d8dee9 and --text-default
  [3rd Screenshot]

The current implmentation of the code is ideal for dark themes. The Nord Dark theme should be very straightforward to implement.
I'll see what I can do.

[flavioislima]

Yes, perhaps we need some variables that are specific to those action icons:
--action-icon, --action-icon-hover and --action-icon-active for instance.
I think we are overusing --accent right now, so would be good to split it.

[redromnon]

Maybe a separate PR can be created to address this and I can merge it into this PR.

[flavioislima]

Changed this one to ready to review to generate the builds but I forgot that it does not generate when it has conflicts.

[redromnon]

Fixed the conflicts for now.

Yes, perhaps we need some variables that are specific to those action icons:
--action-icon, --action-icon-hover and --action-icon-active for instance.
I think we are overusing --accent right now, so would be good to split it.

Will look into this.

[redromnon]

How about this look?

background - #eceff4
input dialogs/search box - #d8dee9

Makes the text and icon colours look clearer.

[biliesilva]

How about this look?

background - #eceff4 input dialogs/search box - #d8dee9

Makes the text and icon colours look clearer.

Looks better! We can collect some feedback after release and make some adjustments if needed.

[flavioislima]

Pretty good stuff, they look amazing. Thanks for that! ⚔️