Merge pull request #85 from HusseinSerag/FEATURE-darkmode-btn

feature: create a button for dark/light mode

Author: hunxjunedo

package-lock.json

@@ -39,6 +39,7 @@
     "react-icons": "^5.3.0",
     "react-loading-skeleton": "^3.4.0",
     "react-router-dom": "^6.2.2",
+    "react-toggle-dark-mode": "^1.1.1",
     "uuid": "^9.0.1",
     "vite-plugin-mkcert": "^1.17.5",
     "web-vitals": "^1.1.2"

package.json

@@ -12,7 +12,8 @@ export default function HeroSection() {
 				<Link to={"/themes"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+              bg-accent-100 text-accent-700 hover:bg-gradient-to-r
+               hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>
@@ -22,7 +23,8 @@ export default function HeroSection() {
 				<Link to={"/plugins"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+            bg-accent-100 text-accent-700  hover:bg-gradient-to-r
+             hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>
@@ -32,7 +34,8 @@ export default function HeroSection() {
 				<Link to={"https://react-chatbotify.com"}>
 					<button
 						className="
-              bg-accent-900 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px] hover:to-primary-600 
+            bg-accent-100 text-accent-700 hover:bg-gradient-to-r hover:from-secondary-900 px-2 py-1 text-[14px]
+             hover:to-primary-600 
               transition-colors duration-300 hover:text-accent-900 sm:px-4 sm:py-2 sm:text-lg rounded-lg
             "
 					>

src/components/LandingPage/HeroSection.tsx

@@ -1,6 +1,6 @@
 import { useAppTheme } from "../../context/AppThemeContext";
 import { useTranslation } from "react-i18next";
-
+import { DarkModeSwitch } from "react-toggle-dark-mode"
 
 const AppThemeToggle = () => {
 	// context for handling app theme
@@ -12,12 +12,17 @@ const AppThemeToggle = () => {
 	const handleClick = () => {
 		toggleAppTheme()
 	}
+  
+	const isDark = appTheme === 'dark';
+	return <DarkModeSwitch
+		checked={isDark}
+		onChange={handleClick}
+		size={20}
+		moonColor="hsl(198,90%,15%)"
+		sunColor="hsl(48,90%,55%)"
 
-	console.log(appTheme)
+	/>
 
-	return <div>
-		<button onClick={handleClick}>{appTheme}</button>
-	</div>
 }
 
-export default AppThemeToggle;
+export default AppThemeToggle;

src/components/NavigationBar/AppThemeToggle.tsx

@@ -360,7 +360,7 @@ const NavigationBar = () => {
 						</button>
 					</li>
 				)}
-				<li>
+				<li className='grid items-center'>
 					<AppThemeToggle />
 				</li>
 			</ul>

src/components/NavigationBar/NavigationBar.tsx

@@ -17,6 +17,7 @@ import LoginProcessPage from './pages/LoginProcess'
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
 import { Provider } from './components/ui/provider';
+import { AppThemeProvider } from './context/AppThemeContext';
 
 // eslint-disable-next-line
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
@@ -73,13 +74,15 @@ const routes = [
 const router = createBrowserRouter(routes)
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 	<React.StrictMode>
-		<I18nextProvider i18n={i18n}>
-			<AuthProvider>
-				<Provider >
-					<RouterProvider router={router} />
-				</Provider>
-			</AuthProvider>
-		</I18nextProvider>
+		<AppThemeProvider>
+			<I18nextProvider i18n={i18n}>
+				<AuthProvider>
+					<Provider >
+						<RouterProvider router={router} />
+					</Provider>
+				</AuthProvider>
+			</I18nextProvider>
+		</AppThemeProvider>
 	</React.StrictMode>
 )
 reportWebVitals()

src/index.tsx

@@ -12,7 +12,7 @@
   0px 8.5px 17.9px rgba(0, 0, 0, 0.042),
   0px 15.9px 33.4px rgba(0, 0, 0, 0.05),
   0px 38px 80px rgba(0, 0, 0, 0.07);
-}
+ }
 
 :root[app-theme="light"] {
   /* Light Theme Accent Palette */
@@ -97,3 +97,22 @@ code {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+
+
+
+.theme__toggle {
+  background-color: hsl(48,90%,85%);
+  border-radius: 25% / 50%;
+  box-shadow: 0 0 0 0.125em var(--primaryT);
+  padding: 0.25em;
+  width: 4.3em;
+  height: 2.3em;
+  -webkit-appearance: none;
+  appearance: none;
+  transition: background-color var(--transDur) ease-in-out,
+		box-shadow 0.15s ease-in-out,
+		transform var(--transDur) ease-in-out;
+}
+
+

src/styles/index.css

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  darkMode: "dark",
+  darkMode: "class",
   theme: {
     container: {
       center: true,