# Customize themes in CotEditor on Mac

CotEditor’s theme is a collection of settings about the editor’s coloring.

## Coloring components available in themes

CotEditor themes offer the ability to set the color scheme of the elements that compose the editor view.

Item | System Color | Opacity | Description
--- | --- | --- | ---
Text |  |  | The basic text color used for non-highlighted text. Line numbers also use the color set here.
Invisibles |  | ✔︎ | The color of invisible characters that can be set in the Window settings.
Cursor | ✔︎ | ✔︎ | The color of the cursor displayed at the text insertion point.
Background |  |  | The background of the entire editor.
Current Line |  | ✔︎ | The background of the current line when the Window settings is set to show the current line.
Selection | ✔︎ |  | Background of the selection when text is selected in the editor.
Highlight | ✔︎ |  | Color for partial highlighting of text, e.g. when “Highlight instances of selected text” is enabled in the Edit settings. This color with reduced opacity is used as a base for the highlight background.
Syntax |  | ✔︎ | Text color for each syntax highlighting element set in the syntax definition.

Some editor components, such as cursors and selections, have a system color determined by the macOS Appearance system settings. When “Use system colors” is selected in a CotEditor theme, the highlight color set by the system (System Settings > Appearance) is used instead of the theme-specific color.

Invisible characters, cursors, current lines, and syntax highlighting can have opacity set to a color. On the other hand, opacity cannot be set for the basic text color and some other components. These elements whose opacity cannot be set by the theme may adjust their opacity automatically depending on the opacity of the editor itself and other conditions.

## Customize a theme

To select a theme to customize:

1. Choose CotEditor > Settings.
2. Select the Appearance pane.
3. Select the theme you want to customize from the theme list.

To use an existing theme as a guide for creating your own, choose the Duplicate command in the Action pop-up menu instead. You can also export your themes and import themes that are created by others.

To customize a theme:

1. Click a color well in the theme editor.
2. Select a color in the Color window.

The change is saved automatically and applied immediately.

If you select the “Use system color” option, the color specified in the system (System Settings > Appearance) is used for the background of the selected text in the editor or the cursors, instead of a fixed color.

## Switch theme according to the appearance

A pair of themes with the same theme name but “ (Dark)” (with a space) at the end of one of them automatically switches themes depending on the window’s appearance. In this case, the theme name for light mode can be either the theme name only or the theme name with “ (Light)” at the end. For example, bundled “Anura” and “Anura (Dark)” themes are a pair. So, “Anura” is used when the appearance is light, and “Anura (Dark)” is used in Dark Mode.

However, if you select a theme opposite to the appearance as the default theme, that theme takes precedence regardless of the appearance.

## File format of CotEditor themes

A CotEditor theme file must have the .cottheme extension and its format is based on JSON with hexadecimal color values with a `#` symbol.

## See also

- Change Appearance settings