Studio Theming

import {type StudioTheme} from 'sanity'

const myTheme: StudioTheme = {
  color: {
    // Color configuration
  },
  fonts: {
    // Font configuration
  }
}

import {defineConfig} from 'sanity'
import {myTheme} from './theme'

export default defineConfig({
  // ...
  theme: myTheme
})

import {defineConfig} from 'sanity'

export default defineConfig({
  theme: {
    color: {
      dark: {
        default: {
          base: {
            bg: '#1a1a1a',
            fg: '#ffffff',
            // ... more colors
          }
        }
      },
      light: {
        default: {
          base: {
            bg: '#ffffff',
            fg: '#000000',
            // ... more colors
          }
        }
      }
    }
  }
})

import {defineConfig} from 'sanity'

export default defineConfig({
  theme: {
    fonts: {
      code: {
        family: 'Fira Code, monospace',
        sizes: [
          {fontSize: 13, lineHeight: 21, letterSpacing: 0},
          {fontSize: 16, lineHeight: 25, letterSpacing: 0},
          {fontSize: 18, lineHeight: 28, letterSpacing: 0},
          {fontSize: 21, lineHeight: 33, letterSpacing: 0},
          {fontSize: 26, lineHeight: 41, letterSpacing: 0},
        ],
        weights: {
          regular: 400,
          medium: 500,
          semibold: 600,
          bold: 700,
        },
      },
      heading: {
        family: 'Inter, sans-serif',
        // ...
      },
      text: {
        family: 'Inter, sans-serif',
        // ...
      },
    }
  }
})

import {defineConfig, type StudioColorScheme} from 'sanity'

export default defineConfig({
  // Force dark mode only
  theme: myTheme,
  // Note: To control scheme programmatically, use Studio component props
})

type StudioColorScheme = 'light' | 'dark' | 'system'

// theme.ts
import {type StudioTheme} from 'sanity'

export const customTheme: StudioTheme = {
  color: {
    dark: {
      default: {
        base: {
          bg: '#0f172a',
          fg: '#f8fafc',
          border: '#334155',
          focusRing: '#3b82f6',
          shadow: {umbra: '#000', penumbra: '#000', ambient: '#000'},
        },
        accent: {
          fg: '#3b82f6',
        },
        positive: {
          bg: '#065f46',
          fg: '#d1fae5',
        },
        caution: {
          bg: '#92400e',
          fg: '#fef3c7',
        },
        critical: {
          bg: '#7f1d1d',
          fg: '#fee2e2',
        },
      },
    },
    light: {
      default: {
        base: {
          bg: '#ffffff',
          fg: '#0f172a',
          border: '#cbd5e1',
          focusRing: '#3b82f6',
          shadow: {umbra: '#000', penumbra: '#000', ambient: '#000'},
        },
        accent: {
          fg: '#2563eb',
        },
        positive: {
          bg: '#d1fae5',
          fg: '#065f46',
        },
        caution: {
          bg: '#fef3c7',
          fg: '#92400e',
        },
        critical: {
          bg: '#fee2e2',
          fg: '#7f1d1d',
        },
      },
    },
  },
  fonts: {
    code: {
      family: '"JetBrains Mono", monospace',
      sizes: [
        {fontSize: 13, lineHeight: 21, letterSpacing: 0},
        {fontSize: 16, lineHeight: 25, letterSpacing: 0},
        {fontSize: 18, lineHeight: 28, letterSpacing: 0},
        {fontSize: 21, lineHeight: 33, letterSpacing: 0},
      ],
      weights: {regular: 400, medium: 500, semibold: 600, bold: 700},
    },
    heading: {
      family: '"Inter", system-ui, sans-serif',
      sizes: [
        {fontSize: 14, lineHeight: 21, letterSpacing: 0},
        {fontSize: 16, lineHeight: 24, letterSpacing: 0},
        {fontSize: 20, lineHeight: 30, letterSpacing: 0},
        {fontSize: 24, lineHeight: 33, letterSpacing: 0},
        {fontSize: 32, lineHeight: 39, letterSpacing: 0},
      ],
      weights: {regular: 400, medium: 600, semibold: 700, bold: 800},
    },
    text: {
      family: '"Inter", system-ui, sans-serif',
      sizes: [
        {fontSize: 13, lineHeight: 21, letterSpacing: 0},
        {fontSize: 16, lineHeight: 25, letterSpacing: 0},
        {fontSize: 18, lineHeight: 28, letterSpacing: 0},
        {fontSize: 21, lineHeight: 33, letterSpacing: 0},
      ],
      weights: {regular: 400, medium: 500, semibold: 600, bold: 700},
    },
  },
}

// sanity.config.ts
import {defineConfig} from 'sanity'
import {customTheme} from './theme'

export default defineConfig({
  // ...
  theme: customTheme,
})

import {Studio} from 'sanity'
import {useState} from 'react'
import config from './sanity.config'

function App() {
  const [scheme, setScheme] = useState<'light' | 'dark' | 'system'>('system')
  
  return (
    <Studio 
      config={config}
      scheme={scheme}
      onSchemeChange={setScheme}
    />
  )
}