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.

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 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.

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. 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 (like light.css and dark.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.tailwind.css and you're good to go.

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.