💾 Archived View for her.esy.fun › posts › 0012-solaryzed-theme › index.gmi captured on 2023-09-08 at 15:50:11. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Solaryzed: A Generalisation of Solarized

date: [2020-03-01 Sun]

author: Yann Esposito

email: yann@esposito.host

gpg

keywords: colorscheme

description: A generalization of solarized.

description: I tried to keep the same fundamentals and to free some variables.

After many years using

Solarized

I changed to a new one.

I use it for my terminal, emacs and most of my tools.

This is inspired by both

Solarized

and

Nord

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

Nord

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

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>

______

{{{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);
}