dark mode toggle button

.all-contributorsrc

@@ -49,7 +49,7 @@
       "contributions": [
         "code"
       ]
-    }
+    },
     {
       "login": "YashKandalkar",
       "name": "yash",
@@ -77,7 +77,7 @@
       "contributions": [
         "code"
       ]
-    }
+    },
     {
       "login": "g-savitha",
       "name": "Savitha Gollamudi",

package.json

@@ -42,7 +42,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "babel-jest": "26.3.0",

src/components/Mode.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
+import '../styles/toggle.css';
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: ${props => props.isDarkMode ? '#1C3336' : '#fff'};
+    color: ${props => props.isDarkMode ? '#d0d0d5' : '#1C3336'};
+    transition: background-color 0.3s ease;
+  }
+`;
+
+
+const DarkMode = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const toggleMode = () => {
+    setIsDarkMode(prevMode => !prevMode);
+  };
+
+  return ( 
+    <>
+      <GlobalStyle isDarkMode={isDarkMode} />
+      <div class="toggle-container">
+        <span class="toggle-label">Light</span>
+        <div class="toggle">
+            <input type="checkbox" id="dark-mode-toggle" checked={isDarkMode} onChange={toggleMode} class="toggle-input" />
+            <label for="dark-mode-toggle" class="toggle-slider"></label>
+            <div class={`toggle-ball ${isDarkMode ? 'dark' : 'light'}`} />
+        </div>
+        <span class="toggle-label">Dark</span>
+      </div>
+    </>
+  );
+};
+
+export default DarkMode;

src/constants/skills.js

@@ -69,6 +69,7 @@ const categorizedSkills = {
       'nginx',
       'openresty',
       'nestjs',
+      'strapi',
     ],
   },
 

src/pages/index.jsx

@@ -19,6 +19,7 @@ import Addons from '../components/addons';
 import Skills from '../components/skills';
 import Donate from '../components/donate';
 import Support from '../components/support';
+import Mode from '../components/Mode';
 import { initialSkillState } from '../constants/skills';
 import Loader from '../components/loader';
 import SEO from '../components/seo';
@@ -394,7 +395,9 @@ const IndexPage = () => {
 
   return (
     <Layout>
+      <Mode />
       <div className="m-4 sm:p-4">
+
         <SEO title="GitHub Profile Readme Generator" />
         <div id="form">
           <Title

src/styles/toggle.css

@@ -0,0 +1,70 @@
+.toggle-container {
+    display: flex;
+    align-items: center;
+}
+
+.toggle-label {
+    margin-right: 0px;
+}
+
+.toggle {
+    position: relative;
+    width: 60px;
+    height: 34px;
+}
+
+.toggle-input {
+    display: none;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    border-radius: 34px;
+    transition: background-color 0.3s ease;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+}
+
+.toggle-input:checked + .toggle-slider {
+    background-color: #222;
+}
+
+.toggle-input:checked + .toggle-slider:before {
+    transform: translateX(26px);
+}
+
+.toggle-ball {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 26px;
+    height: 26px;
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: left 0.3s ease;
+}
+
+.toggle-ball.light {
+    left: 4px;  
+}
+
+.toggle-ball.dark {
+    left: 30px;
+}