React dark mode implementation

dark_mode_react.js

import React, {Component} from 'react';
import './App.css';
import SizeContainer from './components/SizeContainer.js';
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux'; 
const App = (props) => {     
   return (      
      <div className={!props.mode ? "App" : 'night'}>        
         <h1 style={{height: 50, marginBottom: 0, padding: 5}}>
           React Editor
         </h1>        
         <SizeContainer mode={props.mode}/>      
      </div>    
   );
} 
const mapStateToProps = (state) => {  
   return {      
      mode: state.mode  
   };
} 
export default withRouter(connect(mapStateToProps) (App));


export default function rootReducer(state={mode: false}, action){
   switch(action.type){      
      case "CHANGE_MODE":      
         var mode = !state.mode        
         return {...state, mode}      
      default:        
         return state    
    }   
}

export function changeMode(){  
   return {    
      type: "CHANGE_MODE"  
   }
}


import React from 'react';
import {FaFileCode, FaLightbulb} from "react-icons/fa";
import {withRouter} from 'react-router-dom';
import { connect } from 'react-redux';
import { changeMode } from './../actions'
const Buttons  = (props) => {
    var {mode, changeMode} = props;
    return(
      <div className='buttonsContainer' >
         <div>
           <div className='buttons' onClick={changeMode}>
              <FaLightbulb/>
              <span className="tooltiptext">
                 {mode ? "Day Mode" : "Night Mode"}
              </span>
            </div>
            <div className='buttons'>
               <FaFileCode/>
               <span className="tooltiptext">
                   Download Code
                </span>
            </div>
          </div>
       </div>
    )
};
export default withRouter(connect(null, {changeMode}) (Buttons))


.App {  
   text-align: center;  
   height: 100%; 
   transition: background-color 0.3s, color 0.3s;
}


.night {
  text-align: center;
  height: 100%;
  width: 100%;  
  background-color: black;
  transition: background-color 0.3s, color 0.3s;
}

.night h1, .night h2, .night div, .night textarea{
  background-color: black;
  color: white;
  transition: background-color 0.3s, color 0.3s;
}



@media (prefers-color-scheme: dark) {
      /*YOUR DARK STYLE HERE*/
}