Невозможно динамически изменить цвет фона/цвет шрифта, используя функцию var () в теге тела (React/CSS) ⇐ CSS

[Anonymous]

Я очень новичок в кодировании, и я пытаюсь включить функциональность Dark Mode для моего приложения. Однако, как написано на олово, функция var () в теге тега не работает, и я не уверен, почему.
import React, { useState } from 'react';
import ToggleDarkMode from './ToggleDarkMode';
import './index.css';

function App() {
const [darkMode, setDarkMode] = useState(false)

const toggleDarkMode = () => {
setDarkMode(!darkMode)
}

return (


Hello
world

);
}

export default App;

export default function ToggleDarkMode({darkMode, toggleDarkMode}) {

return (


{darkMode ? '' : ''}

)
}
< /code>
Это все css, есть: < /p>
:root {
--bg-color-light: #fff;
--font-color-light: #424242;
--bg-color-dark: #161625;
--font-color-dark: #e1e1ff;
}

body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, Arial, Helvetica, sans-serif;
background-color: var(--bg-color);
color: var(--font-color)
}

[data-theme='light'] {
--bg-color: var(--bg-color-light);
--font-color: var(--font-color-light)
}

[data-theme='dark'] {
--bg-color: var(--bg-color-dark);
--font-color: var(--font-color-dark)
}
< /code>
Цвета в теле изменятся, если я просто удалю var () и вручную введет цвет. Это также работает динамически, если я изменю тег тела на селектор *. Я не совсем уверен, что происходит. Любая помощь будет очень оценена.

Подробнее здесь: https://stackoverflow.com/questions/779 ... tion-withi