Get Light/Dark Mode Preference for custom Component

Sylens Drake

4 weeks ago

10

• 

  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