Themes

Overview

Jumpstart Pro comes with a default set of themes that can be used to quickly get started with a new application.

The dark and light themes provide a great set of neutral colors for any interface. They’re great starting points to modify when creating your own custom theme. Jumpstart’s juicy theme is a good example of how a theme can be customized to reflect a stronger brand expression.

Semantic color names in Jumpstart’s color system make theming, customization, and system-wide changes to color (like swapping primary colors to match your brand) easier and more efficient.

Theme Examples

These notices all use the same HTML, but have a different theme applied with a CSS class.

Modifying the default themes

The light and dark themes that ship by default use semantically named color roles which are defined in tailwind.config.js and map to Tailwind colors. Changing the colors here is the easiest way to make large application wide changes to the default theming for both light and dark modes. To get started changing the colors, if not creating a custom theme, you will need to modify the color values in the theme object in tailwind.config.js.

The juicy theme is an example of when you want to go further and have more fine-grained control over every aspect of a theme. It uses none of the default semantic names setup in tailwind.config.js. This is so that changes there do not affect this theme.

The next sections will walk you through the default color roles and how to modify them.

Primary and Secondary colors

To start updating colors or creating your own theme, begin with Primary. Primary can be your main brand color or a primary accent color that is high-emphasis.

Secondary colors are used for less prominent components, but could still carry a color expression of your brand.

Danger, Success, Info, Warning & Accent

Some colors communicate status in the UI—destructive or successful actions, warnings, alerts, etc.

If you change these, we recommend choosing from similar color palettes—pink or red for danger, green or turquoise for success, etc.—as these are common associations understood by end users.

Dark and Light

Dark and light buttons are named for their background colors.

Disabled

If you change these, we recommend that you ensure disabled states are visually distinct from enabled states.

Base

These colors are used for baseline or default foundational design elements like page background, divider lines, borders on elements with focus, etc.

These colors establish hierarchy in the UI, with different shades of colors across text, icons, surfaces, and borders. To distinguish them from other color groups, they are named with the prefix base-.

base as a semantic building block is used for colors that portray elevation, like base-bg-lowest and base-bg-highest—especially in dark mode, where things like drop shadow can’t be relied on to communicate depth. base is also used to set consistent colors for icons (base-icon) and text (base-text, base-text-disabled, etc.).

Many products keep things neutral with white page backgrounds and varying shades of gray for text, but others use backgrounds and text color as another way to express brand (like in the juicy theme). With base-*, our color system easily supports either scenario.

Custom Themes

If you want to create a completely custom theme, you can do so by copying any of the default theme files (light.css, dark.css, or juicy.css), creating a file for your theme in app/assets/stylesheets/themes, pasting in the copied theme, changing the top level class name to match the file/theme name and modifying the color values to your liking. After that import your new theme in app/assets/stylesheets/application.scss and you're good to go.

Example: Changing the default color theme

⚠️ Changing the colors here will only affect light and dark themes and not the juicy theme.

// tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: colors.blue,
        secondary: colors.gray,
        tertiary: colors.gray,
        danger: colors.red,
        success: colors.green,
        info: colors.blue,
        warning: colors.yellow,
        accent: colors.orange,
        light: colors.gray,
        dark: colors.gray,
        disabled: colors.gray,
      },
    },
  },

If your have a brand color, say teal for example, that you want to use, you can change the primary color value from colors.blue to colors.teal. This will change the primary color for both light and dark modes.

These colors come from the Tailwind color palette. You can find the full list of Tailwind colors here.

Using 'on-*' to track relationships between colors

A color role’s semantic name gives clues about how a color may “bond” with other colors. Semantic names with on-* indicate a relationship to another color in the system. When choosing colors for a custom theme, consider checking the contrast ratio between these color pairs for accessibility with a tool like WebAIM's Contrast Checker.