Electron does not prioritize the @css prefers-color-scheme option

I recently completed an Electron project and decided to incorporate dark mode support into it. However, for some reason, the dark mode feature is not functioning properly.

Below you will find the dark.css styling that I have included in every page:

@media (prefers-color-scheme: dark) {
body, .full-screen, #code {
  transition-duration: 500ms;
  background: #444 !important;
  color: #e4e4e4 !important;
}
.title-bar {
  background: rgb(58, 58, 58) !important;
}
}

I am puzzled as to why this issue is occurring. I have read that I can utilize systemPreferences.isDarkMode(), but that seems to only work for the main process, whereas I would like the dark mode to be applied in the frontend and automatically update.

Any assistance with resolving this matter would be greatly appreciated.

javascriptcssnode.jsnpmelectron

Answer №1

After some troubleshooting, I ended up having to reinstall NPM and electron. Additionally, running the command 

npm config set ignore-scripts false
proved to be the key in resolving the issue.

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

Border provides spacing within a div using the box-sizing property set to border-box

I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...

htmlcsscss-position

"Allow users to select only the year with Material-UI DatePicker

Is there a method to display solely years using the Material UI DatePicker component in React? I would like to enable users to choose only the year, excluding months or days. Please note that neither the openToYearSelection option nor the autoOk feature ...

javascriptreactjsdatepickermaterial-ui

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

pythonhtmlcssselenium

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

css

Struggling to deal with conditionals in Express

Just starting with Express and I've come across the following code: const { response } = require("express"); const express = require("express"); const app = express(); app.get("/api/products/:id", function (req, res) { ...

javascriptnode.jsexpressconditional-statements

Warning in Vue 3: Production is being disrupted by "tags with side effects"

After recently upgrading from Vue 2 to Vue 3, I encountered a problem in my app where certain parts show a warning in development mode: [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client ...

javascriptvue.jsvuejs3

Embeddable video player failing to adjust size properly within parent div

I've been tackling the challenge of making iframes responsive within a div element, but I've hit a roadblock. While there are plenty of solutions available online, none seem to work seamlessly when dealing with YouTube video embeds. Currently, m ...

cssiframeresponsive-designskeleton-css-boilerplate

There are multiple ways to extract a value from Python code and assign it to a JavaScript variable in a JS file

I am currently working on developing the frontend for a voice bot using JavaScript, while the backend is written in Python. if hi == 0: talk('hello iam kavi') print('hello iam kavi Voice assistant') talk('How are you bu ...

javascriptpythonreactjsreact-native

Is it possible to call a REST API in Javascript by passing the username and password as

I have been attempting to use Javascript to call the AwaazDe REST API with a specific username and password, but I'm encountering issues. Below is my code: function authenticateUser(user, password) { var token = user + ":" + password; ...

javascriptphphtmlrest

What's the deal with only extracting package.json in a custom registry system?

To ensure security, I must establish a custom npm registry. I set up a local http registry (nginx) using this command: npm config set @example:registry=http://localhost/ Next, I transfer two files to nginx: . .. @example%2fmodel model.tgz The contents o ...

npmnpm-installnpm-registry

Function triggered twice upon checkbox being selected

Below is the code snippet I am using: $("#cc1").unbind('click').click(function(e) { //somefunction }); This code works perfectly fine for executing a function after clicking the cc1 button. However, when I use the following code: $("#cc1" ...

javascriptjquerybuttoncheckbox

The "useState" React Hook is restricted from being used in a class component. To utilize React Hooks, they can only be invoked within a React function component or a custom React Hook function

I am relatively new to React frontend development and I am currently working on adding a temporary drawer to my Material-UI NavBar. Here is the code snippet where I added the drawer: class Navbar extends Component { render() { const { authentic ...

javascriptreactjsmaterial-ui

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...

htmlcssbootstrap-4css-selectors

How to dynamically reset an ng-form in Angular

After reviewing the following resources: Reset Form in AngularJS and Angular clear subform data and reset validation, I am attempting to develop a flexible form reset/clear function that would resemble the code snippet below: $scope.clearSection = functio ...

javascriptangularjs

The ES6 method of binding click handlers with parameters in React

After reading numerous articles on the usage of () => {} syntax, binding in the constructor, and binding in the props, I have come to understand that binding this can be performance-intensive. Furthermore, automatic binding with arrow functions incurs a ...

javascriptreactjsecmascript-6

Performing multiplication and calculating the final sum of an array object in Node JS

I am looking to calculate the total based on an array of objects sum of each row = sum of costs * quantity total = sum of (sum of each row) Below is the object array that I am working with const newArray = [ { 'LOA Qty': '2000', ' ...

javascriptnode.jsreactjs

Image optimization using media queries

In the scenario where the maximum width is 1220px, I want to change the main display to column. This is what I have implemented: @media (max-width: 1220px) { .main { flex-direction: column; } However, when the width reaches 1220px, the image disap ...

htmlcssimagemedia-queries

I'm puzzled as to why I keep receiving this deprecated warning and why I'm unable to make changes to my collection in MongoDB when using Node.js

Currently delving into MongoDB with NodeJS const MongoClient=require('mongodb').MongoClient; const assert=require('assert'); const dbupper=require('./operations'); const url='mongodb://localhost:27017'; const dbname ...

node.jsmongodb

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

https://i.stack.imgur.com/0YV9m.png Background In my current project, I am utilizing the Datagrid component from MUI [email protected]. I have disabled the column menu to display the toolbar at the top of the table instead of on individual columns. ...

javascriptreactjsmaterial-ui

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

cssangulartypescriptsass