How to change background color with toggle button in React? - reactjs

Question

In Weather project, I have toggle button for Day/Night mode. When toggled it should change background color but it fills the entire page above the components which isn't desirable. Is there any appropriate solution?
Below is the reference
DayNightMode.js
const DayNightMode = () => {
return (
<div className="switch-box">
<div className="switch">
<label for="toggle">
<input id="toggle" className="toggle-switch" type="checkbox" />
<div className="sun-moon">
<div className="dots">
</div>
</div>
<div className="background">
<div className="stars1"></div>
<div className="stars2"></div>
</div>
<div className="fill"></div>
</label>
</div>
</div>
);
};
export default DayNightMode;
DayNightMode.css
* {
box-sizing: border-box;
}
.switch-box {
margin-left: 30%;
/* margin-top: -5%; */
}
.container {
/* height: calc(100% - 2.5rem); */
/* background: #f4f4f4; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center;*/
}
.switch {
position: relative;
/* overflow: hidden; */
width: 8.6rem;
/* height: 2rem; */
}
.switch input {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.switch label {
cursor: pointer;
}
.background {
z-index: 1;
position: absolute;
width: 6.5rem;
height: 1.8rem;
border-radius: 2.5rem;
border: 0.25rem solid #202020;
background: linear-gradient(to right, #484848 0%, #202020 100%);
transition: all 0.3s;
margin-top: -22px;
opacity: 0.8;
}
.fill {
/* background: #484848;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; */
}
.switch input:checked ~ .fill {
background: #e9f8fd;
}
/* .fill {
position: fixed;
top: 0;
right: 0;
bottom: 2rem;
left: 0;
background: #484848;
transition: 0.75s all ease;
} */
/* .switch input:checked ~ .fill {
background: #E9F8FD;
} */
/* Stars */
.stars1,
.stars2 {
position: absolute;
height: 0.3rem;
width: 0.3rem;
background: #ffffff;
border-radius: 50%;
transition: 0.3s all ease;
}
.stars1 {
top: 2px;
right: 20px;
}
.stars2 {
top: 20px;
right: 35px;
}
.stars1:after,
.stars1:before,
.stars2:after,
.stars2:before {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #ffffff;
border-radius: 50%;
transition: 0.2s all ease;
}
.stars1:after {
top: 2px;
right: 20px;
}
.stars1:before {
top: 12px;
right: -12px;
}
.stars2:after {
top: -20px;
right: -20px;
}
.stars2:before {
top: -24px;
right: -30px;
}
.sun-moon {
z-index: 2;
position: absolute;
left: 0;
display: inline-block;
height: 1.5rem;
width: 1.5rem;
margin: 0.12rem;
background: #fffdf2;
border-radius: 50%;
transition: all 0.5s ease;
margin-top: -20.5px;
/* Default to Moon */
border: 0.2rem solid #dee2c6;
}
.sun-moon .dots {
position: absolute;
top: 0.5px;
left: 42px;
height: 0.2rem;
width: 0.2rem;
background: #efeedb;
border: 0.25rem solid #dee2c6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after,
.sun-moon .dots:before {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
background: #efeedb;
border: 0.25rem solid #dee2c6;
border-radius: 50%;
transition: 0.4s all ease;
}
.sun-moon .dots:after {
top: -8px;
left: -26px;
}
.sun-moon .dots:before {
top: 10px;
left: -10px;
}
/* Transition to Sun */
.switch input:checked ~ .sun-moon {
left: calc(100% - 4rem);
background: #f5ec59;
border-color: #e7c65c;
transform: rotate(-25deg);
}
.switch input:checked ~ .sun-moon .dots,
.switch input:checked ~ .sun-moon .dots:after,
.switch input:checked ~ .sun-moon .dots:before {
background: #ffffff;
border-color: #ffffff;
}
.switch input:checked ~ .sun-moon .dots {
height: 1.2rem;
width: 1.2rem;
top: -10px;
left: -20px;
transform: rotate(25deg);
}
.switch input:checked ~ .sun-moon .dots:after {
height: 0.65rem;
width: 0.65rem;
top: 2px;
left: -12px;
}
.switch input:checked ~ .sun-moon .dots:before {
height: 0.4rem;
width: 0.4rem;
top: 6px;
left: 14px;
}
.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
opacity: 0;
transform: translateY(2rem);
}
.switch input:checked ~ .background {
border: 0.25rem solid #78c1d5;
background: linear-gradient(to right, #78c1d5 0%, #bbe7f5 100%);
}
Form.js (DayNight Toggle button defined here)
import React from 'react'
import { ArrowTooltip } from './ArrowTooltip'
import gps from '../images/gps.png'
import 'react-toastify/dist/ReactToastify.css';
import Autosuggest from 'react-autosuggest';
import { highlight } from './Helper'
import cities from 'cities.json';
import Button from 'react-bootstrap/Button'
import './Form.css';
import { MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardHeader,
MDBBtn} from 'mdbreact'
import DayNightMode from './DayNightMode';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
suggestions: [],
newsValue: '',
weatherValue: ''
};
}
onChange = (event, { newValue}) => {
this.setState({
value: newValue,
});
};
render(){
return (
<div>
<MDBContainer style={{height: '480px', marginTop: '25px'}}>
<MDBRow>
<MDBCol>
<MDBCard style={sectionStyle}></MDBCard>
<MDBCard style={{zIndex:'1', background: 'none'}}>
<MDBCardBody>
{/* Here Toggle button is defined */}
<DayNightMode/>
<form>
<div width="100%">
<ArrowTooltip title="Track Location" placement="top">
<span style={{width:'10%', display:'inline-block', cursor:'pointer'}}
onClick={this.props.fetchWeather}>
<img src={gps} width="25px" height="25px" />
</span>
</ArrowTooltip>
</div>
<br/>
<div className="text-center mt-4">
<Button variant="info"
className="mb-3 btn-block"
type="submit"
value={inputProps.value}
onClick={e => this.onClick(e)}
style={{background: '#e0f7fa', opacity:'0.6',
borderRadius: '10px',fontFamily: 'Josefin Sans',
boxShadow: '0 8px 6px -6px black'}}
>Search Weather</Button>
</div>
</form>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
)
}
}
export default Form;
App.js (Parent File)
import React from "react";
import "./App.css";
import Form from "./components/Form";
import { ToastContainer, toast, Bounce } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import WeatherAndNews from "./components/WeatherAndNews";
import moment from "moment-timezone";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
newsValue: "",
weatherValue: ""
};
}
handleNews = async (data) => {
this.setState({
newsValue: data
});
};
handleWeather = async (data) => {
this.setState({
weatherValue: data
});
};
render() {
return (
<React.Fragment>
<div className="main-container">
<div className="form-container">
<Form
newsValue={this.state.newsValue}
weatherValue={this.state.weatherValue}
/>
<ToastContainer transition={Bounce} className="toast-background" />
</div>
<div className="body-container">
<WeatherAndNews />
</div>
</div>
</React.Fragment>
);
}
}
export default App;
My intention is that background color of the page should be changed on toggle
Following is the Codesandbox link https://codesandbox.io/s/2huux

Answer 1

Steps you need to do to achieve this:
Create a variable named 'isDayMode' in App.js component
Create a function with the name 'handleDayNightToggle' in App.js which can update that value to true or false on the basis of the checkbox selected
Pass the reference of the function as props to the Form component
Again pass the reference of function 'handleDayNightToggle' from Form to DayNightMode component
There create an onClick function for the checkbox and make it call the 'handleDayNightToggle' passed as props. So any time the checkbox is clicked this function calls the 'handleDayNightToggle' of the App component.
Finally use the flag 'isDayMode' in App component to understand whether the day is selected or night and accordingly change the classes to update background color.
Updated your project with the above steps, take a look into it - https://codesandbox.io/s/async-cache-r1poy