Questions about setting the icon and accessing dark/light mode in Sanity Structure.
7 replies
Last updated: Feb 27, 2024
E
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.
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
T
user K
Did you get an answer to #2? I'm interested in the answer to that 👀Feb 23, 2024, 12:38 AM
T
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
usePrefersDarkhook you could import from
@sanity/uithat 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
E
Ok, figured out that the
Thanks for your help,
usePrefersDarkhook 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.