Get Light/Dark Mode Preference for custom Component

sylensdrake2 years ago

5

• 

  jarrod_not_jared

  2 years ago

  @267014985056518147

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

• 

  notchr2 years 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

  2 years 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
• 

  damnstaychill2 years ago

  @364124941832159242

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

• 

  jmikrut

  2 years ago

  Hey

  @473343795782615060

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

  
  
  

  anddd done

  
  
  

  will be released shortly