Customize SuttaCentral colors

So here’s something you may not have known: you can make SuttaCentral display in whatever colors you think are prettiest! Yes! :astonished:

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.

  1. Install “Stylus” from the Chrome or Firefox extension store.
    • Note bene! Avoid the similar extension “Stylish”, which has been caught nicking user info!
  2. Add a new theme, “suttacentral”, and apply it to URLs starting with https://suttacentral.net/.
  3. Paste the SC color set into the editor, and edit as you please.
  4. Save and enjoy! :heart_eyes:

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!

6 Likes

Nice quality of life feature indicative of sound design, but also great for accessibility. Users with vision impairments can choose a high contrast theme, while those suffering from dyslexia may prefer lower contrasts/off-white backgrounds.

1 Like

Thanks, yes, that’s really important. I’d like to introduce better theming on the site itself, for exactly this reason. We try to comply with best practices for readability, but there’s a long tail of users with a variety of visual impairments, and what suits one can be bad for another.

1 Like