date: [2020-03-01 Sun]
author: Yann Esposito
email: yann@esposito.host
keywords: colorscheme
description: A generalization of solarized.
description: I tried to keep the same fundamentals and to free some variables.
After many years using
I changed to a new one.
I use it for my terminal, emacs and most of my tools.
This is inspired by both
and
I switched because I wanted a greyer theme.
Ethan Shoovnover the creator of Solarized gave plenty of information about
the creation of his colorscheme.
And I stumbled upon the
theme.
And I really liked it.
But while the colors are great, it is not as easy to switch from light to
dark theme than with solarized because Solarized has a lot of nice
properties.
So I kept the main principle used to create Solarized but freed a few parameters.
The tint of the dark and light colors for the background and the text, as
well as the contrast of the colors.
And I created this minimal application in Purescript:
https://solaryzed.esy.fun
It is still not perfect, because the real theme I use for my website as a
slightly bigger contrast for text.
Here is the CSS you could use:
______html
<style>#colors div {
display: inline-block;
height: 50.0px;
width: 50.0px;
margin: 2px 0;
font-weight: bold;
line-height: 50.0px;
text-align: center; }
#colors { padding: 10px; margin: 10px 0; }
</style>
<div id="colors">
______
{{{colorbox(b03,white,#202631)}}}
{{{colorbox(b02,white,#2b303c)}}}
{{{colorbox(b01,white,#595e6a)}}}
{{{colorbox(b00,white,#727782)}}}
{{{colorbox(b0,black,#8c919b)}}}
{{{colorbox(b1,black,#a7abb5)}}}
{{{colorbox(b2,black,#e5e8f0)}}}
{{{colorbox(b3,black,#f3f6fe)}}}
{{{colorbox(y,white,#ad8c51)}}}
{{{colorbox(o,white,#a9664b)}}}
{{{colorbox(r,white,#af6256)}}}
{{{colorbox(m,white,#ae5e7d)}}}
{{{colorbox(v,white,#6774b2)}}}
{{{colorbox(b,white,#408cc3)}}}
{{{colorbox(c,white,#17a198)}}}
{{{colorbox(g,white,#939452)}}}
______html
</div>
______
:root {
color-scheme: light dark; /* support color scheme */
--b03: #202631;
--b02: #2b313c;
--b01: #656b74;
--b00: #727781;
--b0: #989ea8;
--b1: #b0bac7;
--b2: #e5e8ed;
--b3: #f4f7ff;
--y: #a98d50;
--o: #aa6550;
--r: #b85a64;
--m: #af53b0;
--v: #846f93;
--b: #5679a4;
--c: #4c8493;
--g: #728b5c;
--bg: var(--b3);
--fg: var(--b02);
--fg0: var(--b0); /* lower contrast */
--bg2: var(--b2); /* second color block background */
--fg2: var(--b01); /* second color block foreground */
--acc: var(--o); /* accent color */
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark */
--bg: var(--b03);
--fg: var(--b0);
--fg0: var(--b00); /* lower contrast */
--bg2: var(--b02); /* second color block background */
--fg2: var(--b1); /* second color block foreground */
--acc: var(--g); /* accent color */
}
}
body,.main {
background: var(--bg);
color: var(--fg);
}