Colors in Jupiter
Jupiter has three types of colors: the accent color, the default colors, and dynamic colors.
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-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
.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
If you are using dynamic accents, like this website currently is, the accent color will be overridden when a new color is set.
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 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
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
Let's go ahead and add a background image.
<div class="section ..."> element, add the following attribute:
(Courtesy of Unsplash)
That makes it hard to see the text, though!
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.