macos-darkmode – Tarik Billa

How can I emulate prefers-color-scheme media query in Chrome?

January 6, 2023 by Tarik

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel Open Developer tools (otherwise the key combination below opens the print dialog) Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac) Type “Show rendering” Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

How do I detect dark mode using JavaScript?

October 7, 2022 by Tarik

if (window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches) { // dark mode } To watch for changes: window.matchMedia(‘(prefers-color-scheme: dark)’).addEventListener(‘change’, event => { const newColorScheme = event.matches ? “dark” : “light”; });