Expose theme to components

[EXio4]

Hi!

We've been using payload and we're in the process of integrating custom routes for extra functionality, to get the style right - we need to know if we're on dark or light mode - and there seems to be no way to access that from the documentation

According to abebde6 a hook useTheme should be exposed, but it is only exposed on utilities.js, not .ts? and it's not generally clear what is going on

Very much appreciated if we have a helper for this, as right now we're reading local storage & reimplementing the logic from payload on our side to know which theme we should use

[jmikrut]

Hey @EXio4 — you can import { useTheme } from 'payload/components/utilities.

Boom!

This definitely needs to be documented though. It should go in the React Hooks page:
https://payloadcms.com/docs/admin/hooks#react-hooks

Those docs are here:
https://github.com/payloadcms/payload/blob/master/docs/admin/hooks.mdx

Are you interested in making a PR for adding this? That would be huge! Otherwise we can get to it eventually.

[EXio4]

We're using typescript, and trying to import useTheme results in an error, both when running payload and inside vscode

export 'useTheme' (imported as 'useTheme') was not found in 'payload/components/utilities' (possible exports: Meta, useAuth, useConfig, useDocumentInfo, useEditDepth, useLocale)

Made sure we are on the latest version (1.6.28) - as useTheme should be exposed from https://github.com/payloadcms/payload/releases/tag/v1.6.20 onwards

I can get around to make a quick PR to expose useTheme from the .ts file, but it'll take me a few minutes to test it based off the tasks I'm currently doing - and while doing that I could add a few lines to document the hook briefly