Get Light/Dark Mode Preference for custom Component

default discord avatar
Sylens Drake
9 months ago
10

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


Need it for a custom component.

  • default discord avatar
    Jarrod
    9 months ago

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

  • default discord avatar
    thisisnotchris
    9 months 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
  • discord user avatar
    jmikrut
    Payload Team
    9 months 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
  • default discord avatar
    damnstaychill
    8 months ago

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

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    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
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.