Themes and Layouts

Evidence supports customizing the look and feel of your app using CSS, and by overwriting or modifying the default layout.

Custom Layout

To customize your, add a +layout.svelte file to the root of your pages directory. You can customize the EvidenceDefaultLayout with the options below, or replace the contents of the file with an entirely new layout.

<script>
	import '@evidence-dev/tailwind/fonts.css';
	import '../app.css';
	import { EvidenceDefaultLayout } from '@evidence-dev/core-components';
	export let data;
</script>

<EvidenceDefaultLayout {data}>
	<slot slot="content" />
</EvidenceDefaultLayout>

The EvidenceDefaultLayout component accepts the following properties for common customizations.

Example custom option:

<EvidenceDefaultLayout {data} hideSidebar={true}>
	<slot slot="content" />
</EvidenceDefaultLayout>

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.

Using the Evidence Default Styles in Custom HTML

Adding the markdown class to an element will style it the same as Evidence markdown, e.g. <h1 class='markdown'/>.

Examples

Customize Fonts

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-blue-500 mt-3">This is blue text using a monospace font, and a custom top margin.</p>

Base Styles

Include an app.css file in your project root directory to customize the base styles of your app.

The recommended approach is to copy and edit the default css file from [my-project]/.evidence/template/src/app.css, also found in the Evidence Github repo.

What can be customized with app.css?

You can customize the default styles (font, size, color etc) of most HTML elements, by adjusting the default css for the app, e.g.

• Headers
• Body text
• Images
• Links
• Page Background
• etc

You cannot currently easily customize the default styles of the following (as these are not defined in the core css styles):

• Evidence Chart colors and themes (see custom chart color section below)
• Evidence Components

Page Layout

If you include a +layout.svelte file in a directory, any markdown files in that directory (and its subdirectories) will use this layout file instead of the default layout file.

The recommended approach is to copy and edit the default layout file from [my-project]/.evidence/template/src/pages/+layout.svelte, also found in the Evidence Github repo.

What can be customized with +layout.svelte?

By default, Evidence includes a number of features on every page, which can be removed or customized e.g.

• Sidebar
• Header
• Breadcrumbs
• Table of Contents

You can also add your own elements to the default page layout.

Chart Color Palette

You can use a custom color palette in your charts by using the colorPalette option.

For example, in a bar chart:

<BarChart
    data={orders}
    x=date
    y=sales
    colorPalette={
        [
        '#cf0d06',
        '#eb5752',
        '#e88a87',
        '#fcdad9',
        ]
    }
/>

This can be done within each chart individually, or by using a script tag to create a variable that can be used within one page. For example:

<script>
    let myColors = [
        '#cf0d06',
        '#eb5752',
        '#e88a87',
        '#fcdad9',
    ]
</script>

<BarChart
    data={orders}
    x=date
    y=sales
    colorPalette={myColors}
/>

<LineChart
    data={inventory}
    x=date
    y=inventory
    colorPalette={myColors}
/>