2 5. Color
athena edited this page 4 months ago

Color

Colors in Jupiter

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

Themes

Traditional themeing 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 the user is using.

There are a few things to know when using themes. First, you can disable themes in the src/js/core/config.js file. In the same file, you can also set the default theme: dark or light. If you don't want to offer the ability to change themes, you can disable themes and then apply either .dark or .light 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.

If you are using dynamic accents, like this website currently is, the accent color will be overridden when a new color is set.

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; this is the weight of the components, like buttons.

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

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

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

Dynamic accents

Dynamic accents are a new addition to JupiterUI v1.4. They allow you to use some of the default colors as an accent color. By default, this setting, called config.dynamic_accents is set to true.

When dynamic accents are enabled, they will override the accent color in the src/css/_variables.scss file.

Dynamic accents use localStorage to save and reuse color values. If there is no value saved in localStorage, the default color in jupiter_config is used.

If you want to setup a button which randomizes and changes, in real time, the current accent color, simply attach a data-randomize attribute on any a tag.

If you want to programatically set the accent color, use the dynamic_accents.set_dynamic_color() function. It accepts a single string which is the key-code for the colors in src/js/core/dynamic_accents.js


Let's go ahead and add a background image.

On the <div class="section ..."> element, add the following attribute: data-bg-img="assets/xps-dpbXgTh0Lac-unsplash.jpg"

(Courtesy of Unsplash)

That makes it hard to see the text, though!

On the mw-700 element, add the following classes: p-3r ui radius-8

If you want, you can shrink the page and see how it fits the screen! We haven't even added mobilization classes yet!

Just in case, let's go ahead and add portrait-p-2r to the element we just modified. Now it feels a little better on mobile.


Next: 6. Typography