Question

21

How do I detect dark mode using JavaScript?

rated 0 times [ 26] [ 5] / answers: 1 / hits: 130184 / 5 Years ago, fri, may 31, 2019, 12:00:00

Windows and macOS now have dark mode.

For CSS I can use:

@media (prefers-dark-interface) { 

  color: white; background: black 

}

But I am using the Stripe Elements API, which puts colors in JavaScript

For example:

const stripeElementStyles = {

  base: {

    color: COLORS.darkGrey,

    fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,

    fontSize: '18px',

    fontSmoothing: 'antialiased',

    '::placeholder': {

      color: COLORS.midgrey

    },

    ':-webkit-autofill': {

      color: COLORS.icyWhite

    }

  }

}

How can I detect the OS's preferred color scheme in JavaScript?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marinalyssak

Add To Favorites

Follow

Total Points: 637

Total Questions: 101

Total Answers: 94

Location: Morocco

Member since Fri, May 22, 2020

4 Years ago

marinalyssak questions

1 What is useCallback in React and when to use it?

Fri, Feb 25, 22, 00:00, 2 Years ago

1 Prettier doesn't format based on my eslint config

Sun, Oct 31, 21, 00:00, 3 Years ago

1 Typescript Object literal may only specify known properties not effects on Promise return function

Tue, Oct 12, 21, 00:00, 3 Years ago

1 Unable To see My .ts files inside sources in Developer tools in my Angular 12 application

Fri, Oct 1, 21, 00:00, 3 Years ago

1 I would like to mint a new token on solana. How can I do this using solana-web3.js?

Thu, Jul 1, 21, 00:00, 3 Years ago

View All

answered 5 Years ago francokeganr · Accepted Answer

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {

    // dark mode

}

To watch for changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {

    const newColorScheme = event.matches ? "dark" : "light";

});