✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Questions about setting the icon and accessing dark/light mode in Sanity Structure.

7 replies
Last updated: Feb 27, 2024
Hey Everyone! I managed to set the icon with the defineConfig of the sanity.config.js file, which changes the icon in the upper left corner of Sanity Structure. But my questions are:1. Is the icon required to be an SVG? That's all I could get to work.
2. Can I access if a user switches between Dark and Light mode? If the icon is a white svg, then it can't be seen in Light mode. Same if it is a dark svg in dark mode.
Feb 13, 2024, 7:14 PM
user K
Did you get an answer to #2? I'm interested in the answer to that 👀
Feb 23, 2024, 12:38 AM
I did find this, though it doesn't help you to set specific colours, but does get you a toggle between
rgb(228, 229, 233)
(near white) and
rgb(37, 40, 55)
(near black).
Feb 23, 2024, 12:42 AM
There’s a
hook you could import from
that I believe should achieve this. I tried the following for a quick POC:

// sanity.config.tsx

import { usePrefersDark } from '@sanity/ui';

function StudioIcon() {
  const prefersDark = usePrefersDark();
  return prefersDark === true ? <RocketIcon /> : <AddIcon />;

export default defineConfig({
  name: 'default',
  title: 'Playground v3',
  icon: () => <StudioIcon />,

  // ...

Feb 23, 2024, 12:55 AM
For number 1, I tried replacing one of the icons with a simple image element (sourcing a png), and that worked fine.
Feb 23, 2024, 1:04 AM
For number 1, it looks like the key is to use a function. I tried the following and it worked:

export default defineConfig({
  name: 'default',
  title: 'Playground v3',
  icon: () => (

  // ...

Feb 23, 2024, 1:05 AM
Ok, figured out that the
hook is designed to respond to the user's system-wide color scheme preference, and not the theme setting within the Sanity Studio. To access that, use the useTheme hook and you can drill down to find the dark/light mode info.
const theme = useTheme()

This will log true or false as you switch between dark and light. This is exactly what I was looking for.
Thanks for your help,
user A
user G
Feb 27, 2024, 12:10 AM
Ah, good to know! I used the light/dark emulation buttons in dev tools, but I guess those would operate on the system setting. Thanks for following up with your solution!
Feb 27, 2024, 12:40 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?