clean up, add into cmd+k

.ladle/components.tsx

@@ -11,7 +11,13 @@ import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
 import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
 
-import { AppTheme, AppColorMode, setAppTheme, setAppColorMode } from '@/state/configs';
+import {
+  AppTheme,
+  AppThemeSystemSetting,
+  AppColorMode,
+  setAppThemeSetting,
+  setAppColorMode,
+} from '@/state/configs';
 import { setLocaleLoaded } from '@/state/localization';
 
 import '@/index.css';
@@ -22,7 +28,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
 
   useEffect(() => {
-    store.dispatch(setAppTheme(theme));
+    store.dispatch(setAppThemeSetting(theme));
     store.dispatch(setAppColorMode(colorMode));
   }, [theme, colorMode]);
 
@@ -40,6 +46,10 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
               value: AppTheme.Classic,
               label: 'Default theme',
             },
+            {
+              value: AppThemeSystemSetting.System,
+              label: 'System theme',
+            },
             {
               value: AppTheme.Dark,
               label: 'Dark theme',

src/hooks/useAppThemeAndColorMode.tsx

@@ -2,7 +2,12 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
-import { AppTheme, AppThemeSetting, AppColorMode, AppThemeSystemSetting } from '@/state/configs';
+import type {
+  AppTheme,
+  AppThemeSetting,
+  AppColorMode,
+  AppThemeSystemSetting,
+} from '@/state/configs';
 import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
 
 import { Themes } from '@/styles/themes';

src/lib/tradingView/utils.ts

@@ -1,6 +1,6 @@
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
 
-import { AppTheme, AppColorMode } from '@/state/configs';
+import type { AppTheme, AppColorMode } from '@/state/configs';
 
 import { Themes } from '@/styles/themes';
 

src/state/configs.ts

@@ -24,7 +24,7 @@ export enum AppColorMode {
 }
 
 export interface ConfigsState {
-  appTheme: AppThemeSetting;
+  appThemeSetting: AppThemeSetting;
   appColorMode: AppColorMode;
   feeTiers?: kollections.List<FeeTier>;
   feeDiscounts?: FeeDiscount[];
@@ -33,7 +33,7 @@ export interface ConfigsState {
 }
 
 const initialState: ConfigsState = {
-  appTheme: getLocalStorage({
+  appThemeSetting: getLocalStorage({
     key: LocalStorageKey.SelectedTheme,
     defaultValue: AppTheme.Classic,
   }),
@@ -54,9 +54,9 @@ export const configsSlice = createSlice({
   name: 'Inputs',
   initialState,
   reducers: {
-    setAppTheme: (state: ConfigsState, { payload }: PayloadAction<AppThemeSetting>) => {
+    setAppThemeSetting: (state: ConfigsState, { payload }: PayloadAction<AppThemeSetting>) => {
       setLocalStorage({ key: LocalStorageKey.SelectedTheme, value: payload });
-      state.appTheme = payload;
+      state.appThemeSetting = payload;
     },
     setAppColorMode: (state: ConfigsState, { payload }: PayloadAction<AppColorMode>) => {
       setLocalStorage({ key: LocalStorageKey.SelectedColorMode, value: payload });
@@ -73,5 +73,5 @@ export const configsSlice = createSlice({
   },
 });
 
-export const { setAppTheme, setAppColorMode, setConfigs, markLaunchIncentivesSeen } =
+export const { setAppThemeSetting, setAppColorMode, setConfigs, markLaunchIncentivesSeen } =
   configsSlice.actions;

src/state/configsSelectors.ts

@@ -1,16 +1,17 @@
 import type { RootState } from './_store';
 import { AppTheme, AppThemeSystemSetting, AppThemeSetting } from './configs';
 
-export const getAppThemeSetting = (state: RootState): AppThemeSetting => state.configs.appTheme;
+export const getAppThemeSetting = (state: RootState): AppThemeSetting =>
+  state.configs.appThemeSetting;
 
 export const getAppTheme = (state: RootState): AppTheme => {
-  switch (state.configs.appTheme) {
+  switch (state.configs.appThemeSetting) {
     case AppThemeSystemSetting.System:
       return globalThis.matchMedia('(prefers-color-scheme: dark)').matches
         ? AppTheme.Dark
         : AppTheme.Light;
     default:
-      return state.configs.appTheme;
+      return state.configs.appThemeSetting;
   }
 };
 

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -9,10 +9,10 @@ import {
   AppTheme,
   AppThemeSystemSetting,
   AppColorMode,
-  setAppTheme,
+  setAppThemeSetting,
   setAppColorMode,
 } from '@/state/configs';
-import { getAppTheme, getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
+import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
@@ -80,7 +80,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
               backgroundcolor={backgroundColor}
               gridcolor={gridColor}
               onClick={() => {
-                dispatch(setAppTheme(themeSetting));
+                dispatch(setAppThemeSetting(themeSetting));
               }}
             >
               <Styled.AppThemeHeader textcolor={textColor}>

src/views/menus/useGlobalCommands.tsx

@@ -6,19 +6,19 @@ import { TradeLayouts } from '@/constants/layout';
 
 import { AssetIcon } from '@/components/AssetIcon';
 
-import { AppTheme, setAppTheme } from '@/state/configs';
+import {
+  AppTheme,
+  AppThemeSystemSetting,
+  AppColorMode,
+  setAppThemeSetting,
+  setAppColorMode,
+} from '@/state/configs';
 import { setSelectedTradeLayout } from '@/state/layout';
 
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
 import { Asset, PerpetualMarket } from '@/constants/abacus';
 
-enum ThemeItems {
-  SetClassicTheme = 'SetDefaultTheme',
-  SetLightTheme = 'SetLightTheme',
-  SetDarkTheme = 'SetDarkTheme',
-}
-
 enum LayoutItems {
   setDefaultLayout = 'SetDefaultLayout',
   setReverseLayout = 'SetReverseLayout',
@@ -53,24 +53,51 @@ export const useGlobalCommands = (): MenuConfig<string, string> => {
       groupLabel: 'Themes',
       items: [
         {
-          value: ThemeItems.SetClassicTheme,
+          value: AppTheme.Classic,
           label: 'Set Classic Theme',
           onSelect: () => {
-            dispatch(setAppTheme(AppTheme.Classic));
+            dispatch(setAppThemeSetting(AppTheme.Classic));
           },
         },
         {
-          value: ThemeItems.SetLightTheme,
+          value: AppThemeSystemSetting.System,
+          label: 'Set System Theme',
+          onSelect: () => {
+            dispatch(setAppThemeSetting(AppThemeSystemSetting.System));
+          },
+        },
+        {
+          value: AppTheme.Light,
           label: 'Set Light Theme',
           onSelect: () => {
-            dispatch(setAppTheme(AppTheme.Light));
+            dispatch(setAppThemeSetting(AppTheme.Light));
           },
         },
         {
-          value: ThemeItems.SetDarkTheme,
+          value: AppTheme.Dark,
           label: 'Set Dark Theme',
           onSelect: () => {
-            dispatch(setAppTheme(AppTheme.Dark));
+            dispatch(setAppThemeSetting(AppTheme.Dark));
+          },
+        },
+      ],
+    },
+    {
+      group: 'colorPreferences',
+      groupLabel: 'Color Preferences',
+      items: [
+        {
+          value: AppColorMode.GreenUp,
+          label: 'Set Green is Up',
+          onSelect: () => {
+            dispatch(setAppColorMode(AppColorMode.GreenUp));
+          },
+        },
+        {
+          value: AppColorMode.RedUp,
+          label: 'Set Red is Up',
+          onSelect: () => {
+            dispatch(setAppColorMode(AppColorMode.RedUp));
           },
         },
       ],