Add light mode and always use blue as accent color

[winston-yallow]

Fixes #9 Fixes #5

Changes:

• introduces light mode
• changes dark mode to use blue for navigation badges

Screenshots from first draft (find the final screenshots in the comments further below)

ToDo: - [x] Change header image so that it fits to light mode - [x] Change navbar logo to have dark text This is still a work in progress. A few screenshots of what I have so far:   

[cynerboy]

It's great! Especially the background color, which is not completely white and is similar to the color of cream. I think the header photo is good and does not need to be changed, however, forgive me for causing you trouble.

[jwmcgettigan]

I think that the header image itself can work fine if the gradient overlay is adjusted. Rather than the top end of the gradient being completely transparent, I would make it partially transparent instead such as rgba(241, 241, 241, 0.63). The goal is to decrease the contrast between the header and the banner so that it is less hard on the eyes. Replacing with a light version of the image may also work.

Note: The logo is orange because I inverted the color to have the text be black when reviewing. Also, this screenshot isn't of your build, but me just updating some of the CSS values in the inspector for a quick feel so some things may not match.

I also think the background color of the header is just a tad too dark. I think a lighter color like #ededed as I implemented above would help.

Other than that, I think it looks great! Thank you for the hard work!

[winston-yallow]

Thanks for the feedback @jwmcgettigan!

I've adjusted the header to #ededed and used a darker font color for the logo. I've also created a new light mode version of the search background (see godotengine/godot-design#72).

In addition I made quaternary-low a bit darker and highlight-background brighter to increase the contrast on hovered navigation buttons and filled form input fields for better readability.

Navigation in dark mode looks nice too now:

Also category boxes now use a variation of the primary color, making them independent of the header background (this ensures consistent contrast across light and dark mode)

From my side this is good to be merged! :tada:

[winston-yallow]

If approved, will merge during Planned Maintenance

[akien-mga]

Navigation in dark mode looks nice too now:

At least on my phone, this seems lack in contrast for the active tab, I can't tell at a glance that "New" is selected, unlike the light theme.

But I'm happy with the changes overall, this can be deployed and tweaked further later.

[winston-yallow]

At least on my phone, this seems lack in contrast for the active tab, I can't tell at a glance that "New" is selected, unlike the light theme.

I should have clarified, "Latest" is the selected item. "New" is not selected, it's just showing the subtle mouse hover effect.

It's the same contrast as the current dark theme, just with blue instead of red as the color for navigation.