Theme Stable

A theme sets the editor's colours, font and bar sizes so it matches your app. Every field is optional: set only what you change, and the rest keeps the default look. Setting a theme replaces the previous one, so to switch between light and dark, set the other theme.

iOS

dock.theme = EditorTheme(
    background: "#101418",
    bar: "#0b0e11",
    accent: "#2ee6a6",
    font: "Brand Sans",
    clips: .init(video: "#3355ff", audio: "#18a058")
)

Android

dock.theme = EditorTheme(
    background = "#101418",
    bar = "#0b0e11",
    accent = "#2ee6a6",
    font = "Brand Sans",
    clips = EditorTheme.ClipColors(video = "#3355ff", audio = "#18a058"),
)

React Native

<NitrakitEditor
  editor={editor}
  theme={{
    background: '#101418',
    bar: '#0b0e11',
    accent: '#2ee6a6',
    font: 'Brand Sans',
    clips: { video: '#3355ff', audio: '#18a058' },
  }}
/>

Web

editor.setTheme({
  background: '#101418',
  bar: '#0b0e11',
  accent: '#2ee6a6',
  font: 'Brand Sans',
  clips: { video: '#3355ff', audio: '#18a058' },
})

Or pass theme to createEditor (and to useNitrakitEditor in React and Vue, where it can change between renders).

Fields

Colours are #rrggbb, or #rrggbbaa with transparency.

Field	What it colours
background	Behind the editor controls.
bar	The tool bar.
panel	Panels a tool opens (sliders, choices).
text	Labels.
mutedText	Secondary labels, the time ruler.
accent	The active tool, sliders, snapping guides, the current keyframe, progress.
divider	Lines between parts.
timelineBackground	Behind the timeline and its ruler.
lane	Each lane of the timeline.
selection	The selected clip's outline and trim handles.
playhead	The playhead.
clips	Clip colours by kind: video, image, sticker, text, solid, audio, effects.
font	The labels' font family: a system font or one you registered.
barHeight, transportHeight	Heights of the tool bar (40–120 pt) and the transport row (32–96 pt).

A field the SDK doesn't know is an error, so a typo doesn't go unnoticed.

Light and dark

The editor doesn't follow the system appearance by itself: set the theme that matches your app whenever it changes, for example from the trait collection on iOS, the configuration on Android, or prefers-color-scheme on the web.