Detecting whether a browser is capable of supporting dark mode

Question

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

Is there a way to detect if a browser supports dark mode as well? (By "supports dark mode" I mean when the browser automatically changes the default background/text colors of web pages).

To enforce dark mode in CSS, we can use:

color-scheme: dark;

However, some browsers like Firefox for Android might not acknowledge this. Hence, it would be ideal to hide theme selection if dark mode is unavailable.

javascript css browser darkmode

Answer 1

Answer №1

One method I am currently using involves toggling between dark and light modes to see if the default color changes:

const hasDarkMode = function()
{
  const el = document.createElement("div");
  el.style.display = "none";
  document.body.appendChild(el);
  let color;
  /*canvastext - doesn't work in Samsung Internet, initial/unset - doesn't work in Firefox*/
  for(let i = 0, c = ["canvastext", "initial", "unset"]; i < c.length; i++ )
  {
    el.style.color = c[i];
    el.style.colorScheme = "dark";
    color = getComputedStyle(el).color;
    el.style.colorScheme = "light";
    color = color != getComputedStyle(el).color;
    if (color)
      break;
  }
  document.body.removeChild(el);
  return color;
}();

console.log("Dark mode supported:", hasDarkMode);

While this approach may not be the most elegant, it appears to be effective.

We can also explore another method suggested by @connexo:

const hasDarkMode = CSS.supports("color-scheme", "dark");

console.log("Dark mode supported:", hasDarkMode);

@supports (color-scheme: dark)
{
  .no-dark-mode
  {
    display: none;
  }
}

<div>Dark mode is <span class="no-dark-mode">not </span>available</div>

Answer 2

One method I am currently using involves toggling between dark and light modes to see if the default color changes:

const hasDarkMode = function()
{
  const el = document.createElement("div");
  el.style.display = "none";
  document.body.appendChild(el);
  let color;
  /*canvastext - doesn't work in Samsung Internet, initial/unset - doesn't work in Firefox*/
  for(let i = 0, c = ["canvastext", "initial", "unset"]; i < c.length; i++ )
  {
    el.style.color = c[i];
    el.style.colorScheme = "dark";
    color = getComputedStyle(el).color;
    el.style.colorScheme = "light";
    color = color != getComputedStyle(el).color;
    if (color)
      break;
  }
  document.body.removeChild(el);
  return color;
}();

console.log("Dark mode supported:", hasDarkMode);

While this approach may not be the most elegant, it appears to be effective.

We can also explore another method suggested by @connexo:

const hasDarkMode = CSS.supports("color-scheme", "dark");

console.log("Dark mode supported:", hasDarkMode);

@supports (color-scheme: dark)
{
  .no-dark-mode
  {
    display: none;
  }
}

<div>Dark mode is <span class="no-dark-mode">not </span>available</div>

Detecting whether a browser is capable of supporting dark mode

Answer №1

Similar questions

Creating a new row with a dropdown list upon clicking a button

Can you explain the meaning of this AJAX code snippet?

Error message in Material-UI TextField not displaying when state is updated using Object.assign technique

What is the best way to arrange an array to display country data based on Covid cases in descending order rather than alphabetical order?

Express: utilizing rawBody or buffer for a specific endpoint

Fill a dropdown menu with options from a JSON object, arranging them in ascending order

The order of CSS precedence shifts even when the class sequence is the same

If the text is too lengthy, enclose it within a div element

Having trouble clicking the button due to the overlay blocking it?

What is the best way to align the items in two lists at the center as if they were all individual

Unable to set selected property in React Material-UI menu item

Utilize Angular service to deliver on a promise

Unique alphanumeric code following the inclusion of a JavaScript file

What is the best way to access the front camera on both Android and iOS devices in order to capture a photo using Vue.J

How to Use PHP to Submit Form Information

CSS for mobile devices not loading until the device is rotated

Tips on concealing modal popup when the page refreshes successfully

Find the sum of values in an array of objects if they are identical

"Utilizing JQuery to enhance task management by implementing a delete function

Tips on adjusting the pixel dimensions of an image using a file object