2bit-ui

Palette Swapping

Palette swapping is a term used in video game development for using the same underlying image but with the colors replaced with those from a new palette. 2bit-ui was designed with this in mind. It has a similar 2-bit (4 color) design like the original monochrome Game Boy. By palette swapping each element we can achieve many more colors on screen, like on the Game Boy Color.

General Styles

Let's start with a basic pink & green theme.

.bit-root {
  --bit-color-bg: hsl(340 100% 95%);
  --bit-color-fg: hsl(340 100% 30%);
  --bit-color-shadow: hsl(340 80% 80%);
  --bit-color-accent: hsl(160 100% 24%);
}

Card Styles

Cards should have a slightly lighter background.

.bit-card {
  --bit-color-bg: hsl(340 100% 96%);
  --bit-color-fg: hsl(340 100% 30%);
  --bit-color-shadow: hsl(340 80% 85%);
  --bit-color-accent: hsl(160 100% 24%);
}

Form Styles

Text inputs, text areas, radio buttons, checkboxes, and selects should have a slightly lighter background and more subtle shadow.

.bit-checkbox,
.bit-radio,
.bit-input,
.bit-select {
  --bit-color-bg: hsl(340 100% 98%);
  --bit-color-fg: hsl(340 100% 30%);
  --bit-color-shadow: hsl(340 80% 90%);
  --bit-color-accent: hsl(160 100% 24%);
}

Button Styles

Finally, buttons look just a little different so they stand out.

.bit-button {
  --bit-color-bg: hsl(340 100% 93%);
  --bit-color-fg: hsl(340 100% 30%);
  --bit-color-shadow: hsl(340 80% 83%);
  --bit-color-accent: hsl(160 100% 21%);
}

Full Example

Putting this all together, we get a form that looks like this:

A note about inheritance

Note that CSS custom properties are inherited, so doing palette swapping on container elements can have unintended consequences. I recommend always overriding all 4 --bit-color-* properties every time, to ensure that the correct colors always go together.