Skip to main content

Styling

The editor ships with Willow (light) and WillowDark (dark) themes from @svar-ui/svelte-core. You can also apply custom CSS classes and disable the default theme fonts for further visual control.

Define a CSS class for the editor's box​

Use the css property to assign a CSS class to the editor's main container element:

<script>
   import { Editor } from "@svar-ui/svelte-editor";
</script>

<Editor css="myBox" />

This assigns a CSS class to the editor's main container, letting you apply custom styles to the editor box. It's useful when the editor needs to match surrounding UI elements or have distinct visual characteristics such as specific padding, borders, or background colors. Define the myBox class in your stylesheet before using it.

Disable fonts​

Set the fonts property of the theme wrapper to false to turn off the fonts included in the theme:

<script>
  import { Willow } from "@svar-ui/svelte-core";
  import { Editor } from "@svar-ui/svelte-editor";
</script>

<div style="width:300px">
  <Willow fonts={false}>    
    <Editor />
  </Willow>
</div>
Pay attention

If you switch the default fonts off, you have to include the fonts you need yourself.

Related articles: Visual themes