Attributes are applied to elements to expose app state information to CSS

If one does not already exist, create a new theme directory in the user data folder.

• Windows: %appdata%/Cider/themes

• Mac: ~/Library/Application Support/Cider/themes

• Linux: ~/.config/Cider/themes

Create a new folder in the themes directory with the name of your theme.

• This folder needs to contain the following files:

  • index.less - The main theme file

  • theme.json - Contains several properties for your theme

• You can clone a starter template from here: Theme Starter Template

In Cider, select the theme in the settings.

Cider has automatic hot reloading for themes in the userdata folder.

Useful Resources

• The default styles.less can be found in: src/renderer/style.less

• Less.js documentation

Resources in the theme can be accessed by their filenames in the theme folder.

Examples:

background: url("my_image.png")

@import url('another_less_file.less')

Once you have completed your plugin its time to publish! Create a new repository for the theme and upload the files.

To have the theme indexed into Cider's built in theme explorer, add cidermusictheme as a topic on the repository.

theme.json files require the following properties:

• name: string - The name of the theme

• description: string - Brief description of the theme

• version: string - Version of the theme

• author: string - Theme authors

• github_repo: string - The source repository of the theme, this is required for Cider to automatically update the theme. Formatted <owner>/<repo_name>

• pack: array - (optional) Declare individual LESS files as styles within the package

  • Pack Object Format:

    • name: string - Name of the style

    • file: string - File name within the package / repo

    • description: string - Description of the style