terminal icon indicating copy to clipboard operation
terminal copied to clipboard

Author a new default color scheme (to replace Campbell)

Open zadjii-msft opened this issue 1 year ago • 2 comments

There's been some internal discussions around replacing Campbell as the default scheme.

  • There are parts where the contrast isn't great
  • The chroma is super inconsistent
  • some other words about colors that Leonard said that sounded smart too.

I'm filing this to track that discussion

zadjii-msft avatar Aug 28 '24 15:08 zadjii-msft

Current theme:

{
    "name": "Prototype Bright",
    "background": "#000000",
    "foreground": "#bebebe",
    "cursorColor": "#ffffff",
    "selectionBackground": "#92a4fd",
    "black": "#000000",
    "red": "#be2c21",
    "green": "#3fae3a",
    "yellow": "#be9a4a",
    "blue": "#204dbe",
    "purple": "#bb54be",
    "cyan": "#00a7b2",
    "white": "#bebebe",
    "brightBlack": "#808080",
    "brightRed": "#ff3e30",
    "brightGreen": "#58ea51",
    "brightYellow": "#ffc944",
    "brightBlue": "#2f6aff",
    "brightPurple": "#fc74ff",
    "brightCyan": "#00e1f0",
    "brightWhite": "#ffffff"
}

image

prototype_bright

zadjii-msft avatar Aug 28 '24 15:08 zadjii-msft

Here's my testing code I wrote: https://refined-github-html-preview.kidonng.workers.dev/microsoft/terminal/raw/dev/lhecker/theme-quality/doc/theme_colors.html

My primary focus is on the first scheme there: "Prototype Bright". Here's how I created the colors:

  • Convert sRGB red/green/blue to Okhsl
    color(--okhsl  29.23390 100% 57%)
    color(--okhsl 142.49500 100% 84%)
    color(--okhsl 264.05202 100% 37%)
    
    • Blue is the darkest (37%). Raise its HSL lightness until its chroma is 0.23.
    • Raise the lightness of red until its chroma is also 0.23.
    • Raise the lightness of green slightly, as I found it subjectively more pleasant. Then reduce the chroma down to 0.23.
  • Mix sRGB red/green/blue 50/50 each in the Oklab color space. The resulting hue angles are our yellow/cyan/purple colors.
    • Set their saturations to 100% (max chroma).
    • Raise the lightness of yellow until it stops looking like brown.
    • Match cyan's lightness with green.
    • Match purple's chroma with the primaries at 0.23 by raising the lightness.
  • Match black, bright black, dark white, and white with the NT colors at 0%, 60%, 80% and 100% lightness each.

lhecker avatar Aug 28 '24 16:08 lhecker

As I wrote elsewhere a long time ago...

When changing the default colors, please consider the following:

  • 16 color palette is a quite small palette
  • When the choice is limited, every option matters
  • 16 ugly distinct colors are better than 16 beautiful shades of grey
  • Tons and tons of legacy apps do not know and will not know anything better
  • Many of those use specific colors, assuming that they are distinct enough to be readable (because it was the case on VGA back in the day)
  • In many cases these colors are not even configurable

"Prototype Bright" looks neat, but let's be honest, it is not really a 16 color palette, it is a 9 color palette. It is hard to tell the difference even when looking at large rectangles next to each other. In the real world it will often be the color of some tiny text on black background, which does not really help: image Is it light blue or dark blue? White or silver? I cannot tell.

alabuzhev avatar Aug 28 '24 23:08 alabuzhev

For reference, here's my current proposal and the NT ("Vintage") theme side by side:

image

Crucially, I personally believe, your 5th point runs somewhat counter with the arguments in #1260: The ~8~ 7 dark colors should be at least somewhat readable, as you said. But this pretty much precludes all options to make the colors consistent (= cyan should be cyan and not blue), while also raising the lightness enough that they can be read in the first place. This in particular affects dark blue in the older Windows themes (and many others). I also felt it difficult to create a good dark white, because it's often used as the default foreground color, and I felt like it must be bright enough to be easily readable. This is the resulting palette:

image

I tried experimenting with hue shifts just now to make the colors more distinct and it looks somewhat ugly unfortunately in my opinion. If you have any advice how I can design the palette better, please let me know!

lhecker avatar Aug 29 '24 00:08 lhecker