Like what we’re doing? Star us on GitHub!

Get Light/Dark Mode Preference for custom Component

Sylens Drake
4 weeks ago
10

Hey, how do I get the Light/Dark Mode Preference?


Need it for a custom component.

  • Jarrod
    Payload Team
    4 weeks ago

    @Sylens Drake the html element has a data-theme attribute that you can use to target your custom component css

  • thisisnotchris
    4 weeks ago

    I think more information about the data-theme attribute could be listen on the CSS customization page that references Dark Mode:

    https://payloadcms.com/docs/admin/customizing-css
  • jmikrut
    Payload Team
    4 weeks ago

    we don't explicitly export the

    useTheme

    hook, but you can still import it



    import { useTheme } from 'payload/dist/admin/components/utilities/Theme


    if you did want to help us export it, you could open a PR via adding an export to the

    payload/components/utilities

    file and then add it to docs here:



    https://payloadcms.com/docs/admin/hooks#react-hooks
  • damnstaychill
    last week

    @jmikrut was the PR ever opened? I started using the direct import today

  • jmikrut
    Payload Team
    last week

    Hey @damnstaychill no, we never added this, but i will add it today (got some other stuff coming out)



    anddd done



    will be released shortly

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More