So here’s something you may not have known: you can make SuttaCentral display in whatever colors you think are prettiest! Yes!
Currently we have an awesome “Dark Theme” for all the lovers of darkness. But, due to the incredibly incredible care and attention that has gone into SC’s coding, you can easily make you own color scheme. Here’s how.
- Install “Stylus” from the Chrome or Firefox extension store.
- Note bene! Avoid the similar extension “Stylish”, which has been caught nicking user info!
- Add a new theme, “suttacentral”, and apply it to URLs starting with
https://suttacentral.net/
. - Paste the SC color set into the editor, and edit as you please.
- Save and enjoy!
When making the site we went through it in detail and extracted all colors into a separate file, and reduced the number of colors as much as we could. It’s not a simple task! But the end result is, all you have to do is change those colors and it themes the whole site.
A few caveats:
- In one or two places the colors are outside this scheme.
- You can only replace the colors wholesale. You can’t say, I want this to be that color here and this color there. Well, you can, it just won’t do you any good!
- This applies to our main site, not to this forum.
Here’s a color scheme I made, from the famous color scheme “Solarized”, which was, incidentally, designed by an ex-monk. I just threw it together in a few minutes, so it will not be perfect.
html {
--sc-primary-text-color: #586e75;
--sc-secondary-text-color: #93a1a1;
--sc-tertiary-text-color: #fdf6e3;
--sc-disabled-text-color: #657b83;
--sc-disabled-text-color-opaque: rgba(158, 158, 158, .3);
--sc-primary-color: #073642;
--sc-primary-color-light: #657b83;
--sc-primary-color-medium: #073642;
--sc-primary-color-dark: #002b36;
--sc-primary-color-darkest: ##002b36;
--sc-primary-accent-color: #2aa198;
--sc-primary-accent-color-light: #859900;
--sc-primary-accent-color-dark: #428342;
--sc-secondary-accent-color: #cb4b16;
--sc-primary-background-color: #eee8d5;
--sc-secondary-background-color: #fdf6e3;
--sc-tertiary-background-color: #eee8d5;
--sc-paper-tooltip-color: #616161;
--sc-paper-tooltip-text-color: #ffffff;
--sc-border-color: rgba(0, 0, 0, 0.12);
--sc-textual-info-background-color: #e2e2e2;
--sc-toast-error-color: #dc322f;
--sc-toast-success-color: #859900;
}
Fix it if you like, or paste your own schemes below!