You have the option to directly examine CSS Media-Queries using JavaScript

The window.matchMedia() function provides a MediaQueryList object that reflects the outcomes of the specified CSS media query statement. The method can encompass various media features from the CSS @media rule, such as min-height, min-width, orientation, and more.

To determine if the Media Query is valid, utilize the matches property

// Verify support for Media Queries
if (window.matchMedia) {
  // Assessing dark-mode Media Query match
  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    // Dark mode
  } else {
    // Light mode
  }
} else {
  // Default behavior (in case Media Queries are not supported)
}

You can also use a simple shorthand method for a straightforward boolean check (with a default value at the end):

const checkIsDarkSchemePreferred = () => window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false;

To dynamically adjust the `color-scheme` based on user preferences, you can implement the following approach:

function setColorScheme(scheme) {
  switch(scheme){
    case 'dark':
      console.log('dark');
      
      break;
    case 'light':
      console.log('light');
      // Light mode
      break;
    default:
      // Default mode
      console.log('default');
      break;
  }
}

function getPreferredColorScheme() {
  if (window.matchMedia) {
    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
      return 'dark';
    } else {
      return 'light';
    }
  }
  return 'light';
}

function updateColorScheme(){
    setColorScheme(getPreferredColorScheme());
}

if(window.matchMedia){
  var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
  colorSchemeQuery.addEventListener('change', updateColorScheme);
}

updateColorScheme();

As stated on MDN's MediaQueryList Web APIs page, the recommended approach to monitor changes is by utilizing the addListener method. I encountered issues with using addEventListener specifically on iOS 13.4.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`The theme has switched to ${e.matches ? "dark" : "light"} mode`)
});

Check out this concise code snippet inspired by SanBen's solution:

function determineColorScheme() {
  return window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ? 'dark' : 'light';
}

Utilizing the power of optional chaining with matchMedia:

const selectedTheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light"

Take a look at the matchMedia feature:

function checkTheme() {
  if(window.matchMedia && window.matchMedia("(prefers-color-scheme:dark)").matches) {
    return "dark";
  } else {
    return "light";
  }
}

Before you start coding in JavaScript:

Utilize CSS to create a @media query that instructs an ::after pseudo class on the body element to display different text based on the user's color scheme preference. To prevent confusion for users, ensure to add a display: none; property to the ::after element inside the body.

CSS Snippet:

@media (prefers-color-scheme:dark){
    body::after{
        content: 'd';
        display: none;
    }
}
@media (prefers-color-scheme:light){
    body::after{
        content: 'l';
        display: none;
    }
}

Next step is adding your JavaScript code:

Given that we have a target object within the document to select, we can access the ::after pseudo class of the body element. Extracting the content from it is crucial, ensuring your CSS loads before executing any JavaScript commands! Remember, use 'd' for dark mode and 'l' for light mode.

JavaScript Piece:

var colorScheme = getComputedStyle(document.body,':after').content;
// d for dark mode, l for light mode.

The significance of this approach:

Although achievable through CSS and HTML alone, a scenario may arise where employing JavaScript becomes necessary. For instance, when inserting an img element containing text, requiring two images—one for light mode, the other for dark mode. Here, JavaScript proves handy in dynamically adjusting the src attribute value of the img element based on the active color scheme.

While there are possibly more applications, this specific use case stands out as a practical example.

References:

I gleaned insights on using the getComputedStyle function from a helpful discussion on Stack Overflow.

My understanding of @media (prefers-color-scheme:color scheme definition) was refined by consulting MDN Web Docs.

Additionally, I acquired knowledge on extracting .content from computed styles through a code suggestion in VSCode while typing

getComputedStyle(document.body,':after')

, validating its functionality and utility. (Unfortunately, the original source of this information is untraceable.)

If you're working with Bootstrap 5 and need to default to a dark theme when JavaScript is disabled, try this solution:

// prevent eye strain /////////////////////////////////////////////////////
const matchPrefersDark = window.matchMedia('(prefers-color-scheme:dark)');
if (matchPrefersDark.matches) {
  document.documentElement.setAttribute('data-bs-theme', 'dark');
}
matchPrefersDark.addEventListener('change', event => {
  document.documentElement.setAttribute('data-bs-theme', event.matches ? "dark" : "light");
});

Don't forget to include the following in your HTML:

<html lang="en-US" data-bs-theme="dark">

You can adjust the language attribute accordingly based on your requirements.

Check out this JavaScript code snippet designed to detect changes in the OS theme by using the appearance-changed event.

// This event triggers whenever the OS theme changes
window.addEventListener('appearance-changed', function(e) {
  console.log(e.detail); // Outputs 'light' or 'dark'
});

In addition, it introduces a new property window.appearance that allows you to retrieve the current OS theme:

switch (window.appearance) {
    
    case 'light': {
       // Perform actions for light theme
    } break;

    case 'dark': {
       // Perform actions for dark theme
    } break;
}

You can find the source code on GitHub.

If you are working with React, check out the useDarkMode hook. This handy tool listens for changes and allows users to easily toggle or switch between dark mode and light mode.

import { useDarkMode } from 'usehooks-ts'

export default function Component() {
  const { isDarkMode, toggle, enable, disable } = useDarkMode()
  return (
    <div>
      <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={enable}>Enable</button>
      <button onClick={disable}>Disable</button>
    </div>
  )
}