From 8f2f92b9a5e944e7298cfdeb5f8bb12260dff1ec Mon Sep 17 00:00:00 2001 From: Sudheer Jonna Date: Mon, 1 Jul 2024 09:32:46 +0800 Subject: [PATCH] Add matchMedia for dark mode --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 8d56335f..2536df11 100644 --- a/README.md +++ b/README.md @@ -8735,6 +8735,31 @@ The execution context is created when a function is called. The function's code **[⬆ Back to Top](#table-of-contents)** + 464. ### How to detect system dark mode in javascript? + + The combination of `Window.matchMedia()` utility method along with media query is used to check if the user has selected a dark color scheme in their operating system settings or not. The CSS media query `prefers-color-scheme` needs to be passed to identify system color theme. + + The following javascript code describes the usage, + + ```javascript + const hasDarkColorScheme = () => + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches; + ``` + + You can also watch changes to system color scheme using `addEventListener`, + + ```javascript + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", (event) => { + const theme = event.matches ? "dark" : "light"; + }); + ``` + **Note:** The matchMedia method returns **MediaQueryList** object stores information from a media query. + + **[⬆ Back to Top](#table-of-contents)** + ### Coding Exercise