Customizing Styles & Themes
Evidence supports customizing the look and feel of your project by overwriting default code files. We plan to make this easier in the future.
Base Styles
Include an app.css
file in your project root directory.
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
- 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
- Table of Contents
You can also add your own elements to the default page layout.