How to Handle Dark Mode in App Feature

[saqib.ishaq07 (Saqib Ishaq)]

Hi,
I am building an React app using monday-sdk where I want to handle Colors and typography on dark mode , and I couldn’t found any solution in monday-sdk or Monday Design System.
Kindly share an example code to handle dork mode.
Thank You

[Helen]

Hi @saqib.ishaq07,

Great question! I’m asking around internally now for you.

I know the “Colors” page in our style guide does mention dark mode: Webpack App, perhaps you can use this as a starting out point until I get back to you.

[Helen]

Hi @saqib.ishaq07,

The answer is yes! It escaped me, but you can see the Dark Mode UI features here:

Hope this helps!

[saqib.ishaq07 (Saqib Ishaq)]

Hi,
Thank you for responding. Actually all I want to know that how can I change color of my storybook component in my app when it goes on Dark Mode .
Like how to conditionally change the color of text maybe, e.g. text color is black on light mode(or default mode ) when it goes on dark mode text become invisible . how to handle this issue.
Thank You

[Helen]

Hi @saqib.ishaq07,

Great question! In this case, you can utilize our SDK methods (the monday.get("context") method) in order to see whether a user has a light or dark theme:

Depending on which theme is returned, you can then utilize different text colors within your app.

Here is the link to our SDK documentation: GitHub - mondaycom/monday-sdk-js: Node.js and JavaScript SDK for developing over the monday.com platform for your reference as well!

[saqib.ishaq07 (Saqib Ishaq)]

Hi,
Thank You so much I needed this hint.