Refactor dark/light colour setup

Switch to css custom properties for text colours and background colours that are changed with the dark/light theme, this would remove a lot of the logic from the seperate scss components and make the codebase a lot cleaner:

I'd suggest something like defining:

--color-text;
--color-text-standout;
--color-background
--color-background-standout;

which we could then map to:

Light theme:

--color-text: $color--off-black;
--color-text-standout: $color--black;
--color-background: $color--light-grey;
--color-background-standout: $color--white;

Dark theme:

--color-text: $color--light-grey;
--color-text-standout: $color--white;
--color-background: $color--off-black;
--color-background-standout: $color--black;