feat: added changes to introduce darkmode feature

package.json

@@ -40,9 +40,12 @@
     "gsap": "^3.4.0",
     "prismjs": "^1.25.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^6.1.0"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@mui/material": "5.14.14"
   },
   "devDependencies": {
     "babel-jest": "26.3.0",

src/components/DarkModeToggle.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { styled, ThemeProvider, createTheme } from "@mui/material/styles";
+import Switch from "@mui/material/Switch";
+
+const ThemedSwitch = styled(Switch)(({ theme }) => ({
+  width: 62,
+  height: 34,
+  padding: 7,
+  "& .MuiSwitch-switchBase": {
+    margin: 1,
+    padding: 0,
+    transform: "translateX(6px)",
+    "&.Mui-checked": {
+      color: "#fff",
+      transform: "translateX(22px)",
+      "& .MuiSwitch-thumb:before": {
+        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+          "#fff"
+        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`
+      },
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: "#CCCCCC"
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    backgroundColor: theme.palette.mode === "dark" ? "#9420B9" : "#DAB409",
+    width: 32,
+    height: 32,
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
+        "#fff"
+      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`
+    }
+  },
+  "& .MuiSwitch-track": {
+    opacity: 1,
+    backgroundColor: "#E6E888",
+    borderRadius: 20 / 2
+  }
+}));
+
+
+
+
+export default function CustomizedSwitches(props) {
+
+    const {setDarkMode, darkMode} = props;
+    const toggleDarkMode = () => {
+        setDarkMode(!darkMode);
+    };
+    const storedDarkMode = localStorage.getItem('darkMode') === 'true';
+
+    const getTheme = (darkMode) => {
+      return createTheme({
+        palette: {
+          mode: darkMode ? "dark" : "light",
+          primary: {
+            main: "#1976D2",
+          },
+          secondary: {
+            main: "#E91E63",
+          },
+        }
+      });
+    };
+
+    const theme = getTheme(darkMode);
+
+    return (
+      <ThemeProvider theme={theme}>
+        <div>
+            <ThemedSwitch sx={{ m: 1 }} defaultChecked={storedDarkMode} onClick={toggleDarkMode}/>
+        </div>
+      </ThemeProvider>
+    );
+}

src/components/addons.jsx

@@ -343,8 +343,8 @@ const Addons = (props) => {
   };
 
   return (
-    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
+    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10 add-on">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Add-ons</div>
       <AddonsItem
         inputId="visitors-count"
         inputChecked={data.visitorsBadge}

src/components/donate.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 const Donate = () => (
   <>
-    <div className="text-center text-4xl my-2">
+    <div className="text-center text-4xl my-2 headings">
       Support&nbsp;
       <span role="img" aria-label="praying hand emoji">
         🙏
       </span>
     </div>
-    <div className="flex flex-col sm:flex-row items-start justify-between">
+    <div className="flex flex-col sm:flex-row items-start justify-between headings">
       <div className="w-full sm:w-2/3">
         <div className="text-2xl mb-2">Are you using the tool and happy with it to create your GitHub Profile?</div>
         <div className="text-lg">Your kind support keeps open-source tools like this free for others.</div>

src/components/footer.jsx

@@ -5,7 +5,7 @@ import logo from '../images/mdg.png';
 import discord from '../images/Discord-Logo.png';
 
 const Footer = () => (
-  <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
+  <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2 footer">
     <div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
       <div className="sm:ml-0 sm:mr-6 order-last sm:order-none flex">
         <h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">

src/components/header.jsx

@@ -7,6 +7,7 @@ import { Link } from 'gatsby';
 import { act } from 'react-dom/test-utils';
 import links from '../constants/page-links';
 import logo from '../images/mdg.png';
+import DarkModeToggle from '../components/DarkModeToggle';
 
 const Header = (props) => {
   const { heading } = props;
@@ -53,37 +54,53 @@ const Header = (props) => {
   }, []);
 
   return (
-    <div className="shadow flex items-center justify-center flex-col mb-2 py-2">
-      <Link to={links.home}>
-        <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
-          <img src={logo} className="w-12 h-12" alt="github profile markdown generator logo" />
-          <div>{heading}</div>
-        </h1>
-      </Link>
-      <div className="flex justify-center items-center">
-        <a
-          href="https://github.com/rahuldkjain/github-profile-readme-generator"
-          aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
-          target="blank"
-          className="mr-2"
-        >
-          <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
-            Star this repo
-            <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
-          </div>
-        </a>
-        <a
-          href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
-          aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
-          target="blank"
-        >
-          <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2">
-            <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />
-            Fork on GitHub
-            <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
-          </div>
-        </a>
+    <div className="shadow flex items-center justify-center flex-col mb-2 py-2"
+      style={{
+        display: 'inline-table',
+        width: '100%'
+      }}
+    >
+      <div
+        style={{
+          display: 'inline-block',
+          marginLeft: '520px'
+        }}
+      >
+        <Link to={links.home}>
+          <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
+            <img src={logo} className="w-12 h-12" alt="github profile markdown generator logo" />
+            <div className = "heading">{heading}</div>
+          </h1>
+        </Link>
+        <div className="flex justify-center items-center">
+          <a
+            href="https://github.com/rahuldkjain/github-profile-readme-generator"
+            aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
+            target="blank"
+            className="mr-2"
+          >
+            <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2 buttons">
+              <StarIcon size={16} id="star-icon" className="px-1 w-6 star" />
+              Star this repo
+              <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
+            </div>
+          </a>
+          <a
+            href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
+            aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"
+            target="blank"
+          >
+            <div className="text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2 buttons">
+              <RepoForkedIcon size={16} id="fork-icon" className="px-1 w-6 fork" />
+              Fork on GitHub
+              <span className="github-count px-1 sm:px-2">{stats.forksCount}</span>
+            </div>
+
+          </a>
+        </div>
+      </div>
+      <div className='darkmode-toggle'>
+          <DarkModeToggle {...props}/>
       </div>
     </div>
   );

src/components/layout.jsx

@@ -1,19 +1,31 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Header from './header';
 import Footer from './footer';
+import '../pages/index.css';
 
-const Layout = ({ children }) => (
-  <div className="flex flex-col min-h-screen">
-    <header>
-      <Header heading="GitHub Profile README Generator" />
-    </header>
-    <main className="flex-grow">{children}</main>
-    <footer>
-      <Footer />
-    </footer>
-  </div>
-);
+const Layout = ({ children }) => {
+  const storedDarkMode = localStorage.getItem('darkMode') === 'true';
+  const [darkMode, setDarkMode] = useState(storedDarkMode);
+
+  useEffect(() => {
+    localStorage.setItem('darkMode', darkMode);
+  }, [darkMode]);
+
+  return (
+    <div 
+      className={`flex flex-col min-h-screen ${darkMode ? 'dark' : ''}`}
+    >
+      <header>
+        <Header heading="GitHub Profile README Generator" setDarkMode={setDarkMode} darkMode={darkMode}/>
+      </header>
+      <main className="flex-grow">{children}</main>
+      <footer>
+        <Footer />
+      </footer>
+    </div>
+  );
+};
 export default Layout;
 
 Layout.defaultProps = {

src/components/skills.jsx

@@ -35,7 +35,7 @@ const Skills = (props) => {
 
   return (
     <div className="px-2 sm:px-6 mb-10 ">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between headings">
         Skills
         <div className="relative flex">
           <input
@@ -71,7 +71,7 @@ const Skills = (props) => {
         })
         .map((key) => (
           <div key={key} className="divide-y divide-gray-500">
-            <div className="text-sm sm:text-xl text-gray-900 text-left py-1">{categorizedSkills[key].title}</div>
+            <div className="text-sm sm:text-xl text-gray-900 text-left py-1 sub-headings">{categorizedSkills[key].title}</div>
             <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
               {categorizedSkills[key].skills
                 .filter((skill) => skill.includes(search.toLowerCase()))

src/components/social.jsx

@@ -5,7 +5,7 @@ const Social = (props) => {
   const { social, handleSocialChange } = props;
   return (
     <div className="px-2 sm:px-6 mb-4">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Social</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Social</div>
       <div className="flex flex-wrap justify-center items-center">
         <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img

src/components/subtitle.jsx

@@ -5,7 +5,7 @@ const Subtitle = (props) => {
   const { data, handleDataChange } = props;
   return (
     <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Subtitle</div>
       <input
         id="subtitle"
         className="outline-none w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"

src/components/support.jsx

@@ -5,7 +5,7 @@ const Support = (props) => {
   const { support, handleSupportChange } = props;
   return (
     <div className="px-2 sm:px-6 mb-4">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Support</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Support</div>
       <div className="flex flex-wrap justify-start items-center">
         <div className="w-1/2 flex justify-start items-center text-xxs sm:text-lg py-4 pr-2 sm:pr-0">
           <img

src/components/title.jsx

@@ -5,7 +5,7 @@ const Title = (props) => {
   const { data, prefix, handlePrefixChange, handleDataChange } = props;
   return (
     <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Title</div>
       <div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
         <input
           id="title-prefix"

src/components/work.jsx

@@ -5,7 +5,7 @@ const Work = (props) => {
   const { prefix, handlePrefixChange, data, handleDataChange, link, handleLinkChange } = props;
   return (
     <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Work</div>
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2 headings">Work</div>
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="currentWork-prefix"