Themes and Layouts

Evidence supports customizing the look and feel of your project 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.

neverShowQueries=true

neverShowQueries=false

fullWidth=true

fullWidth=false

hideSidebar=true

hideSidebar=false

hideHeader=true

hideHeader=false

hideBreadcrumbs=true

hideBreadcrumbs=false

hideTOC=true

hideTOC=false

builtWithEvidence=true

builtWithEvidence=false

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

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 project, 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}
/>