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!

9 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

It’s not just colours that can be modified. I also use Stylus some times to break segments into block elements when teaching an online class if I don’t want to show the Pali. Using this:

span.text {
    display: block!important;
    margin-bottom: 1rem;
}

p{
    border-bottom:1px solid #c4c4c4
}

I can change this:

To this:

(hope no one minds me waking up this old thread)

3 Likes

I adapted and got used the bright yellow and white. :slight_smile:

Nice idea! It’d be trivial to add this, let me think about it.


With CSS, you could also do other things, like change the base font size, change the font family, or remove elements from view. I use Stylus myself to make some sites bearable.

1 Like

I forgot that I also use Stylus for the forum:

/* make edit button on wikis red */
div.actions button .fa.d-icon.d-icon-far-edit.svg-icon.svg-node {
    background: red;
    padding: 1em;
}

/* change background colour for PM pages */
body.archetype-private_message {
    background-color:#7c4c1a
}

/* make my post have different background colour */
article[data-user-id="438"] {
background-color:#3d384e;
    padding-left:1em;
    border-radius:50px;
}

/* hide top bar that links to main SC site */
a#sc-backlink {
    display:none;
}

.hljs {
  /* Disable max-height as to avoid vertical scrollbar; always show code blocks in full */
  /* Enable word wrapping in jai code as to avoid horizontal scrollbar.  */
  overflow-x: auto; 
  white-space: pre-wrap!important;
}

I would even suggest that the change to make PM pages have a different background colour be implimented in the theme. @musiko ?

The code to remove the top bar was suggested by me in this post, but nothing ever came of it.

PS: You can find your own data-user-id by inspecting one of your posts:

2 Likes