Customizing my website's colors

published 04/23/19

If you use Stylus and are interested in customizing the colours of this website, it should be very easy to do. All colors are declared as variables in a :root selector as follows:

:root {/* themes variables */
    /* universal */
    --colorBlack: black;
    --colorWhite: white;
    --colorHl: #be4318;
    --colorHlFaded: #b18879;
    /* dark */
    --colorBgDark: #333335;
    --colorBgDarkDarker: #232325;
    --colorFgDark: #d1d1d1;
    --colorFgDarkBolded: white;
    --colorFgDarkFaded: #87878c;
    --colorAcDark: #101013;
    /* light */
    --colorBgLight: #f9f9f9;
    --colorBgLightDarker: #e8e8e8;
    --colorFgLight: #4c4f59;
    --colorFgLightBolded: black;
    --colorFgLightFaded: #a9a9b3;
    --colorAcLight: #cccccc;
}

To change a color using Stylus, simply create a :root selector in your css and overwrite the variable. For example if you wanted to make links a nice light blue-ish colour, as is fairly standard on the web, you'd overwrite the --colorHl and --colorHlFaded variables. Hl here stands for highlight. Let's say I wanted to make the highlight #68a2ef , I'd simply write the custom css like this:

:root {
    --colorHl: #68a2ef;
    --colorHlFaded: #68a2ef;
}

That's it. No further coding is necessary for simply changing colors.