Custom Preview Styles

Sveltia CMS comes with built-in preview styles for the admin interface. However, you can also register your own custom preview styles to customize the appearance of the admin interface according to your needs.

Overview

To register a custom preview style, use the registerPreviewStyle method on the CMS object:

CMS.registerPreviewStyle(filePath);

CMS.registerPreviewStyle(cssString, { raw: true });

There are two ways to register custom preview styles in Sveltia CMS: by providing a file path to a CSS file or by providing a raw CSS string. If you provide a raw CSS string, you need to set the raw option to true.

Parameters

• filePath (string): The path to the CSS file containing the custom styles. This file should be accessible from the CMS admin interface. It can be a relative path or an absolute URL.
• cssString (string): A string containing the raw CSS styles to be applied to the admin interface.
• options (object, optional): An options object that can contain the following property:
  • raw (boolean): Set this to true if you are providing a raw CSS string. Defaults to false.

Examples

Registering a Preview Style from a File

To register a preview style from a CSS file, simply provide the file path as an argument to the registerPreviewStyle function.

CMS.registerPreviewStyle('/path/to/your/custom-style.css');

Registering a Preview Style from a Raw CSS String

You can also register a preview style by providing a raw CSS string. Make sure to set the raw option to true in the options object.

const customCSS = `
  .nc-admin {
    background-color: #f0f0f0;
  }
`;

CMS.registerPreviewStyle(customCSS, { raw: true });

Registering Multiple Preview Styles

You can register multiple preview styles by calling the registerPreviewStyle function multiple times. The styles will be applied in the order they were registered.

CMS.registerPreviewStyle('/path/to/first-style.css');
CMS.registerPreviewStyle('/path/to/second-style.css');

This allows you to layer styles and create complex customizations for the Sveltia CMS admin interface.