From 6519bec401c2a8f26acab455d2d01f8d68a77052 Mon Sep 17 00:00:00 2001
From: Sahas <sahasvivek001@gmail.com>
Date: Fri, 27 Oct 2023 13:13:19 +0530
Subject: [PATCH] feat: switcher dark mode to light mode

---
 pages/_app.tsx                            |  5 +---
 public/assets/icons/darkmodeswitcher.svg  |  3 +++
 public/assets/icons/lightmodeswitcher.svg | 10 ++++++++
 src/components/AppLayout/index.tsx        |  3 ++-
 src/ui-components/ToggleButton/index.tsx  | 30 +++++++++++++++++++++++
 tailwind.config.js                        |  1 +
 6 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 public/assets/icons/darkmodeswitcher.svg
 create mode 100644 public/assets/icons/lightmodeswitcher.svg
 create mode 100644 src/ui-components/ToggleButton/index.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5738b83d78..bea0ad2284 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -83,10 +83,7 @@ function App({ Component, pageProps }: AppProps) {
 
 	return (
 		<PersistGate persistor={store.__persistor}>
-			<ThemeProvider
-				attribute='class'
-				enableSystem
-			>
+			<ThemeProvider attribute='class'>
 				<ConfigProvider theme={antdTheme}>
 					<ModalProvider>
 						<ErrorBoundary>
diff --git a/public/assets/icons/darkmodeswitcher.svg b/public/assets/icons/darkmodeswitcher.svg
new file mode 100644
index 0000000000..76320a7d7f
--- /dev/null
+++ b/public/assets/icons/darkmodeswitcher.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15.5C5.91667 15.5 4.14583 14.7708 2.6875 13.3125C1.22917 11.8542 0.5 10.0833 0.5 8C0.5 5.91667 1.22917 4.14583 2.6875 2.6875C4.14583 1.22917 5.91667 0.5 8 0.5C8.11111 0.5 8.22917 0.503472 8.35417 0.510417C8.47917 0.517361 8.63889 0.527778 8.83333 0.541667C8.33333 0.986111 7.94444 1.53472 7.66667 2.1875C7.38889 2.84028 7.25 3.52778 7.25 4.25C7.25 5.5 7.6875 6.5625 8.5625 7.4375C9.4375 8.3125 10.5 8.75 11.75 8.75C12.4722 8.75 13.1597 8.62153 13.8125 8.36458C14.4653 8.10764 15.0139 7.75 15.4583 7.29167C15.4722 7.45833 15.4826 7.59375 15.4896 7.69792C15.4965 7.80208 15.5 7.90278 15.5 8C15.5 10.0833 14.7708 11.8542 13.3125 13.3125C11.8542 14.7708 10.0833 15.5 8 15.5ZM8 14.25C9.51389 14.25 10.8333 13.7812 11.9583 12.8438C13.0833 11.9062 13.7847 10.8056 14.0625 9.54167C13.7153 9.69444 13.3426 9.80903 12.9444 9.88542C12.5463 9.96181 12.1482 10 11.75 10C10.1571 10 8.80053 9.4399 7.68031 8.31969C6.5601 7.19946 6 5.8429 6 4.25C6 3.91667 6.03472 3.55903 6.10417 3.17708C6.17361 2.79514 6.29861 2.36111 6.47917 1.875C5.11806 2.25 3.98958 3.01042 3.09375 4.15625C2.19792 5.30208 1.75 6.58333 1.75 8C1.75 9.73611 2.35764 11.2118 3.57292 12.4271C4.78819 13.6424 6.26389 14.25 8 14.25Z" fill="#90A0B7"/>
+</svg>
diff --git a/public/assets/icons/lightmodeswitcher.svg b/public/assets/icons/lightmodeswitcher.svg
new file mode 100644
index 0000000000..184cfd00f4
--- /dev/null
+++ b/public/assets/icons/lightmodeswitcher.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11488_40352)">
+<path d="M9.9938 12.9173C10.8026 12.9173 11.4918 12.6342 12.0612 12.068C12.6306 11.5019 12.9154 10.8144 12.9154 10.0055C12.9154 9.19673 12.6323 8.5076 12.0661 7.93815C11.4999 7.36871 10.8124 7.08398 10.0036 7.08398C9.19477 7.08398 8.50564 7.36707 7.9362 7.93326C7.36675 8.49942 7.08203 9.18692 7.08203 9.99576C7.08203 10.8046 7.36512 11.4937 7.9313 12.0632C8.49747 12.6326 9.18497 12.9173 9.9938 12.9173ZM9.9987 14.1673C8.84592 14.1673 7.86328 13.7611 7.05078 12.9486C6.23828 12.1361 5.83203 11.1534 5.83203 10.0007C5.83203 8.84787 6.23828 7.86523 7.05078 7.05273C7.86328 6.24023 8.84592 5.83398 9.9987 5.83398C11.1515 5.83398 12.1341 6.24023 12.9466 7.05273C13.7591 7.86523 14.1654 8.84787 14.1654 10.0007C14.1654 11.1534 13.7591 12.1361 12.9466 12.9486C12.1341 13.7611 11.1515 14.1673 9.9987 14.1673ZM1.45703 10.6257C1.27995 10.6257 1.13151 10.5654 1.01172 10.4449C0.891927 10.3244 0.832031 10.1751 0.832031 9.99701C0.832031 9.81888 0.891927 9.67079 1.01172 9.55273C1.13151 9.43468 1.27995 9.37565 1.45703 9.37565H3.54036C3.71745 9.37565 3.86589 9.43589 3.98568 9.55638C4.10547 9.67688 4.16536 9.82619 4.16536 10.0043C4.16536 10.1824 4.10547 10.3305 3.98568 10.4486C3.86589 10.5666 3.71745 10.6257 3.54036 10.6257H1.45703ZM16.457 10.6257C16.2799 10.6257 16.1315 10.5654 16.0117 10.4449C15.8919 10.3244 15.832 10.1751 15.832 9.99701C15.832 9.81888 15.8919 9.67079 16.0117 9.55273C16.1315 9.43468 16.2799 9.37565 16.457 9.37565H18.5404C18.7174 9.37565 18.8659 9.43589 18.9857 9.55638C19.1055 9.67688 19.1654 9.82619 19.1654 10.0043C19.1654 10.1824 19.1055 10.3305 18.9857 10.4486C18.8659 10.5666 18.7174 10.6257 18.5404 10.6257H16.457ZM9.99505 4.16732C9.81693 4.16732 9.66884 4.10742 9.55078 3.98763C9.43273 3.86784 9.3737 3.7194 9.3737 3.54232V1.45898C9.3737 1.2819 9.43394 1.13346 9.55443 1.01367C9.67493 0.89388 9.82423 0.833984 10.0023 0.833984C10.1805 0.833984 10.3286 0.89388 10.4466 1.01367C10.5647 1.13346 10.6237 1.2819 10.6237 1.45898V3.54232C10.6237 3.7194 10.5635 3.86784 10.443 3.98763C10.3225 4.10742 10.1732 4.16732 9.99505 4.16732ZM9.99505 19.1673C9.81693 19.1673 9.66884 19.1074 9.55078 18.9876C9.43273 18.8678 9.3737 18.7194 9.3737 18.5423V16.459C9.3737 16.2819 9.43394 16.1335 9.55443 16.0137C9.67493 15.8939 9.82423 15.834 10.0023 15.834C10.1805 15.834 10.3286 15.8939 10.4466 16.0137C10.5647 16.1335 10.6237 16.2819 10.6237 16.459V18.5423C10.6237 18.7194 10.5635 18.8678 10.443 18.9876C10.3225 19.1074 10.1732 19.1673 9.99505 19.1673ZM4.9987 5.87565L3.8112 4.70898C3.6862 4.58398 3.62627 4.43396 3.63143 4.25892C3.63657 4.08387 3.69577 3.93456 3.80905 3.811C3.93261 3.68744 4.08191 3.62565 4.25697 3.62565C4.43201 3.62565 4.58203 3.68815 4.70703 3.81315L5.8737 5.00065C5.98481 5.12565 6.04036 5.27148 6.04036 5.43815C6.04036 5.60482 5.98481 5.74718 5.8737 5.86523C5.76259 5.98329 5.62023 6.04232 5.44661 6.04232C5.273 6.04232 5.1237 5.98676 4.9987 5.87565ZM15.2904 16.1882L14.1237 15.0007C14.0126 14.8757 13.957 14.7272 13.957 14.5553C13.957 14.3835 14.0161 14.2402 14.1341 14.1257C14.2522 14.0007 14.3945 13.9382 14.5612 13.9382C14.7279 13.9382 14.8737 14.0007 14.9987 14.1257L16.1862 15.2923C16.3112 15.4173 16.3711 15.5673 16.366 15.7424C16.3608 15.9174 16.3016 16.0667 16.1883 16.1903C16.0648 16.3139 15.9155 16.3757 15.7404 16.3757C15.5654 16.3757 15.4154 16.3132 15.2904 16.1882ZM14.1237 5.87565C13.9987 5.75065 13.9362 5.60482 13.9362 5.43815C13.9362 5.27148 13.9987 5.12565 14.1237 5.00065L15.2904 3.81315C15.4154 3.68815 15.5654 3.62823 15.7404 3.63338C15.9155 3.63852 16.0648 3.69773 16.1883 3.811C16.3119 3.93456 16.3737 4.08387 16.3737 4.25892C16.3737 4.43396 16.3112 4.58398 16.1862 4.70898L14.9987 5.87565C14.8876 5.98676 14.7462 6.04232 14.5744 6.04232C14.4027 6.04232 14.2525 5.98676 14.1237 5.87565ZM3.80905 16.1903C3.68548 16.0667 3.6237 15.9174 3.6237 15.7424C3.6237 15.5673 3.6862 15.4173 3.8112 15.2923L4.9987 14.1257C5.12092 14.0007 5.26606 13.9382 5.43411 13.9382C5.60217 13.9382 5.74598 14.0007 5.86555 14.1257C5.99598 14.2507 6.0612 14.3965 6.0612 14.5632C6.0612 14.7298 5.9987 14.8757 5.8737 15.0007L4.70703 16.1882C4.58203 16.3132 4.43201 16.3731 4.25697 16.3679C4.08191 16.3628 3.93261 16.3036 3.80905 16.1903Z" fill="#888888"/>
+</g>
+<defs>
+<clipPath id="clip0_11488_40352">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index 90ab1d8e93..4f7668a03b 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -69,6 +69,7 @@ import { useDispatch } from 'react-redux';
 import { logout } from '~src/redux/userDetails';
 import { useTheme } from 'next-themes';
 import { Dropdown } from '~src/ui-components/Dropdown';
+import ToggleButton from '~src/ui-components/ToggleButton';
 
 const OnChainIdentity = dynamic(() => import('~src/components/OnchainIdentity'), {
 	ssr: false
@@ -695,7 +696,7 @@ const AppLayout = ({ className, Component, pageProps }: Props) => {
 	if (isMobile) {
 		sidebarItems = [getSiderMenuItem('', '', <div className='mt-[60px]' />), username && isMobile ? userDropdown : null, ...sidebarItems];
 	}
-
+	sidebarItems.push(getSiderMenuItem('', '', <ToggleButton />));
 	return (
 		<Layout className={className}>
 			<NavHeader
diff --git a/src/ui-components/ToggleButton/index.tsx b/src/ui-components/ToggleButton/index.tsx
new file mode 100644
index 0000000000..478d071c58
--- /dev/null
+++ b/src/ui-components/ToggleButton/index.tsx
@@ -0,0 +1,30 @@
+// Copyright 2019-2025 @polkassembly/polkassembly authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { useTheme } from 'next-themes';
+import DarkModeSwitcher from '~assets/icons/darkmodeswitcher.svg';
+import LightModeSwitcher from '~assets/icons/lightmodeswitcher.svg';
+
+const ToggleButton = () => {
+	const { resolvedTheme: theme, setTheme } = useTheme();
+
+	return (
+		<button
+			onClick={(e) => {
+				e.preventDefault();
+				setTheme(theme === 'dark' ? 'light' : 'dark');
+			}}
+			className='m-0 flex min-w-[200px] cursor-pointer items-center justify-center rounded-full border border-solid border-[#D2D8E0] bg-white p-2 py-1 hover:bg-none dark:border-separatorDark dark:bg-section-dark-overlay'
+		>
+			{theme === 'dark' ? <LightModeSwitcher /> : <DarkModeSwitcher />}
+			<p className='m-0 font-poppins text-xs font-normal leading-[15px] text-bodyBlue dark:text-white'>Switch to</p>
+			<p className='m-0 ml-[6px] mr-[11px] font-poppins text-xs font-semibold font-semibold leading-[18px] tracking-[0.02em] text-bodyBlue dark:text-white'>
+				{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+			</p>
+		</button>
+	);
+};
+
+export default ToggleButton;
diff --git a/tailwind.config.js b/tailwind.config.js
index 932c697748..b50ed1575f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@
 /* eslint-disable sort-keys */
 module.exports = {
 	important: true,
+	darkMode: 'class',
 	content: ['./pages/**/*.{js,ts,jsx,tsx}', './src/**/*.{jsx,tsx}'],
 	theme: {
 		extend: {