Skip to content
Writing Room

Look and feel

View as Markdown

The room brings its own look, and none of it reaches the rest of your Studio:

  • Fonts. Newsreader (prose, with a true italic) and Figtree (controls) come with the plugin, Latin and Latin Extended, and load the first time the room opens. Nothing to install. Other scripts fall back to Georgia and the system UI font.

  • Colours. The room’s paper, warm neutrals and clay accent apply inside the room only. The accent (links, the caret, focus rings, Publish) is the one colour you can change, to match your brand:

    writingRoom({
  types: ['post'],
  accent: '#2F6FA8',
})

    Give one hex colour and the room uses it in light and dark, adjusting it where it has to so it stays readable on the room’s paper (WCAG AA), and works out the selection highlight and the text on Publish from it. To choose each yourself: accent: {light: '#2F6FA8', dark: '#8DB8E0'}.

A matching Studio theme (optional)

To give the rest of the Studio the room’s colours and Figtree, so moving in and out of the room isn’t a jolt, use the theme. It needs @sanity/themer:

npm install @sanity/themer
import {writingRoomTheme} from 'sanity-plugin-writing-room/theme'

export default defineConfig({
  // …
  theme: writingRoomTheme,
})

If you changed the room’s accent, build the theme from the same one: theme: createWritingRoomTheme({accent: '#2F6FA8'}).