Themes

Customize the appearance of your Evidence application in light and dark mode.

Appearance Modes

Evidence supports three appearance modes: light, dark, and system. By default, new Evidence apps use the system mode and allow users to switch to light or dark via the appearance switcher.

When the appearance is system, the user's preferred appearance from their operating system is used.

The default appearance configuration is listed below, as well as in the Evidence Template.

Options

default

The default appearance mode.

Options:

Default:: light

switcher

Shows/hides the appearance switcher in the kebab menu in the top right which allows users to switch the appearance of your application between light and dark mode.

Options:

Default:: false

Migration

To enable dark mode in an Evidence application created before themes was released, replace evidence.plugins.yaml with evidence.config.yaml:

appearance:
    default: system
    switcher: true
plugins:
    [contents of evidence.plugins.yaml, indented one additional level]

Theme

The theme configuration defines the colors used by your app.

The theme consists of 3 elements that define colors for different purposes:

Color palettes configure colors for charts with different data series (e.g. Bar Charts).
Color scales configure color ranges for charts with continuous data (e.g. Heatmaps).
Colors configure colors of UI elements (e.g. background, text, inputs).

You can pass any valid CSS color values to these properties (hexadecimal, RGB, HSL, named CSS colors, etc).

The default theme configuration is listed below, as well as in the Evidence Template.

Color Palettes

You can modify the default chart color palette, or create a custom palette for individual charts via their colorPalette prop.

Color palettes can have any number of colors listed. If a chart has more series than there are colors in a color palette, the colors will be reused.

Default Color Palette

The default color palette is used by all series-based charts (e.g. Bar Charts, Line Charts).

You can configure the default color palette for light and dark mode individually (different colors for each):

theme:
    colorPalettes:
        default:
            light:
                - "#1d4ed8"
                - "#0f766e"
                - "#a16207"
                - "#c2410c"
                - "#7e22ce"
            dark:
                - "#93c5fd"
                - "#5eead4"
                - "#fde047"
                - "#fdba74"
                - "#d8b4fe"

…or together (same colors for both):

theme:
    colorPalettes:
        default:
            - "#3b82f6"
            - "#14b8a6"
            - "#eab308"
            - "#f97316"
            - "#a855f7"

Custom Color Palettes

You can define your own custom color palettes in the same way, just replace default with your color palette's name:

theme:
    colorPalettes:
        myCustomPalette:
            light:
                - "#e11d48"
                - "#be185d"
                - "#6d28d9"
            dark:
                - "#fb7185"
                - "#f9a8d4"
                - "#c4b5fd"

Then use it in the colorPalette prop

<BarChart 
    data={my_data}
    colorPalette=myCustomPalette
/>

Props

The colorPalette prop accepted by many components accepts a color palette in several different formats to reduce the friction of theming your app.

Use a color palette name from your theme. Its configured light and dark values will be used.
```
<BarChart 
    data={my_data}
    colorPalette=myColorPalette
/>
```

Use a list of color names from your theme. Their configured light and dark values will be used.

<BarChart
    data={my_data}
    colorPalette={[
        'primary',
        'accent',
        'myCustomColor',
    ]}
/>

Use a list of colors (e.g. hex codes). They will be automatically converted to similar colors for dark mode.

<BarChart
    data={my_data}
    colorPalette={[
        "#3b82f6",
        "#14b8a6",
        "#eab308",
        "#f97316",
        "#a855f7",
    ]}
/>

Use a list of pairs of colors to explicitly define light and dark mode values. The first column will be used when your application is in light mode, and the second when its in dark mode.

<BarChart
    data={my_data}
    colorPalette={[
        ["#1d4ed8", "#93c5fd"],
        ["#0f766e", "#5eead4"],
        ["#a16207", "#fde047"],
        ["#c2410c", "#fdba74"],
        ["#7e22ce", "#d8b4fe"],
    ]}
/>

Color Scales

You can modify the default chart color palette, or create a custom palette for individual charts via their colorScale prop.

Color scales can have any number of colors listed. The colors will be blended into a gradient for values to interpolate from.

Default Color Scale

The default color scale is used by charts that represent continuous data.

You can configure the default color palette for light and dark mode individually (different colors for each):

theme:
    colorScales:
        default:
            light:
                - "#0d9488"
                - "#4f46e5"
            dark:
                - "#5eead4"
                - "#a5b4fc"

…or together (same colors for both):

theme:
    colorScales:
        default:
            - "#eab308"
            - "#22c55e"

Custom Color Scales

You can define your own custom color scales in the same way, just replace default with your color scale's name:

theme:
    colorScales:
        myCustomScale:
            light:
                - "#f97316"
                - "#ef4444"
            dark:
                - "#fdba74"
                - "#fb7185"

Then use it in the colorScale prop

<DataTable data={country_summary}>
    <Column id=country />
    <Column id=value_usd contentType=colorscale colorScale=myCustomScale />
</DataTable>

Props

The colorScale prop accepted by many components accepts a color scale in several different formats to reduce the friction of theming your app.

Use a color scale name from your theme. Its configured light and dark values will be used.
```
<BarChart 
    data={my_data}
    colorScale=myColorScale
/>
```
Use a list of color names from your theme. Their configured light and dark values will be used.
```
<BarChart
    data={my_data}
    colorScale={[
        'primary',
        'accent',
    ]}
/>
```
Use a list of colors (e.g. hex codes). They will be automatically converted to similar colors for dark mode.
```
<BarChart
    data={my_data}
    colorScale={["#3b82f6", "#14b8a6"]}
/>
```
Use a list of pairs of colors to explicitly define light and dark mode values. The first column will be used when your application is in light mode, and the second when its in dark mode.
```
<BarChart
    data={my_data}
    colorScale={[
        ["#1d4ed8", "#93c5fd"],
        ["#0f766e", "#5eead4"],
    ]}
/>
```

Colors

Evidence uses a fixed set of color "tokens" for all UI elements in the entire application. This allows you to create a customized look and feel with only a couple lines of configuration.

No Results

You can modify existing color tokens, or create your own to use in charts and other UI elements.

Overriding Colors

You can override a color for light and dark mode individually (different colors for each):

theme:
	colors:
		primary:
			light: "#dc2626"
			dark: "#f87171"
		accent:
			light: "#7c3aed"
			dark: "#a78bfa"

…or together (same colors for both):

theme:
	colors:
		primary: "#ef4444"
		accent: "#a855f7"

Defining Your Own Colors

You can define your own custom colors in the same way, just replace the color name with your custom color's name:

theme:
	colors:
		myColor: "#10b981"
		myOtherColor:
			light: "#c026d3"
			dark: "#f472b6"

Then use them in component props

<Tabs color=myColor>
	<Tab label="Tab 1" id="tab1">Tab 1 content</Tab>
	<Tab label="Tab 2" id="tab2">Tab 2 content</Tab>
</Tabs>

<BarChart
	data={my_data}
	fillColor=myOtherColor
/>

Props

The color props accepted by many components (e.g. fillColor, labelColor) accept a color in several different formats to reduce the friction of theming your app.

Use a color name from your theme. Its configured light and dark values will be used.
```
<BarChart
    data={my_data}
    fillColor=primary
/>
```
Use a single color (e.g. hex code). It will be automatically converted to a similar color for dark mode.
```
<BarChart
    data={my_data}
    fillColor="#3b82f6"
/>
```
Use a pair of colors to explicitly define light and dark mode values. The first color will be used when your application is in light mode, and the second when its in dark mode.
```
<BarChart
    data={my_data}
    fillColor={["#1d4ed8", "#93c5fd"]}
/>
```

Advanced

The colors listed above are the bare minimum you should configure to theme your application. If you need more control, there are other colors you can customize.

No Results

These colors are included in the Tailwind configuration for your Evidence application, so you can use them in your own HTML elements or custom Svelte components.

Hello!

<div class="bg-primary border border-primary p-4 text-primary-content">Hello!</div>

Custom Styles

Evidence uses Tailwind CSS to style Evidence components and markdown, and you can use Tailwind to add your own styles.

To style with Tailwind you add classes to HTML elements. You can use any HTML element in your markdown.

For more information on using Tailwind, see the Tailwind documentation.

Tailwind removes styling from HTML elements by default, so should add your own styles to <h1/>, <a/> etc.

This is primary colored text using a monospace font, and a custom top margin.

This is the default text style, which is used when you write text in a markdown file.

<p class="text-red-600 italic font-serif">This red italic serif text is defined inside a HTML p (paragraph) element.</p>

<p class="font-mono text-primary mt-3">This is primary colored text using a monospace font, and a custom top margin.</p>

Themes

Appearance Modes

Options

Migration

Theme

Color Palettes

Default Color Palette

Custom Color Palettes

Props

Color Scales

Default Color Scale

Custom Color Scales

Props

Colors

Overriding Colors

Defining Your Own Colors

Props

Advanced

Custom Styles

Using the Evidence Default Styles in Custom HTML

Examples

Customize Fonts