# Dark/Light mode detection **URL:** \ **Category:** Ask for Help\ **Tags:** custom-code\ **Created:** [September 22, 2021, 10:56am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136 "2021-09-22T10:56:41Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [September 22, 2021, 10:56am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/1 "2021-09-22T10:56:41Z")
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. > **[Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://www.notion.so/glidecommunity/Experimental-Code-Library-27b07640f9f24db1aeb4629b74de0ad3?p=dd1ae924e4e5471b978cfe8c7d32647e)** > > A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team Demo: Hope it helps some of your use cases, especially for designing. ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [September 22, 2021, 8:39pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/2 "2021-09-22T20:39:32Z")
![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/04385e567b6b4ff19ae27fa3b088f4d52953b41e.gif) ---
**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\ **Post date:** [September 22, 2021, 8:52pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/3 "2021-09-22T20:52:16Z")
Hey @ThinhDinh superb. It will help for everyone and for me 😊 ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [November 21, 2021, 5:17am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/4 "2021-11-21T05:17:53Z")
Ooo…pretty 🙂 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/1/e1f5c2df649dc3c3675c07ff77a1c5473e4ac6f4.gif) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [November 21, 2021, 8:56am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/5 "2021-11-21T08:56:36Z")
Superb! ---
**Author:** ![Brandyouth](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@Brandyouth](https://community.glideapps.com/u/Brandyouth)\ **Post date:** [January 4, 2022, 12:47am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/6 "2022-01-04T00:47:04Z")
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 ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 4, 2022, 1:42am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/7 "2022-01-04T01:42:03Z")
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](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. ---
**Author:** ![Brandyouth](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@Brandyouth](https://community.glideapps.com/u/Brandyouth)\ **Post date:** [January 4, 2022, 2:57am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/8 "2022-01-04T02:57:07Z")
I love this community. Thank you for your quick response. I’ll let you know how it turns out. ---
**Author:** ![Brandyouth](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@Brandyouth](https://community.glideapps.com/u/Brandyouth)\ **Post date:** [January 4, 2022, 2:27pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/9 "2022-01-04T14:27:32Z")
Works! Especially on the desktop version of the app. Somehow on the Galaxy Ulra 21 it still shows the dark version. Desktop version: ![Darkmode](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/8590257288e846ad423ed9ca8de93c91b6c2411a.png) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 4, 2022, 11:40pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/10 "2022-01-04T23:40:01Z")
> [@Brandyouth](#): > > Somehow on the Galaxy Ulra 21 it still shows the dark version. Can you show me the Galaxy Ultra 21 version? I think the OS is not returning the right dark/light mode. ---
**Author:** ![Vitor\_Guimaraes](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vitor_guimaraes/32/39703_2.png) [@Vitor\_Guimaraes](https://community.glideapps.com/u/Vitor_Guimaraes)\ **Post date:** [August 16, 2023, 2:11pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/11 "2023-08-16T14:11:08Z")
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 ---
**Author:** ![drascon](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drascon/32/20070_2.png) [@drascon](https://community.glideapps.com/u/drascon)\ **Post date:** [August 16, 2023, 5:51pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/12 "2023-08-16T17:51:23Z")
“Match Device Theme” is only available in Classic Apps, unfortunately. It would definitely make my app look better 🤷‍♂️ ---
**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\ **Post date:** [August 16, 2024, 4:49pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/13 "2024-08-16T16:49:44Z")
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/](https://glide-yes-code-is-dark-mode.thinhdinh.repl.co/) We’re trying to display different images depending on dark or light theme detected. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [August 16, 2024, 11:34pm UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/14 "2024-08-16T23:34:04Z")
Please try in a JavaScript column to see if it works for you. ```auto const mq = window.matchMedia; return mq && mq('(prefers-color-scheme: dark)').matches ? "Dark" : "Light"; ``` ---
**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\ **Post date:** [August 20, 2024, 9:20am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/15 "2024-08-20T09:20:01Z")
> [@ThinhDinh](#): > > ```auto > const mq = window.matchMedia; > return mq && mq('(prefers-color-scheme: dark)').matches ? "Dark" > > ``` ![Screenshot 2024-08-20 at 10.19.44](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22d403a8308407824ba881d7d4ebea2d2ab2a491.png) ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [August 20, 2024, 9:41am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/16 "2024-08-20T09:41:33Z")
You are missing the end of the second line. ---
**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\ **Post date:** [August 20, 2024, 10:06am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/17 "2024-08-20T10:06:52Z")
Ah, thank you. Hadn’t opened the full code. Although still seeing this error. ![Screenshot 2024-08-20 at 11.05.05](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bb7aa3a49a0a74898d8c219cf23eaa71ebef437b.png) 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. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [August 20, 2024, 10:45am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/18 "2024-08-20T10:45:05Z")
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. ---
**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\ **Post date:** [August 20, 2024, 10:46am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/19 "2024-08-20T10:46:29Z")
Thanks for the helpful explanation Darren. Is the Function Error message expected or is there actually a problem? ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [August 20, 2024, 10:51am UTC](https://community.glideapps.com/t/dark-light-mode-detection/32136/20 "2024-08-20T10:51:16Z")
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: ![CleanShot 2024-08-20 at 18.49.09@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/42f0141100b4dde7c26e21213e20b3e34e3cdf18.png) That error makes absolutely no sense, because there is no `split()` function in the code at all 🤷‍♂️ 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.