✨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
usePrefersDark
hook you could import from
@sanity/ui
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: () => (
    <img
      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAARVBMVEVHcEzyPzDxPy/wPjDwPi/wPi/xPzLxQDHwPi/wPCzwOSjzXlL3kor4oZr1f3bxSz36sqz0cGf81tTwMh/////+7Or6v7uaZRJHAAAACXRSTlMAMoO/5/9bFdR0/bLYAAABA0lEQVR4AWyRBwKDMAhFMx2ZGGLvf9RiCHZ+t4+NuqWNdd47a7T61kJA5JYPtG7+Q9v6FtH/SH+xPex8e6crf4WYMqnUwN8ceRtuPsFUYbqNOtmP2Tu9anaDHQ0gxVqPi9aR10k1mDtkKmbHyK5ck2EI/Sw4yq0kP2SUZZh674+jIpL37lmWU5J9v3Q2KB4FOuVZWPrUmW9XgR7j45y4CVVOaMB65DYMMs6wVgZLlQTEWhq5hlmQYRhJ4TKi8P2UVjQ7ZgCIeDknaI3D6nt8QDpijQmgcU73d/DZ7zJ4tXHgIiwx2z6WXUvKOZUY9rdlc03SzXPwZIIvgeFLmoQTNd7sAAAfVxYmUQgxOwAAAABJRU5ErkJggg=="
      alt="Sanity.io"
      width={24}
      height={24}
    />
  ),

  // ...

});
Feb 23, 2024, 1:05 AM
Ok, figured out that the
usePrefersDark
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()

console.log(theme.sanity.v2.color._dark)
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
and
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?