Issue rendering dark mode - ReactJS - reactjs

Question

I'm new and trying a project to make a switch that toggles between two themes;
Here is what I have so far and I'm struggling to understand why it's not toggling between my themes.
theme.js
import { createContext } from "react";
export const themes = {
dark: "dark-mode",
light: "white-mode",
};
export const ThemeContext = createContext({
theme: themes.dark,
changeTheme: () => {},
});
themeWrapper.js
import React, { useState, useEffect } from 'react';
import { ThemeContext, themes } from './theme.js';
import "./App.css"
export default function ThemeContextWrapper(props) {
const [theme, setTheme] = useState(themes.dark);
function changeTheme(theme) {
setTheme(theme);
}
useEffect(() => {
switch (theme) {
case themes.light:
document.body.classList.add('white-mode');
break;
case themes.dark:
default:
document.body.classList.remove('white-mode');
break;
}
}, [theme]);
return (
<ThemeContext.Provider value={{ theme: theme, changeTheme: changeTheme }}>
{props.children}
</ThemeContext.Provider>
);
}
So I've got a wrapper to re-render the app when dark mode is toggled, and two themes that are being exported.
App.css
.white-mode {
font: #333;
background: #eee;
link: cornflowerblue;
}
.dark-mode {
font: #eee;
background: rgb(41, 41, 41);
link: lightblue;
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ThemeContextWrapper from '.themeWrapper';
ReactDOM.render(
<ThemeContextWrapper>
<React.StrictMode>
<App />
</React.StrictMode>{' '}
</ThemeContextWrapper>,
document.getElementById('root'),
);
So now in App.js I have the button
import './App.css';
import { Button, Container, InputGroup } from 'reactstrap';
import { ThemeContext, themes } from '.theme';
import React from 'react';
function App() {
const [darkMode, setDarkMode] = React.useState(true);
return (
<div className="App">
<header className="App-header">
<h1 className="text-warning">Dark/Light mode</h1>
<InputGroup>
<ThemeContext.Consumer>
{({ changeTheme }) => (
<Button
color="link"
onClick={() => {
setDarkMode(!darkMode);
changeTheme(darkMode ? themes.light : themes.dark);
}}
>
<span className="d-lg-none d-md-block">Toggle</span>
</Button>
)}
</ThemeContext.Consumer>
</InputGroup> */}
</header>
</div>
);
}
export default App;
But this button doesn't appear to do anything, where have I gone wrong?