Skip to main content

Theme YAML

In your Rill project directory, create a <theme_name>.yaml file in any directory containing type: theme. Rill will automatically ingest the theme next time you run rill start or deploy to Rill Cloud.

To apply that theme to a dashboard, add default_theme: <name of theme> to the yaml file for that dashboard. Alternatively, you can add this to the end of the URL in your browser: ?theme=<name of theme>

Properties​

type​

[string] - Refers to the resource type and must be theme (required)

colors​

[object] - Color palette for the theme

  • primary - [string] - Primary color

  • secondary - [string] - Secondary color

light​

[object] - Light theme color configuration

  • primary - [string] - Primary color for light theme. Can have any hex, named colors or hsl() formats.

  • secondary - [string] - Secondary color for light theme. Can have any hex, named colors or hsl() formats.

  • kpi-positive - [string] - Color for positive KPI delta values in light theme. Defaults to fg-secondary (gray).

  • kpi-negative - [string] - Color for negative KPI delta values in light theme. Defaults to red.

  • variables - [object] - Custom CSS variables for light theme

dark​

[object] - Dark theme color configuration

  • primary - [string] - Primary color for dark theme. Can have any hex, named colors or hsl() formats.

  • secondary - [string] - Secondary color for dark theme. Can have any hex, named colors or hsl() formats.

  • kpi-positive - [string] - Color for positive KPI delta values in dark theme. Defaults to fg-secondary (gray).

  • kpi-negative - [string] - Color for negative KPI delta values in dark theme. Defaults to red.

  • variables - [object] - Custom CSS variables for dark theme

Common Properties​

name​

[string] - Name is usually inferred from the filename, but can be specified manually.

refs​

[array of string] - List of resource references

dev​

[object] - Overrides any properties in development environment.

prod​

[object] - Overrides any properties in production environment.

Examples​

# Example: Basic theme with light and dark mode colors
type: theme
light:
    primary: "#4F46E5" # Indigo-600
    secondary: "#8B5CF6" # Purple-500
dark:
    primary: "#818CF8" # Indigo-400
    secondary: "#A78BFA" # Purple-400
# Example: Advanced theme with custom color palettes
type: theme
light:
    primary: "#14B8A6" # Teal
    secondary: "#10B981" # Emerald
    color-sequential-1: "hsl(180deg 80% 95%)"
    color-sequential-5: "hsl(180deg 80% 50%)"
    color-sequential-9: "hsl(180deg 80% 25%)"
    color-qualitative-1: "hsl(156deg 56% 52%)"
    color-qualitative-2: "hsl(27deg 100% 65%)"
dark:
    primary: "2DD4BF"
    secondary: "34D399"
    color-sequential-1: "hsl(180deg 40% 30%)"
    color-sequential-5: "hsl(180deg 50% 50%)"
    color-sequential-9: "hsl(180deg 60% 70%)"
# Example: Theme with KPI delta colors (green for positive, red for negative)
type: theme
light:
    primary: "#6366f1"
    secondary: "#8b5cf6"
    kpi-positive: "#16a34a" # Green for positive deltas (default: gray)
    kpi-negative: "#dc2626" # Red for negative deltas (default: red)
dark:
    primary: "#818cf8"
    secondary: "#a78bfa"
    kpi-positive: "#4ade80" # Brighter green for dark mode
    kpi-negative: "#f87171" # Brighter red for dark mode