Modern operating systems allow users to choose the appearance they would like to see in all applications.
The option can be detected by looking at the
prefers-color-scheme media query.
It can be one of the following values:
light: User would like to see the page in the light mode
dark: User would like to see the page in the dark mode
no-preference: The system doesn’t know about the user preferences
By checking against this media query value, we can determine if the user prefers the dark mode or not:
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;