feat: switcher dark mode to light mode

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>

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

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;

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: {