๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Theming

Learn how to customize the styling and branding of your studio

Theming in Sanity Studio

Using buildLegacyTheme

The top-level theme config property allows you to customize the color palette of the studio. You can create your own themes using the buildLegacyTheme helper function exported from the sanity package.

import {buildLegacyTheme, defineConfig} from 'sanity'

const props = {
  '--my-white': '#fff',
  '--my-black': '#1a1a1a',
  '--my-blue': '#4285f4',
  '--my-red': '#db4437',
  '--my-yellow': '#f4b400',
  '--my-green': '#0f9d58',
}

export const myTheme = buildLegacyTheme({
  /* Base theme colors */
  '--black': props['--my-black'],
  '--white': props['--my-white'],

  '--gray': '#666',
  '--gray-base': '#666',

  '--component-bg': props['--my-white'],
  '--component-text-color': props['--my-black'],

  /* Brand */
  '--brand-primary': props['--my-blue'],

  // Default button
  '--default-button-color': '#666',
  '--default-button-primary-color': props['--my-blue'],
  '--default-button-success-color': props['--my-green'],
  '--default-button-warning-color': props['--my-yellow'],
  '--default-button-danger-color': props['--my-red'],

  /* State */
  '--state-info-color': props['--my-blue'],
  '--state-success-color': props['--my-green'],
  '--state-warning-color': props['--my-yellow'],
  '--state-danger-color': props['--my-red'],

  /* Navbar */
  '--main-navigation-color': props['--my-black'],
  '--main-navigation-color--inverted': props['--my-white'],

  '--focus-color': props['--my-blue'],
})

export default defineConfig({
  // rest of config...,

  theme: myTheme,
})

Using the Themer app

A potentially quicker and easier way to go about creating themes for your studio is to use Themer. This web app was created in-house at Sanity and will let you visually create a custom palette that you can then export for your own use.

The Themer app makes generating themes for the studio easy!

Was this article helpful?