The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript.

detectColorScheme() {
   if (!window.matchMedia) {
     return false;
   } else if (window.matchMedia('(prefers-color-scheme: dark').matches) {
     this.isDarkMode = true;
   }
}

Although this code functions correctly in Chrome, it encounters an issue with Safari. Specifically, for Safari users, the function still returns false even when the system dark mode setting is active.

javascripthtmlcsstypescript

Answer №1

There seems to be a missing closing parenthesis ) in the code you provided. Here is the corrected version:

detectColorScheme() {
   if (!window.matchMedia) {
     return false;
   } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
     this.isDarkMode = true;
   }
}

Below are some other examples for reference:

window.matchMedia('(prefers-color-scheme: dark)').matches
window.matchMedia('(prefers-color-scheme: light)').matches
window.matchMedia('(prefers-reduced-motion)').matches
window.matchMedia('(max-width: 600px)').matches

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access a portion of the redux state during server requests

I am facing a scenario where I need to make a server call using the most recent redux state. My initial thought was to pass a copy of the state through the method flow and then invoke the action creator with that state. However, there is a chance that the ...

javascriptreactjsredux

Why won't JSZip accept a base64 string for loading a zip file?

As I work on implementing a feature where a small JSON object is written to the URL as a user interacts with items on a page, I also want to make sure the URL can be read later so users can resume where they left off. I successfully managed to create the ...

javascriptjszip

Managing key presses with functions in VueJs

Within my component, I am utilizing VueStrap's modal in the following manner: <template> <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed=" ...

javascriptvue.jsvuejs2vue-componentvue-strap

What is the reason that TypeScript cannot replace a method of the base class with a subtype?

Here's a straightforward example. type Callback<T> = (sender: T) => void; class Warehouse<T> { private callbacks: Callback<T>[]; public constructor(callbacks: Callback<T>[]) { this.callbacks = callbacks; ...

typescriptclassgenericsextends

Is there a way to modify this within a constructor once the item has been chosen from a randomly generated array?

If I use the following code: card01.state = 3; console.log(card01); I can modify the state, but I'm interested in updating the state of the card chosen by the random function. class Item { constructor(name, state) { this.name = name; thi ...

javascriptarraysobjectrandomconstructor

I want to display a background color using this ng-template

enter image description hereMy code includes an ng-template that uses ngFor to generate internal HTML tags without the ability to add CSS properties. <ng-template *ngFor="let c of colors" contextMenuItem let-item (execute)="change_task_color($event.ite ...

javascriptjqueryangularangular6ng-template

Tips for adding an image to HTML after clicking on a div element

Is there a way to prompt users to upload an image by clicking on a <div> that contains an <img>? The current code I have is: <div class="container"> <img src="..." alt="Profile image" class="profileImg"> ...

html

dealing with errors coming from a child asynchronous callback function

function main(){ try { subCallbackFunction(1,(err,res) =>{ if(err){ throw Error(err); } }) } catch (e) { /// Handling error from subCallbackFunction inside this catch block ////// conso ...

javascriptnode.js

The container is not showing the JSTree as expected

My current project in JavaScript involves integrating a JSTree structure, but I'm encountering an issue where the tree is not showing up or rendering within its specified parent container. Below is the snippet of code I have been using to attempt to d ...

javascripthtmljstree

Drop-down options disappear upon refreshing the page

Code snippet for sending value to server using AJAX in JavaScript In my script, the status value may vary for each vulnerable name. When selecting a status option and storing it in the database through AJAX, the selected value is lost after refreshing th ...

javascriptphphtmlajaxdropdown

Receive regular updates every week for an entire month using Javascript

How can I calculate the number of check-ins per week in a month using Javascript? I have been unable to find relevant code for this task. Specifically, I am interested in determining the total count of user check-ins on a weekly basis. For example, if a u ...

javascriptnode.jstypescript

Sync Data Automatically from SQL Database

For the past two months, I've been researching how to achieve an effect similar to the auto-updating sales on the page. So far, I haven't had any luck. I do have a PHP file that counts the number of results in a database and displays them as a n ...

phpjavascriptjqueryhtmlajax

Creating a Vue application without the use of vue-cli and instead running it on an express

Vue has an interesting feature where vue-cli is not necessary for running it without a server. Initially, I thought otherwise. The Vue installation page at https://v2.vuejs.org/v2/guide/installation.html mentions using a script under CDN. <script src=&q ...

javascriptnode.jsexpressvue.jsvuejs2

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

javascriptajaxhtml

Troubleshooting Issue with JQuery Date Picker: Date Not Valid

Encountering an issue when using the date from JQuery DatePicker in an SQL Statement variable, resulting in an error of invalid datetime string. Even after attempting to format it with DateTime.Parse or Convert.DateTime. JQuery DatePicker <script> ...

javascriptc#jqueryasp.net

"Learn to easily create a button within a table using the powerful functionality of the dataTable

I need to add a button to each row in a table. I managed to achieve this with the code below, but there's a problem - every time I switch between pages, the button keeps getting added again and again. It seems like the button is generated multiple tim ...

javascriptjquerydatatable

What is causing the list-sorter to malfunction?

This website crashes when executed: <head> <script> var numbersList = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 19, 17, 15, 13, 11, 9, 7, 5, 3, 1]; var orderedList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, ...

javascriptalgorithmsortingcrashlogic

Tips for embedding a script into an HTML document

I've been experimenting with tinymce npm and following their guide, but I've hit a roadblock. Including this line of code in the <head> of your HTML page is crucial: <script src="/path/to/tinymce.min.js"></script>. So, I place ...

javascriptnpmtinymce

Refine your search by focusing on select characteristics of an item

Is there a way to filter tasks in a table using only specific attributes provided in the table? Currently, when I enter a search term in the search bar, tasks are displayed even if they have attributes that match the input but are not displayed in the na ...

javascripthtmlangularjs