Set colour in CSS not JavaScript

 It really is best to set colours in CSS and not JavaScript.

Then I found it is easy to change to a high-contrast colour palette by just creating a stylesheet to override the normal colours.

The idea is you change colours by addng a CSS class rather than setting the 'color' property of an HTML element.

But sometimes I calculate colours in a range between two colours or calculate the effect of overlaying one semi-transparent colour onto another. Here, I think it would be too long-winded to put the colours in CSS rules. But this means I have to re-colour all the parts of the boards in my game when I change to a high-contrast palette.  

One good thing I had done was to have lots of options on a settings screen to change aspects of my game. So when I change to a high-contrast paletter all I have to do mostly is to run the code that runs when an option is changed. By contrast, some people say you should show the user just a few options.

Another good thing about adding a high-contrast palette was that it got me back into lots of old code.

I dynamically create stylesheets a lot, a bit like this:

    var stylesheet = document.createElement('style');

    var mHeadElement = document.getElementsByTagName('head')[0];

    mHeadElement.appendChild(stylesheet);

And it is similarly easy to remove these stylesheet afterwards 

There are more tips at: bbingo.xyz/t