Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

Detect Dark Mode

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

console.log(isDarkMode) // Result: True or False
Comment

Detect dark mode

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

Detect Dark Mode

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

detect system dark mode

/* Light mode, Dark mode is below... 
Standard is registered on W3C in Media Queries Level 5:
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
*/

@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
Comment

Detect Dark Mode

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches;
// Testing
console.log(isDarkMode());
Comment

PREVIOUS NEXT
Code Example
Javascript :: javascript timestamp 
Javascript :: javascript iterate through an object 
Javascript :: change the color of toast toastr js 
Javascript :: sum array without loop javascript 
Javascript :: upload file react onclick 
Javascript :: vanilla js fade in fade out 
Javascript :: sortable jquery 
Javascript :: nds npm 
Javascript :: The removeChild() Method 
Javascript :: highlight nav menu on scroll with javascript 
Javascript :: jquery call a class 
Javascript :: flatMap() method 
Javascript :: flatten nested object 
Javascript :: react-navigation 
Javascript :: electron js web reference to use node 
Javascript :: useRoutes 
Javascript :: node settimeout 
Javascript :: jquery get padding top without px 
Javascript :: date format in javascript 
Javascript :: convert UTC date to Indonesian local date format 
Javascript :: Adding whitespace to the left of the string in JavaScript 
Javascript :: javascript clone element 
Javascript :: Regular Expressions: Extract Matches 
Javascript :: Basic Vue JS Setup script for Laravel App 
Javascript :: route guard in react js 
Javascript :: jquery form validation 
Javascript :: javascript new date undefined 
Javascript :: promise syntax for javascript 
Javascript :: javascript remove event listener after bind 
Javascript :: google sheets get ranges 
ADD CONTENT
Topic
Content
Source link
Name
2+6 =