Switching theme feature

src/App.js

@@ -1,13 +1,17 @@
 import React, { useState } from "react";
 
-import OpenSettingsIcon from "./assets/open-settings-icon.png";
+import OpenSettingsIconDark from "./assets/open-settings-icon-dark-theme.png";
+import OpenSettingsIconLight from "./assets/open-settings-icon-light-theme.png";
 
 import Settings from "./components/Settings/Settings";
 import Buttons from "./components/Buttons/Buttons";
 import Charts from "./components/Charts/Charts";
 import Donwload from "./components/Donwload/Donwload";
+import ThemeChanger from "./components/ThemeChanger/ThemeChanger";
 
 function App() {
+  const [theme, setTheme] = useState(true);
+
   const [labels, setLabels] = useState(["label1", "label2", "label3"]);
   const [values, setValues] = useState([100, 200, 300]);
 
@@ -27,32 +31,48 @@ function App() {
     setSettingsOpen(!settingsOpen);
   }
 
-  function changeValue(e) {
+  function changeRadioValue(e) {
     setRadioValue(e.target.value);
   }
 
   return (
-    <div className="content">
-      <div className="chart-container">
-        {/* ValueState - which radio button is clicked */}
-        <Charts valueState={radioValue} data={data} />
-      </div>
-      <Settings
-        open={settingsOpen}
-        changeSettingsOpen={changeSettingsOpen}
-        data={data}
-        setLabels={setLabels}
-        setValues={setValues}
-      />
-      <img
-        src={OpenSettingsIcon}
-        alt="open settings icon"
-        className="settings-open-button"
-        onClick={changeSettingsOpen}
-      />
-      <Donwload />
-      <div className="choose-chart-type">
-        <Buttons changeValue={changeValue} valueState={radioValue} />
+    <div className={`container-${theme ? "dark" : "light"}`}>
+      <ThemeChanger setTheme={setTheme} theme={theme} />
+      <div className={`content-${theme ? "dark" : "light"}`}>
+        <div className={`chart-container-${theme ? "dark" : "light"}`}>
+          {/* ValueState - which radio button is clicked */}
+          <Charts valueState={radioValue} data={data} />
+        </div>
+        <Settings
+          open={settingsOpen}
+          changeSettingsOpen={changeSettingsOpen}
+          data={data}
+          setLabels={setLabels}
+          setValues={setValues}
+          theme={theme}
+        />
+        {theme ? (
+          <img
+            src={OpenSettingsIconDark}
+            alt="open settings icon"
+            className="settings-open-button"
+            onClick={changeSettingsOpen}
+          />
+        ) : (
+          <img
+            src={OpenSettingsIconLight}
+            alt="open settings icon"
+            className="settings-open-button"
+            onClick={changeSettingsOpen}
+          />
+        )}
+        <Donwload theme={theme} />
+        <div className="choose-chart-type">
+          <Buttons
+            changeRadioValue={changeRadioValue}
+            valueState={radioValue}
+          />
+        </div>
       </div>
     </div>
   );

src/components/Buttons/Buttons.jsx

@@ -5,49 +5,49 @@ function Buttons(props) {
     <>
       {/* The name of the chart must begin with a small letter (name i mean chart type) */}
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="pie"
         value="1"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="bar"
         value="2"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="doughnut"
         value="3"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="line"
         value="4"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="bubble"
         value="5"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="polararea"
         value="6"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="radar"
         value="7"
       />
       <RadioButton
-        changeValue={props.changeValue}
+        changeRadioValue={props.changeRadioValue}
         valueState={props.valueState}
         name="scatter"
         value="8"

src/components/Buttons/RadioButton/RadioButton.jsx

@@ -7,7 +7,7 @@ function RadioButton(props) {
         id={`radio-${props.name}`}
         value={props.value}
         checked={props.valueState === props.value ? true : false}
-        onChange={props.changeValue}
+        onChange={props.changeRadioValue}
       />
       <label htmlFor={`radio-${props.name}`}>{props.name}</label>
     </>

src/components/Donwload/Donwload.jsx

@@ -1,9 +1,11 @@
 import html2canvas from "html2canvas";
 import DonwloadIcon from "../../assets/donwload-icon.png";
 
-function Donwload() {
+function Donwload(props) {
   function capture() {
-    const captureElem = document.querySelector(".chart-container");
+    const captureElem = document.querySelector(
+      `.chart-container-${props.theme ? "dark" : "light"}`
+    );
     html2canvas(captureElem)
       .then((canvas) => {
         canvas.style.display = "none";

src/components/Settings/Settings.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import CloseSettingsIcon from "../../assets/close-settings-icon.png";
+import CloseSettingsIconDark from "../../assets/close-settings-icon-dark-theme.png";
+import CloseSettingsIconLight from "../../assets/close-settings-icon-light-theme.png";
 
 import LabelsForm from "./LabelsForm/LabelsForm";
 import ValuesForm from "./ValuesForm/ValuesForm";
@@ -9,14 +10,23 @@ function Settings(props) {
   return (
     <div className={`chart-settings__${props.open ? "open" : "hidden"}`}>
       <div className="settings-content">
-        <img
-          src={CloseSettingsIcon}
-          alt="close settings icon"
-          className="settings-close-button"
-          onClick={props.changeSettingsOpen}
-        />
+        {props.theme ? (
+          <img
+            src={CloseSettingsIconDark}
+            alt="close settings icon"
+            className="settings-close-button"
+            onClick={props.changeSettingsOpen}
+          />
+        ) : (
+          <img
+            src={CloseSettingsIconLight}
+            alt="close settings icon"
+            className="settings-close-button"
+            onClick={props.changeSettingsOpen}
+          />
+        )}
         <LabelsForm setLabels={props.setLabels} />
-        <ValuesForm setValues = {props.setValues} />
+        <ValuesForm setValues={props.setValues} />
       </div>
     </div>
   );

src/components/ThemeChanger/ThemeChanger.jsx

@@ -0,0 +1,13 @@
+function ThemeChanger(props) {
+  function changeTheme() {
+    props.setTheme(!props.theme);
+  }
+  return (
+    <div className="theme-changer" onClick={changeTheme}>
+      <div
+        className={`theme-switcher theme-${props.theme ? "dark" : "light"}`}
+      ></div>
+    </div>
+  );
+}
+export default ThemeChanger;

src/index.scss

@@ -6,4 +6,5 @@
 // COMPONENTS
 @import './scss/components/Settings';
 @import './scss/components/Buttons';
-@import './scss/components/Donwload';
+@import './scss/components/Donwload';
+@import './scss/components/ThemeChanger';

src/scss/common/_base.scss

@@ -6,37 +6,36 @@
     "Lucida Sans", Arial, sans-serif;
 }
 
-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100svh;
+.container-dark {
+  @extend %container;
   background-color: black;
 }
 
+.container-light {
+  @extend %container;
+  background-color: white;
+}
+
 a {
   text-decoration: none;
 }
 
-.content {
-  position: relative;
-  width: 700px;
-  height: 400px;
+.content-dark {
+  @extend %content;
   background-color: black;
   box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
-  border-radius: 30px;
-  padding: 30px;
-  overflow: hidden;
-  .chart-container {
+  .chart-container-dark {
+    @extend %chart-container;
     background-color: #171717;
-    width: 100%;
-    height: 100%;
-    border-radius: 20px;
-    padding: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+  }
+}
+
+.content-light {
+  @extend %content;
+  background-color: #9e9e9e;
+  box-shadow: 0 0 10px 2px rgba(40, 40, 40, 0.3);
+  .chart-container-light {
+    @extend %chart-container;
+    background-color: white;
   }
 }