Dark/Light mode detection

In some cases where I enable match device’s theme, I find some of my images/illustrations does not work that well on both dark & light mode.

Therefore I created this column so I can cover both bases.

Demo:

Hope it helps some of your use cases, especially for designing.

15 Likes

4 Likes

Hey @ThinhDinh superb. It will help for everyone and for me :blush:

1 Like

Ooo…pretty :slight_smile:

6 Likes

Superb!

1 Like

Hi ThinhDinh, thanks for doing a demo on this. I’ve been trying to follow the video but am still confused as I can’t see how i can make this work.

My proble is Id like to switch logos based on the mode. Is there some kind of code or link to code that detects when the device goes dark mode? I tried to follow but can’t see how to achieve this without a detection code

Have you tried to put this link in your Experimental Code column to detect the user’s dark/light mode?

https://glide-yes-code-is-dark-mode.thinhdinh.repl.co

Then you can show/hide different logos based on the result of the experimental code column.

I love this community. Thank you for your quick response. I’ll let you know how it turns out.

1 Like

Works! Especially on the desktop version of the app. Somehow on the Galaxy Ulra 21 it still shows the dark version.
Desktop version:

Can you show me the Galaxy Ultra 21 version? I think the OS is not returning the right dark/light mode.

Is it possible to disable “dark mode” on new Glide? There was a checkbox in the old version that we could able or disable the “match theme’s device” but I can’t find it in the new version

1 Like

“Match Device Theme” is only available in Classic Apps, unfortunately. It would definitely make my app look better :man_shrugging:

Is there a new method for this or a new link?
Current one no longer works - https://glide-yes-code-is-dark-mode.thinhdinh.repl.co/

We’re trying to display different images depending on dark or light theme detected.

Please try in a JavaScript column to see if it works for you.

const mq = window.matchMedia;
return mq && mq('(prefers-color-scheme: dark)').matches ? "Dark" : "Light";
1 Like

You are missing the end of the second line.

Ah, thank you. Hadn’t opened the full code.

Although still seeing this error.

The column is now showing a value but seems to still show “Light” when on dark mode.
Is this user specific? Can’t see the user specific column option.

It’s a JavaScript column, which means that it’s evaluated independently on each Users device. So yes, it’s effectively User Specific. If you’re in the builder, you’ll see a result based on your own browser, regardless of which user you view as.

Thanks for the helpful explanation Darren.

Is the Function Error message expected or is there actually a problem?

Are you still getting the same error?

Sometimes the JavaScript column returns errors that make no sense. For example, I just tried it and I get the following error:

That error makes absolutely no sense, because there is no split() function in the code at all :man_shrugging: So I’d consider that a bug in the column.

As long as you’re getting the expected result, I wouldn’t be too concerned about the error.

2 Likes