Setting colour of light and dark mode individually

[fabio-oesch]

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';

Additional Information: It's a blank react project that has only a button added.

import React from "react";
import './App.sass'

function App() {

  return (
    <div>
      <button type="button" className="button ">Save</button>
    </div>
  );
}

export default App;

and index.js

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();

[jloh]

Its been a long time since I've worked on this repo (I use Tailwind now unfortunately) however what happens if you move the imports above your code? At a guess my code that comes in is overriding the variable but I can't remember how SaaS variables work.

[fabio-oesch]

@jloh, thank you for your response. I've tried that as well but that didn't work either. I've since then switched over to material-ui. Maybe it might be interesting for other people who have the same question so I'll leave it open for the time being.