Adjust CSS code colors?

[cheshiredave]

Is there a way to adjust the color of the “Page CSS/Global CSS” code? It’s so dim/low contrast it’s practically illegible. I can’t believe I can’t find anything else in Forum topics that covers this, except for one thing from 2018 that was never answered.

I’ve tried both light and dark UI, and the problem is similarly bad in each.

I’ve put up with this for a long time, and I finally feel like I need to say something about it.

Thanks,
Cheshire

[tristup]

Hi Cheshire,

Regretfully, there is no such option to change the color of Page CSS/Global CSS editor except the Dark and Light options which you have tried already.

Thanks

[cheshiredave]

That is really disappointing. With Themeco trying to adhere to best practices, legibility and color contrast is a huge part of that:

https://uxdesign.cc/the-easiest-part-about-designing-accessible-websites-76cd6b9a7ae4

At the very least, an option for users to change code colors would be a good start.

Thanks,
Cheshire

[marc_a]

Hi Cheshire,

I will make a feature request so it might be taken into account in the future.

Hope that helps.

Thank you.

[alexander]

Hi @cheshiredave,

I wanted to followup on this after seeing it in our issue tracker. The color scheme we use is called Solarized which has remained a popular IDE/text editor color scheme for many years. While we don’t have customizable color schemes as a first class feature, there is a way to customize the editor colors with custom CSS. Because there are 16 colors in the palette, you could use some themes of base16 as inspiration.

• Enable Dev ToolKit from Preferences (and click save to keep that enabled)
• Open Dev Toolkit from the bar icon and switch to the Custom UI CSS tab
• Copy / Paste the code below. These are the values for Solarized Dark, so if you’re using the dark UI theme nothing will change
• Experiment with updating the hex code values. A quick way to increase contrast would be swapping the values of --c-cm-base-03 and --c-cm-base-02

:root {
  --c-cm-base-03: #002b36;
  --c-cm-base-02: #073642;
  --c-cm-base-01: #586e75;
  --c-cm-base-00: #657b83;
  --c-cm-base-0: #839496;
  --c-cm-base-1: #93a1a1;
  --c-cm-base-2: #eee8d5;
  --c-cm-base-3: #fdf6e3;
  --c-cm-yellow: #b58900;
  --c-cm-orange: #cb4b16;
  --c-cm-red: #dc322f;
  --c-cm-magenta: #d33682;
  --c-cm-violet: #6c71c4;
  --c-cm-blue: #268bd2;
  --c-cm-cyan: #2aa198;
  --c-cm-green: #859900;
}

Please understand that Custom UI CSS is an advanced feature and we can’t officially support customizations to Cornerstone.

Hopefully this helps give you a good starting point to get those colors updated!