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

Error encountered while connecting to SQL Server from node.js causing the express server to crash due to a ConnectionError

Maintain a consistent header height with CSS even when using the calc() function

Creating a dynamic number of datasets in Chart JSWith Chart JS

Ways to verify whether a string has already been hashed in Node.js utilizing crypto

Troubleshooting issues with JSON compatibility within the OnChange event

MVC - The challenge of users repeatedly clicking the Submit button

Tips for saving data in the $localStorage as an object

Guide on executing YUI tests in headless mode and recording outcomes in a log document

Update the dropdown field selection to the color #333 with the help of javascript

Implementing CodeIgniter's HMVC structure to dynamically update data using AJAX functionality

The execution of the function halts as soon as the player emerges victorious

Execute a simulated click function in JavaScript without causing the viewport to move

The tooltip in Bootstrap v2.3.2 is causing words to be cut right in half

Exploring the Power of GraphQL Args in Mutation Operations

Discovering ways to determine if multiple strings are present within a single string using JavaScript

Tips for creating multiple popups using a single line of JavaScript code

AngularJS - Multi-controller Data Calculation

Guide on accessing js file in an Angular application

problems with the way white space is displayed on the right side of the page in Opera and Safari

Tips for Removing Copyright on Charts