There are many ways you can implement a light and dark mode toggle in React. I prefer using GSAP (a JavaScript animation library), because:
\nNow, let’s take a look at what we are going to build.
\nThis is how the page looks in light mode.
\nWhen you click on the toggle button, the dark mode is activated.
\nThe sun and moon icons inside the toggle button are from Font-Awesome.
\nAll right, let’s start building the project.
\nCreate a folder called mode, open the folder in VS Code and create a React project using the following command:
PS C:\\Users\\Delhivery\\Desktop\\mode> npx create-react-app .Let’s install gsap, which is available as a package from npm.
PS C:\\Users\\Delhivery\\Desktop\\mode> npm i gsapWe will use Font Awesome icons using Font Awesome’s official React component.
\nWe need to install the following three packages:
\nPS C:\\Users\\Delhivery\\Desktop\\mode> npm i --save @fortawesome/fontawesome-svg-core\n@fortawesome/free-solid-svg-icons @fortawesome/react-fontawesomeYou can find more about using Font Awesome icons in React at the following link:
\n\nWe have installed our required dependencies. Next, we will create the toggle button.
\nimport React from "react"\nimport { FontAwesomeIcon } from "@fortawesome/react-fontawesome"\nimport { faSun } from "@fortawesome/free-solid-svg-icons"\nimport { faMoon } from "@fortawesome/free-solid-svg-icons"\n\nconst App = () => {\n return (\n <div className="wrapper">\n <div className="toggle">\n <div>\n <FontAwesomeIcon icon={faSun} className="sun" />\n </div>\n <div>\n <FontAwesomeIcon icon={faMoon} className="moon" />\n </div>\n <div className="circle"></div>\n </div>\n\n <section className="intro">\n <h1 className="intro-header">Accessibility</h1>\n <p className="intro-text">\n Accessibility means developing content to be as accessible as possible\n no matter an individuals's physical and cognitive abilities and no\n matter how they access the web.\n </p>\n </section>\n </div>\n )\n}\n\nexport default App/*_ || Global styling _*/\n\n- {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n\nhtml {\nfont-size: 62.5%;\nfont-family: sans-serif;\n}\n\n/*_ End of global styling _*/\n\n/*_ || Toggle button styling _*/\n\n.toggle {\nwidth: 4rem;\nheight: 2rem;\nmargin: 4rem;\nbackground-color: gray;\nborder-radius: 3rem;\nposition: relative;\ncursor: pointer;\ndisplay: flex;\njustify-content: space-around;\nalign-items: center;\n}\n\n.sun,\n.moon {\nfont-size: 1.2rem;\n}\n\n.sun {\ncolor: white;\n}\n\n.circle {\nwidth: 1.4rem;\nheight: 1.4rem;\nbackground-color: lightgray;\nborder-radius: 50%;\nposition: absolute;\ntop: 50%;\nleft: 5%;\ntransform: translateY(-50%);\nbox-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);\n}\n\n/*_ End of toggle button styling _*/\n\n/*_ || Text styling _*/\n\n.intro {\nwidth: clamp(20rem, 50vw, 80rem);\nmargin: auto;\n}\n\n.intro h1 {\nfont-size: clamp(2rem, 3vw, 6rem);\nmargin-bottom: 2rem;\n}\n\n.intro p {\nfont-size: clamp(1.3rem, 1.2vw, 2rem);\nletter-spacing: 0.02rem;\nline-height: 2.5rem;\ncolor: #353935;\n}\n\n/*_ End of text styling _*/Start the application using npm start and we have the following result:
To implement the toggle functionality, we will go through the following steps:
\nWe will add an onClick handler to the div with the class name of toggle. In the onClick handler function, we will use JavaScript ternary operator to play the animation based on a condition: play the animation if it is reversed and reverse the animation if otherwise. Note that the animation will be in a reversed and paused state at the start.
When we play the animation, we will simultaneously animate three things:
\nAdd the highlighted code snippets in the App.js file.
import React, { useRef, useEffect } from "react"\nimport { FontAwesomeIcon } from "@fortawesome/react-fontawesome"\nimport { faSun } from "@fortawesome/free-solid-svg-icons"\nimport { faMoon } from "@fortawesome/free-solid-svg-icons"\nimport { gsap } from "gsap"\n\nconst animation = gsap.timeline({\n paused: true,\n reversed: true,\n ease: "expo.inOut",\n duration: 0.01,\n})\n\nconst App = () => {\n const wrapperRef = useRef()\n\n useEffect(() => {\n const circle = wrapperRef.current.querySelector(".circle")\n const introHeader = wrapperRef.current.querySelector(".intro-header")\n const introText = wrapperRef.current.querySelector(".intro-text")\n\n animation\n .to(circle, { x: "2rem" })\n .to(document.body, { backgroundColor: "#212121" }, "<")\n .to(introHeader, { color: "gray" }, "<")\n .to(introText, { color: "gainsboro" }, "<")\n })\n\n const circleClickHandler = () => {\n animation.reversed() ? animation.play() : animation.reverse()\n }\n\n return (\n <div className="wrapper" ref={wrapperRef}>\n <div className="toggle" onClick={circleClickHandler}>\n <div>\n <FontAwesomeIcon icon={faSun} className="sun" />\n </div>\n <div>\n <FontAwesomeIcon icon={faMoon} className="moon" />\n </div>\n <div className="circle"></div>\n </div>\n\n <section className="intro">\n <h1 className="intro-header">Accessibility</h1>\n <p className="intro-text">\n Accessibility means developing content to be as accessible as possible\n no matter an individuals's physical and cognitive abilities and no\n matter how they access the web.\n </p>\n </section>\n </div>\n )\n}\n\nexport default AppThat’s all we need to do. Now, if you click on the toggle button, dark mode gets activated. And if you click on the toggle button again, we go back to light mode.
\n","frontmatter":{"title":"Create a Light & Dark Mode Toggle in React Using GSAP","date":"2021-06-20"}}},"pageContext":{"slug":"/create-a-light-and-dark-mode-toggle-in-react-using-gsap/","prev":{"fields":{"slug":"/learn-typescript-functions/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/learn-typescript-types/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}