diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/darkTheme.js
copy from web/cashtab/src/assets/styles/theme.js
copy to web/cashtab/src/assets/styles/darkTheme.js
--- a/web/cashtab/src/assets/styles/theme.js
+++ b/web/cashtab/src/assets/styles/darkTheme.js
@@ -1,4 +1,4 @@
-export const theme = {
+export const darkTheme = {
     primary: '#00ABE7',
     brandSecondary: '#CD0BC3',
     contrast: '#fff',
@@ -7,10 +7,10 @@
         background: '#fbfbfd',
     },
     wallet: {
-        background: '#fff',
+        background: 'linear-gradient(0deg, #00002f 93%, #3b5086)',
         text: {
-            primary: '#273498',
-            secondary: '#273498',
+            primary: '#ffffff',
+            secondary: '#ffffff',
         },
         switch: {
             activeCash: {
@@ -18,34 +18,34 @@
             },
             activeToken: {
                 background: '#CD0BC3',
-                shadow: 'inset 5px 5px 11px #FF21D0, inset -5px -5px 11px #CD0BC3',
+                shadow: 'inset 5px 5px 11px #FF21D0, inset -5px -5px 11px #ff59f6',
             },
             inactive: {
-                background: 'linear-gradient(145deg, #eeeeee, #c8c8c8)',
+                background: 'linear-gradient(145deg, #bcbcbc, #979797)',
             },
         },
-        borders: { color: '#e2e2e2' },
+        borders: { color: '#b0b0b0' },
         shadow: 'rgba(0, 0, 0, 1)',
     },
     tokenListItem: {
-        background: '#ffffff',
-        color: '',
+        background: '#002858',
+        color: '#fff',
         boxShadow:
             'rgb(136 172 243 / 25%) 0px 10px 30px,rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px',
-        border: '#e9eaed',
-        hoverBorder: '#231F20',
+        border: '#fff',
+        hoverBorder: '#697cb5',
     },
     footer: {
-        background: '#fff',
-        navIconInactive: '#949494',
+        background: '#00002f',
+        navIconInactive: '#fff',
     },
     forms: {
-        error: '#FF21D0',
-        border: '#e7edf3',
-        text: '#001137',
-        addonBackground: '#f4f4f4',
-        addonForeground: '#3e3f42',
-        selectionBackground: '#fff',
+        error: '#c7009e',
+        border: '#b5bbc0',
+        text: '#eee',
+        addonBackground: '#3e3f42',
+        addonForeground: '#f4f4f4',
+        selectionBackground: '#00002f',
     },
     icons: { outlined: '#273498' },
     modals: {
@@ -68,22 +68,22 @@
             disabledOverlay: 'rgba(255, 255, 255, 0.5)',
         },
         secondary: {
-            background: '#e9eaed',
-            color: '#444',
+            background: '#444',
+            color: '#7d7e7f',
             hoverShadow: '0px 3px 10px -5px rgba(0, 0, 0, 0.75)',
             disabledOverlay: 'rgba(255, 255, 255, 0.5)',
         },
     },
     collapses: {
-        background: '#fbfcfd',
+        background: '#3e3f42',
         border: '#eaedf3',
-        color: '#3e3f42',
+        color: '#fbfcfd',
     },
     generalSettings: {
         item: {
             icon: '#949494',
             title: '#949494',
         },
-        background: '#fff',
+        background: '#00002f',
     },
 };
diff --git a/web/cashtab/src/assets/styles/theme.js b/web/cashtab/src/assets/styles/theme.js
--- a/web/cashtab/src/assets/styles/theme.js
+++ b/web/cashtab/src/assets/styles/theme.js
@@ -1,4 +1,4 @@
-export const theme = {
+export const lightTheme = {
     primary: '#00ABE7',
     brandSecondary: '#CD0BC3',
     contrast: '#fff',
diff --git a/web/cashtab/src/components/App.js b/web/cashtab/src/components/App.js
--- a/web/cashtab/src/components/App.js
+++ b/web/cashtab/src/components/App.js
@@ -4,7 +4,8 @@
 import { CashLoadingIcon } from '@components/Common/CustomIcons';
 import '../index.css';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
-import { theme } from '@assets/styles/theme';
+import { lightTheme } from '@assets/styles/theme';
+import { darkTheme } from '@assets/styles/darkTheme';
 import {
     FolderOpenFilled,
     CaretRightOutlined,
@@ -228,6 +229,30 @@
     const ContextValue = React.useContext(WalletContext);
     const { wallet, loading } = ContextValue;
     const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
+    const [theme, setTheme] = useState('light');
+
+    useEffect(() => {
+        const existingPreference = localStorage.getItem('userSelectedTheme');
+        if (existingPreference) {
+            existingPreference === 'light'
+                ? setTheme('light')
+                : setTheme('dark');
+        } else {
+            setTheme('light');
+            localStorage.setItem('userSelectedTheme', 'light');
+        }
+    }, []);
+
+    const toggleTheme = () => {
+        //if the theme is not light, then set it to dark
+        if (theme === 'light') {
+            setTheme('dark');
+            localStorage.setItem('userSelectedTheme', 'dark');
+        } else {
+            setTheme('light');
+            localStorage.setItem('userSelectedTheme', 'light');
+        }
+    };
     // If wallet is unmigrated, do not show page until it has migrated
     // An invalid wallet will be validated/populated after the next API call, ETA 10s
     const validWallet = isValidStoredWallet(wallet);
@@ -245,7 +270,7 @@
         : false;
 
     return (
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
             <GlobalStyle />
             <Spin
                 spinning={
@@ -307,7 +332,10 @@
                                         )}
                                     />
                                     <Route path="/configure">
-                                        <Configure />
+                                        <Configure
+                                            toggleTheme={toggleTheme}
+                                            theme={theme}
+                                        />
                                     </Route>
                                     <Redirect exact from="/" to="/wallet" />
                                     <Route component={NotFound} />
diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js
--- a/web/cashtab/src/components/Configure/Configure.js
+++ b/web/cashtab/src/components/Configure/Configure.js
@@ -33,6 +33,7 @@
 import { Event } from '@utils/GoogleAnalytics';
 import ApiError from '@components/Common/ApiError';
 import { formatSavedBalance } from '@utils/formatting';
+import PropTypes from 'prop-types';
 
 const { Panel } = Collapse;
 
@@ -236,7 +237,7 @@
     }
 `;
 
-const Configure = () => {
+const Configure = ({ toggleTheme, theme }) => {
     const ContextValue = React.useContext(WalletContext);
     const authentication = React.useContext(AuthenticationContext);
     const { wallet, apiError } = ContextValue;
@@ -733,6 +734,14 @@
                         Not Supported
                     </Tag>
                 )}
+                Theme:
+                <Switch
+                    checkedChildren="light"
+                    unCheckedChildren="dark"
+                    defaultChecked={theme === 'light' ? true : false}
+                    style={{ backgroundColor: 'darkblue', color: 'white' }}
+                    onClick={toggleTheme}
+                />
             </GeneralSettingsItem>
             <StyledSpacer />[
             <SettingsLink
@@ -748,4 +757,9 @@
     );
 };
 
+Configure.propTypes = {
+    toggleTheme: PropTypes.func,
+    theme: PropTypes.string,
+};
+
 export default Configure;