Match your site's look
Set the editor's colors, corners and font with CSS custom properties, for light and dark.
The editor draws inside its own shadow root, so your page's CSS can't break it and its CSS can't touch your page. To change how it looks, set CSS custom properties on the editor's box or anything around it. They pass into the editor.
Colors, corners and font
#editor {
--mastershot-brand: #0a7cff;
--mastershot-brand-foreground: #ffffff;
--mastershot-radius: 4px;
--mastershot-font-sans: "Inter", sans-serif;
}--mastershot-brand is the color of the Done button and the editor's highlights. The font has to be loaded by your page already.
Light and dark
theme picks the appearance: "light" (the default), "dark", or "auto" to follow your visitor's system setting.
appendDefaultEditor("#editor", { theme: "auto" })--mastershot-<token> sets a color for the light appearance and --mastershot-dark-<token> for the dark one:
#editor {
--mastershot-background: #ffffff;
--mastershot-dark-background: #0b0b0f;
--mastershot-brand: #0a7cff;
--mastershot-dark-brand: #5aa8ff;
}Set editor.theme again at any time, for example when your site's own dark mode is switched.
Every token
Anything you don't set keeps the editor's own value. Colors can be any CSS color.
| Token | Is |
|---|---|
background, foreground | The editor's panels and their text |
card, card-foreground | Raised panels |
popover, popover-foreground | Menus and pop-ups |
primary, primary-foreground | Strong buttons |
secondary, secondary-foreground | Quieter buttons |
muted, muted-foreground | Quiet backgrounds and secondary text |
accent, accent-foreground | Hovered items |
destructive, destructive-foreground | Errors |
border, input, ring | Lines, input borders, and the focus ring |
brand, brand-foreground | Done and the editor's highlights |
stage, stage-raised, stage-foreground | The area behind the photo or video, and its text |
radius | How round the corners are |
font-sans | The font, in both appearances |
Size
The editor fills the box you give it, so its size is your box's. Give the box a height: a fixed one, a share of the screen such as height: 80vh, or a flex or grid cell that has one. It works on phone and computer screens alike.