Get Light/Dark Mode Preference for custom Component

default discord avatar
Sylens Drakelast year

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

Need it for a custom component.

  • default discord avatar
    Jarrodlast year

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

  • default discord avatar
    thisisnotchrislast year

    I think more information about the data-theme attribute could be listen on the CSS customization page that references Dark Mode:
  • discord user avatar
    last year

    we don't explicitly export the


    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


    file and then add it to docs here:
  • default discord avatar
    damnstaychilllast year

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

  • discord user avatar
    last year

    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

Star on GitHub


Chat on Discord



Can't find what you're looking for?

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