Add dark mode colour

[seanmturley]

Description

So far the design (wireframes) and implementation have been largely black/white, with some grey.

Approach

Set colours via global CSS variables in App.css. The idea is to have several variables that describe functional roles in the design, so that change from a dark theme to a light theme should involve simply modifying these variables.

Task list

• [x] Add global CSS variables to App.css
• [x] Add colour to MainLayout
• [x] Add colour to NavBar
• [x] Add colour to PageHeadings
• [x] Add colour to SearchBar
• [x] Add colour to SearchDropdown
• [x] Add colour to SearchDropdownOption
• [x] Add colour to Card
• [x] Add colour to Filter
• [x] Add colour to Post
• [x] Add colour to LoadingOverlay
• [x] Add colour to DropdownMenu
• [x] Add colour to ToggleSwitch
• [x] Add colour to Comment
• [x] Review colour variables to ensure they match design
• [x] Review colour of visited links in Post and Comment

[seanmturley]

It turns out the XD colourspace is different to Chromium-based browsers, so what I was seeing in XD turned out different when I copied the colour values into the CSS. I've updated the CSS colour values to match what XD was actually displaying.

[seanmturley]

Added colour to Filters. This was relatively involved as I needed to add borders, placeholder icons, and even update some logic for default selections to full implement the colours as shown in the design.

[seanmturley]

Added colour to DropdownMenu, but not the ToggleSwitch inside it - I'll tackle this in a separate commit.

[seanmturley]

Added colour to Post, and changed --back-transparent colour variable to be darker and more opaque.

[seanmturley]

Noted that the colours in the browser still aren't a good match for my XD designs, so I've added a new task to the checklist: "Review colour variables to ensure they match design".

[seanmturley]

Not sure about visited links being coloured --front-weak, as the contrast with normal text (in --front) is poor. Adding a note to revise this when reviewing the colour variables.

[seanmturley]

Added colour to ToggleSwitch.

This included some minor HTML and logic changes for the switch, mostly changing so that "darkmode" corresponds with the "off" position of the switch - this better matches the expected colour/styling of a toggle switch which is normally displayed in a brighter/accent colour when turned on.

[seanmturley]

After a few failed attempts using online colour conversion tools online, I adjusted the colour palette by eye to better match the Adobe XD designs. It's not perfect, but it's close, which is good considering the issue of converting Adobe RGB to sRGB. The colours are a bit less saturated now, which was the intent.

[seanmturley]

After reviewing the colour of visited links in Post and Comment, I've decided to leave it as is. They don't have the best contrast with normal text, but the underline is probably sufficient.

[seanmturley]

This can probably be merged now. However, I'm going to sit on it until tomorrow to review the colours again with fresh eyes.

[seanmturley]

Changing task name from "Add colour" to "Add dark mode colour".

Going ahead with merge now. In any case, it's straightforward to tweak colours later if necessary.

[seanmturley]

Branch merged.

Closing task and deleting branch.