How to add custom CSS styles in Sanity Studio v3?

In Sanity Studio v3, the old parts-based system (including part:@sanity/base/theme/variables/override-style) has been removed. Here's how to add custom styles now:

The Modern Approach: Using buildLegacyTheme

The recommended way to customize Studio v3 styling is through the theme configuration property in your sanity.config.ts file. You can create custom themes using the buildLegacyTheme helper function:

import {buildLegacyTheme, defineConfig} from 'sanity'

const props = {
  '--my-white': '#fff',
  '--my-black': '#1a1a1a',
  '--my-blue': '#4285f4',
  // ... other color variables
}

export const myTheme = buildLegacyTheme({
  /* Base theme colors */
  '--black': props['--my-black'],
  '--white': props['--my-white'],
  
  /* Brand */
  '--brand-primary': props['--my-blue'],
  
  /* Navbar */
  '--main-navigation-color': props['--my-black'],
  '--main-navigation-color--inverted': props['--my-white'],
  
  // ... other theme properties
})

export default defineConfig({
  // ... rest of config
  theme: myTheme,
})

This approach uses CSS variables under the hood, making your customizations more maintainable and upgrade-friendly compared to the old parts system.

Quick Alternative: Use Themer

If you want a visual way to create themes without writing code, check out Themer - an official Sanity tool that lets you visually design your Studio theme and export the configuration code.

For Global CSS

If you need to add truly custom CSS beyond what theming provides, you can import a global CSS file in your sanity.config.ts:

import './styles/custom-studio.css'

However, the theming approach is preferred as it's more maintainable and won't break with Studio updates.

The key takeaway: Studio v3 moved away from the parts system to a more straightforward configuration-based approach that's both more powerful and easier to maintain.