I presume that the problem I'm having is just about something that I don't understand the mechanics of. As a test I've been trying to have a light and dark mode. I've added bulma
and bulma-prefers-dark
which work fine on their own. The colour scheme works as intended. I've now wanted to try to change the colour of the background of a button depending on what colour scheme I'm on. But the issue is that non of them change or both of them at the same time in both colour schemes. These are some of the things I've tried without any success.
$red: #F00;
$green: #0F0;
// changes both to red
$button-background-color: $red;
$button-background-color-dark: $green;
// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
$button-background-color: $green;
// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
.button
background-color: $green;
// non of them change colour (I only expect the dark one to change here)
@media (prefers-color-scheme: dark)
$button-background-color-dark: $green;
// no change to either of them
.button
background-color: $red
@media (prefers-color-scheme: dark)
background-color: $green;
@import '../node_modules/bulma/bulma.sass';
@import '../node_modules/bulma-prefers-dark/bulma-prefers-dark.sass';
import React from "react";
import './App.sass'
function App() {
return (
<div>
<button type="button" className="button ">Save</button>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();