Chart Themes

Create custom chart color themes in Formula Bot with primary, secondary, and background colors. Choose match, gradient, or manual color generation modes.

Create custom color themes for your charts and visualizations. Match your brand colors, create consistent reports, and make your data presentations stand out.

Accessing Themes

Click Themes in the sidebar to manage your chart color themes.

Creating a Custom Theme

Step 1: Start New Theme

  1. Go to Themes
  2. Click Create Theme
  3. Enter a theme name

Step 2: Set Primary Color

Choose your main chart color:

  • Click the color picker
  • Enter a hex code (e.g., #DA7756)
  • Or choose from presets

This color is used for single-series charts and as the first color in multi-series charts.

Step 3: Set Background Color

Choose the chart background:

  • Usually white or transparent
  • Match your presentation background
  • Consider dark backgrounds for dark themes

Step 4: Configure Secondary Colors

Choose how additional colors are generated:

Match - All series use the primary color (different shades)

  • Best for cohesive, simple charts
  • Good for single-metric visualizations

Gradient - Colors blend from primary to a secondary color

  • Creates smooth visual flow
  • Good for sequential data

Manual - Pick each color individually

  • Full control over every series
  • Best for brand-specific palettes

Step 5: Save Theme

Click Save Theme to store your custom theme.

Applying Themes

Set as Active

Make a theme your default:

  1. Find the theme in your list
  2. Click Set Active
  3. All new charts use this theme

Per-Chart Override

In AI Chat, request a specific theme:

"Create a bar chart using the Ocean theme"

Color Picker Options

Hex Codes

Enter precise colors:

  • Format: #RRGGBB
  • Example: #3B82F6 (blue)

RGB Values

Specify red, green, blue:

  • Format: rgb(59, 130, 246)

Presets

Quick-select common colors:

  • Brand colors
  • Standard palettes
  • Accessibility-friendly options

Theme Settings

Primary Color

The main color for:

  • Bar charts (single series)
  • Line charts (single line)
  • Pie chart highlight
  • Area fills

Secondary Colors

Additional colors for:

  • Multiple series
  • Comparison charts
  • Category distinctions

Background

The chart canvas:

  • White (default)
  • Transparent (for overlays)
  • Custom (for dark themes)

Best Practices

Brand Consistency

  • Use your brand's primary color
  • Include secondary brand colors
  • Match your presentation templates

Readability

  • Ensure sufficient contrast
  • Avoid colors too similar
  • Test with colorblind filters

Context Appropriate

  • Professional: Muted, conservative
  • Marketing: Bold, vibrant
  • Financial: Traditional blues/greens

Test your theme with different chart types to ensure it works well across all visualizations.

Color Accessibility

Make charts accessible to all viewers:

Colorblind-Friendly

  • Don't rely solely on color differences
  • Use patterns or labels when possible
  • Test with colorblind simulators

High Contrast

  • Ensure text is readable
  • Background vs. foreground contrast
  • Consider print scenarios

Consistent Meaning

  • Use red for negative consistently
  • Green for positive
  • Maintain conventions

Managing Themes

Edit Theme

  1. Click on a theme
  2. Modify settings
  3. Save changes

Duplicate Theme

Create a variation:

  1. Open an existing theme
  2. Click Duplicate
  3. Modify and save with new name

Delete Theme

Remove themes you don't use:

  1. Click the delete icon
  2. Confirm deletion

You cannot delete the currently active theme. Set a different theme as active first.

Theme Examples

Corporate Blue

Primary: #1E40AF
Secondary: #3B82F6, #60A5FA, #93C5FD
Background: #FFFFFF

Warm Analytics

Primary: #DC2626
Secondary: #F97316, #FBBF24, #34D399
Background: #FFFFFF

Dark Mode

Primary: #60A5FA
Secondary: #34D399, #FBBF24, #F472B6
Background: #1F2937

Print-Friendly

Primary: #374151
Secondary: #6B7280, #9CA3AF, #D1D5DB
Background: #FFFFFF

Exporting with Themes

Your theme is applied to:

  • Charts in the chat interface
  • Downloaded chart images (PNG, SVG)
  • PDF exports

For presentations:

  • Download charts as SVG for editing
  • Use PNG for direct insertion
  • Match theme to slide template

Next Steps