Skip to content

4. Color

Jump to bottom
Tristan edited this page Nov 22, 2021 · 4 revisions

Colors in Jupiter

Jupiter has three types of colors: the accent color, the default colors, and dynamic colors.

Themes

Traditional theme systems style individual components for each theme mode. While this may work for small applications, it'd be better to use a globalized system.

Jupiter instead uses an intuitive set of background colors. Classes like ui and ui-3 are dynamic and will change based on the theme you're is using.

You can manually set the theme by setting either .dark or .light on the html element.

There are 3 shades to the UI colors: gray, warm-gray, and cool-gray. You can set it by adding either of those to the body element.

The accent color

This is the default color for your website. It is used for links, buttons, and many other elements.

The accent color is defined in the src/css/_variables.scss file.

You can change the accent by adding any color class to the body element. For example, <body class="magenta"> or <body class="cyan">.

Default colors

There are 10 default "color types." That is, each have 10 different classes which denote the shade. For instance, the .bg-magenta-10 class is a near-white color of magenta.

The primary of the default colors is 60.

There are a few classes related to color:

.bg-[color]-[weight]
.bg-hover-[color]-[weight]
.text-[color]-[weight]

// if dark theme...
.dark-bg-[color]-[weight]
.dark-bg-hover-[color]-[weight]
.dark-text-[color]-[weight]

All of the available colors are:

  • blue
  • cyan
  • teal
  • magenta
  • purple
  • green
  • orange
  • red

Using the default colors and their respective classes has many benefits. Mainly, it ensures that the theme will not mess with the normal colors.

The colors were greatly inspired by the colors from the Carbon Design System by IBM.

Clone this wiki locally