Introduction
The colors of a web page are the most fundamental thing to choose in order to feel at home and to reflect who we are. Let’s see where Polyglot Tech Blog colors are defined in order to modify them.
Syntax highlight
If you plan to use syntax highlighting, you may wish to change the highlighting style as well. As you can imagine, this happens in the files src > css > code-highlight-dark.njk and src > css > code-highlight-light.njk.
These two templates actually contain CSS and result in two CSS style sheets that are alternatively added depending on the selected color schema. By default, the light theme is the “prism-coy” theme provided with PrismJS. Any theme provided as an NPM package could be added the same way.
The dark theme is based on Gruvbox dark theme by Azat S.. However, it was a bit modified to pass the automated accessibility tests done by axe browser extension. So in that case, the CSS code was simply copied and modified in the src > css > code-highlight-dark.njk file.
Conclusion
We have seen what files we have to modify or replace to change our blog colors. But be wise when choosing your colors and keep in mind that accessibility depends a lot on colors contrast. If you want to assess the accessibility of your color schema, the article about blog metrics should give you more insight.