How to get current theme mode (light or dark) when making custom preview

[fe7ng654123]

I am directly using fireCMS as a whole App <FirebaseCMSApp />
When I am making custom preview and custom entity preview (e.g. BlogEntryPreview.tsx, PriceTextPreview.tsx in official Sample App), I want to make it follow the FirebaseCMSApp's theme mode, which means it should auto switch to dark mode when FirebaseCMSApp switched to dark.
https://firecms.co/docs/1.0.0/api/interfaces/ModeState#parameters
From docs there is a mode state storing the value of 'light' or 'dark', but how to get the value properly?

[fe7ng654123]

Actually it will be handy if we can get this property directly when building an entity preview. Introduce a new property named currentModeState : 'light' | 'dark' . Anyone else think this is a good idea?

[fgatti675]

Hi @fe7ng654123
You can get the current color mode using the hook useModeController

const {mode} = useModeController();

[fe7ng654123]

It works like a charm!! Thank you very much