You can check the CSS Media-Queries directly with JavaScript

The window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

To check if the Media-Query is true, the matches property can be used

// Check to see if Media-Queries are supported
if (window.matchMedia) {
  // Check if the dark-mode Media-Query matches
  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    // Dark
  } else {
    // Light
  }
} else {
  // Default (when Media-Queries are not supported)
}

Or a simple shorthand for an easy boolean check (with a default at the end):

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

function setColorScheme(scheme) {
  switch(scheme){
    case 'dark':
      console.log('dark');
      
      break;
    case 'light':
      console.log('light');
      // Light
      break;
    default:
      // Default
      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();

According to MediaQueryList - Web APIs | MDN, addListener is the correct way to listen to the change. addEventListener is not working for me on iOS 13.4.

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

Here's a one-liner based on SanBen's answer:

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

Using optional chaining on matchMedia:

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

Before typing your JavaScript:

You can use CSS to make a @media query that says to have an ::after pseudo class on the body element that has a different text depending on the color-scheme of the user. In order to make sure the ::after on the body element doesn't confuse users, add a display: none; on the after element.

CSS Code:

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

Now for your JavaScript:

Since we have an object in the document to select, we can get the ::after pseudo class of the body element. We need to get the content of it, just make sure your CSS loads before your JavaScript does! 'd' for dark mode, and 'l' for light mode.

JavaScript Code:

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

Why this could be useful

You can do this in CSS and HTML, but why would you do it in JavaScript?

You would use JavaScript because you might have to add an img element, but the image has text, so you got 2 images, one for light mode, the other for dark mode. So, you could use JavaScript to change the src attribute's value of the img element to the correct URL based off of the color-scheme.

There is probably more uses, but that is the use I can think of.

Sources:

I learned getComputedStyle function from this stackoverflow article.

I learned @media (prefers-color-scheme:color scheme to detect) from MDN Web Docs.

I learned how to get .content of computed style from seeing it as a code suggestion on VSCode as I typed getComputedStyle(document.body,':after') and it working as I expected it to. (If I saw it on an article, I can't find which I visited)

Check the matchMedia option:

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

If you are using Bootstrap 5 and you want to default to dark if JavaScript is off use this:

// don't hurt peoples eyes /////////////////////////////////////////////////////
const matchPrefersLight = window.matchMedia('(prefers-color-scheme:light)');
if (matchPrefersLight.matches) {
  document.documentElement.setAttribute('data-bs-theme', 'light');
}
matchPrefersLight.addEventListener('change', event => {
  document.documentElement.setAttribute('data-bs-theme', event.matches ? "light" : "dark");
});

And also use your top element:

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

or whatever other language you are using.

Here's a 1k script that adds appearance-changed event to detect OS theme changes.

// fires every time the OS theme changes
window.addEventListener('appearance-changed', function(e) {
  console.log(e.detail); // `light`, `dark`
});

Also adds window.appearance which you can use to get the current OS theme:

switch (window.appearance) {
    
    case 'light': {
       // do some light theme stuff
    } break;

    case 'dark': {
       // do some dark theme stuff
    } break;
}

It's open source on GitHub.

for people using react, see the useDarkMode hook. Which listens for changes and also allows you to toggle/change the dark 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>
  )
}