diff --git a/package.json b/package.json
index 1a7a8c62c..ccf9539a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "app-v2",
- "version": "2.5.10",
+ "version": "2.5.11",
"private": true,
"dependencies": {
"@ethersproject/providers": "^5.6.8",
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index f35c2c354..c8e6ed8a5 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -3,6 +3,7 @@ import { Box, Layer, ResponsiveContext, Tip, Text } from 'grommet';
import { FiEye } from 'react-icons/fi';
import { useAccountModal } from '@rainbow-me/rainbowkit';
+
import { abbreviateHash, clearCachedItems } from '../utils/appUtils';
import BackButton from './buttons/BackButton';
import GeneralButton from './buttons/GeneralButton';
@@ -48,7 +49,6 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => {
width={mobile ? undefined : '400px'}
background="lightBackground"
elevation="xlarge"
- justify="between"
style={{ overflow: 'auto' }}
>
@@ -124,13 +124,13 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => {
{!mobile && (
-
+
)}
-
+
diff --git a/src/components/settings/ThemeSetting.tsx b/src/components/settings/ThemeSetting.tsx
index 86e102404..d5c66df1f 100644
--- a/src/components/settings/ThemeSetting.tsx
+++ b/src/components/settings/ThemeSetting.tsx
@@ -8,66 +8,34 @@ import { Settings } from '../../contexts/types/settings';
const ThemeSettings = () => {
const {
- settingsState: { darkMode, autoTheme },
+ settingsState: { darkMode },
settingsActions: { updateSetting },
} = useContext(SettingsContext);
return (
- Use System Color Theme
+
+ Color Theme
+
- Off
+
}
checkedIcon={
- Auto
+
}
offColor="#BFDBFE"
onColor="#60A5FA"
- onChange={(val: boolean) => updateSetting(Settings.AUTO_THEME, val)}
- handleDiameter={20}
- borderRadius={20}
- />
-
-
-
-
- Color Theme
-
-
-
-
- )
- }
- checkedIcon={
- autoTheme ? (
- false
- ) : (
-
-
-
- )
- }
- offColor="#BFDBFE"
- onColor="#60A5FA"
onChange={(val: boolean) => updateSetting(Settings.DARK_MODE, val)}
handleDiameter={20}
borderRadius={20}
- disabled={autoTheme}
/>
diff --git a/src/contexts/SettingsContext.tsx b/src/contexts/SettingsContext.tsx
index d272a076a..591671164 100644
--- a/src/contexts/SettingsContext.tsx
+++ b/src/contexts/SettingsContext.tsx
@@ -15,8 +15,6 @@ const initState: ISettingsContextState = {
/* Color theme */
darkMode: false,
- /* Set color theme based on system */
- autoTheme: false,
/* Has the usage disclaimer been checked? */
disclaimerChecked: false,
diff --git a/src/contexts/types/settings.ts b/src/contexts/types/settings.ts
index d6e82a13c..b9d4060f9 100644
--- a/src/contexts/types/settings.ts
+++ b/src/contexts/types/settings.ts
@@ -6,7 +6,6 @@ export enum Settings {
SLIPPAGE_TOLERANCE = 'slippageTolerance',
DIAGNOSTICS = 'diagnostics',
DARK_MODE = 'darkMode',
- AUTO_THEME = 'autoTheme',
DISCLAIMER_CHECKED = 'disclaimerChecked',
POWER_USER = 'powerUser',
FORCE_TRANSACTIONS = 'forceTransactions',
@@ -32,7 +31,7 @@ export interface ISettingsContext {
}
export interface ISettingsContextActions {
- updateSetting: (setting: Settings, value: string | number | boolean ) => void;
+ updateSetting: (setting: Settings, value: string | number | boolean) => void;
}
export type SettingsContextAction = { type: Settings; payload: string | number | boolean };
@@ -40,8 +39,6 @@ export interface ISettingsContextState {
/* User Settings ( getting from the cache first ) */
slippageTolerance: number;
darkMode: boolean;
- autoTheme: boolean;
-
approvalMethod: ApprovalType;
approveMax: boolean;
disclaimerChecked: boolean;
@@ -68,6 +65,4 @@ export interface ISettingsContextState {
useMockedUser: boolean;
mockUserAddress: `0x${string}`;
-
}
-
diff --git a/src/hooks/useColorScheme.ts b/src/hooks/useColorScheme.ts
index b6a8663bc..b5f4cf6f5 100644
--- a/src/hooks/useColorScheme.ts
+++ b/src/hooks/useColorScheme.ts
@@ -1,27 +1,39 @@
import { useContext, useEffect, useState } from 'react';
import { SettingsContext } from '../contexts/SettingsContext';
+import { Settings } from '../contexts/types/settings';
-/* Hook for using a color scheme provided by user autotheme or darkMode settings */
export const useColorScheme = () => {
const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light');
const {
- settingsState: { autoTheme, darkMode },
+ settingsState: { darkMode },
+ settingsActions: { updateSetting },
} = useContext(SettingsContext);
useEffect(() => {
- if (autoTheme && typeof window !== 'undefined') {
- window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
- ? setColorScheme('dark')
- : setColorScheme('light');
+ const storedDarkMode = localStorage.getItem('darkMode');
+ const hasStoredDarkMode = storedDarkMode !== null;
+ if (hasStoredDarkMode) {
+ updateSetting(Settings.DARK_MODE, storedDarkMode === 'true');
+ setColorScheme(storedDarkMode === 'true' ? 'dark' : 'light');
+ } else if (typeof window !== 'undefined') {
+ const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ updateSetting(Settings.DARK_MODE, systemDarkMode);
+ setColorScheme(systemDarkMode ? 'dark' : 'light');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
- const newColorScheme = e.matches ? 'dark' : 'light';
- autoTheme && setColorScheme(newColorScheme);
+ const newDarkMode = e.matches;
+ updateSetting(Settings.DARK_MODE, newDarkMode);
+ setColorScheme(newDarkMode ? 'dark' : 'light');
});
} else {
- setColorScheme(darkMode ? 'dark' : 'light' || 'light');
+ updateSetting(Settings.DARK_MODE, false);
+ setColorScheme('light');
}
- }, [autoTheme, darkMode]);
+ }, []);
+
+ useEffect(() => {
+ setColorScheme(darkMode ? 'dark' : 'light');
+ }, [darkMode]);
return colorScheme;
};
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index dd7a312bd..eb8f0506d 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -12,23 +12,6 @@ export default class MyDocument extends Document {
-