Dark Mode interactions in v3

[julrich]

Hey everyone, would love to know if there's a way to programmatically interact with the current theme (especially light and dark modes). Something like a hook, maybe?

Background is that we're embedding the Studio inside another React SPA, which already handles light and dark modes in regards to user preference (including explicit options to set light / dark mode by the user). This should, ideally, be synced with the embedded Studio. Such a hook would make it pretty easy to connect those parts up!

[svey-xyz]

I'm a few years late to answer this but I came across this question while trying to figure it out for myself. So hope this helps if you still need it, or if anyone else, like me, ends up here looking for how to do this!

sanity exports useColorSchemeValue and useColorSchemeSetValue, that can be used to check and set theme state. I use something similar to this in my project:

import { useColorSchemeSetValue, useColorSchemeValue } from 'sanity'

const setSanityColourScheme = useColorSchemeSetValue()

const switchTheme = () => {
    const sanityColourScheme: "light" | "dark" = useColorSchemeValue()

    if (setSanityColourScheme)
        setSanityColourScheme(sanityColourScheme == 'light' ? 'dark' : 'light' )
}

There are also a few other ColorScheme properties exported by sanity