How to customize the color scheme

How to use the built-in yellow and green style in React Earthstar

Here's how to get the built-in styles for the Earthbar:

In your main app.tsx file:

import "react-earthstar/styles/layout.css";  // this one is just the layout, no fonts or colors
import "react-earthstar/styles/junior.css";  // this adds the yellow-green style with different fonts and details

Example: https://github.com/earthstar-project/earthstar-status/blob/3baab42ab6bc53122e2a7e2199a179ecb31bb23f/src/App.tsx#L22-L23

To change the color scheme of the Earthbar

There are some CSS variables which will affect all the colors in the Earthbar.

Go to the color scheme maker and change the first 3 colors by clicking on them until you have a scheme you like.

Go to the bottom of the color scheme maker page and copy the "palette" JSON section which has gr0 through gr6, and ac2 through ac4.

Make another CSS file just for your project and include it after layout and junior, or use your App.css file if you have one. Put those colors into that CSS file and reformat them into CSS variables like this: https://github.com/earthstar-project/react-earthstar/blob/master/styles/junior.css#L1-L11

You're copying this...

palette:
{
    "gr6": "#f4eed4",
    "gr5": "#c8bfae",
    "gr4": "#a0948b",
    "gr3": "#7e706e",
    "gr2": "#615155",
    "gr1": "#44313b",
    "gr0": "#220d1e",
    "ac4": "#68a699",
    "ac3": "#29857e",
    "ac2": "#276060"
}

...and changing it into this (pretend the colors actually matched between these two examples :) )

/* my custom colors
:root {
  --gr6: #faf4da;
  --gr5: #c8bfae;
  --gr4: #a0948b;
  --gr3: #7e706e;
  --gr2: #615155;
  --gr1: #44313b;
  --gr0: #220d1e;
  --ac4: #68a699;
  --ac3: #29857e;
  --ac2: #276060;
}

Since it comes last it will override the colors from junior.css. Since it's in :root it will apply to everything on the page.

Dark mode?

Reverse the numbering of the color variables to get dark mode. This will flip the color gradients. Refer to the "Full palette" preview in the color scheme maker to understand the names.

this becomes that:

gr0 --> gr6  // "gr" stands for "gray"
gr1 --> gr5
gr2 --> gr4
gr3 --> gr3
gr4 --> gr2
gr5 --> gr1
gr6 --> gr0


ac2 --> ac4 // "ac" stands for "accent color"
ac3 --> ac3
ac4 --> ac2

Or do this all using code

The make-color-theme package on NPM does the same thing as the color theme preview page. You feed it 3 colors (light, dark, accent color) and it generates the full gradients for you. It also has helpers for turning those numbered colors into named colors for specific purposes (buttons, etc) and for flipping light mode to dark mode colors.

What about color themes for my own app, not just the Earthbar UI?

You can use these CSS variables in your own CSS for your own app too -- they can be read by any CSS on the entire page. (e.g. { background: var(--gr0); })