fix system panel color background

* wip

* make system panel reflect user prefs

* clean up PnlChart

* testing changes removal

* clean up logo styling

* fix export of dark dots background

* remove comment

.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,25 +28,8 @@ 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));
-
-    switch (theme) {
-      case AppTheme.Dark: {
-        document?.documentElement?.classList.remove('theme-light');
-        document?.documentElement?.classList.add('theme-dark');
-        break;
-      }
-      case AppTheme.Light: {
-        document?.documentElement?.classList.remove('theme-dark');
-        document?.documentElement?.classList.add('theme-light');
-        break;
-      }
-      case AppTheme.Classic: {
-        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
-        break;
-      }
-    }
   }, [theme, colorMode]);
 
   useEffect(() => {
@@ -57,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/components/Accordion.tsx

@@ -85,7 +85,7 @@ Styled.Trigger = styled(Trigger)`
   &:hover {
     ${Styled.Icon} {
       color: var(--color-text-2);
-      filter: brightness(1.1);
+      filter: brightness(var(--hover-filter-base));
     }
   }
 

src/components/BaseButton.tsx

@@ -134,8 +134,8 @@ const ButtonStyle = css<StyleProps>`
 
   --button-textColor: var(--color-text-0);
   --button-backgroundColor: transparent;
-  --button-active-filter: brightness(0.9);
+  --button-active-filter: brightness(var(--active-filter));
-  --button-hover-filter: brightness(1.1);
+  --button-hover-filter: brightness(var(--hover-filter-base));
   --button-hover-textColor: var(--button-textColor);
 
   --button-radius: 0.5em;

src/components/Button.tsx

@@ -89,9 +89,10 @@ const buttonActionVariants = {
     --button-border: solid var(--border-width) var(--color-border);
   `,
   [ButtonAction.Primary]: css`
-    --button-textColor: var(--color-text-2);
+    --button-textColor: var(--color-text-button);
     --button-backgroundColor: var(--color-accent);
     --button-border: solid var(--border-width) var(--color-border-white);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Secondary]: css`
@@ -101,15 +102,17 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Create]: css`
-    --button-textColor: var(--color-text-2);
+    --button-textColor: var(--color-text-button);
     --button-backgroundColor: var(--color-success);
     --button-border: solid var(--border-width) var(--color-border-white);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Destroy]: css`
-    --button-textColor: var(--color-text-2);
+    --button-textColor: var(--color-text-button);
     --button-backgroundColor: var(--color-error);
     --button-border: solid var(--border-width) var(--color-border-white);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Navigation]: css`
@@ -122,6 +125,7 @@ const buttonActionVariants = {
     --button-textColor: var(--color-error);
     --button-backgroundColor: var(--color-layer-3);
     --button-border: solid var(--border-width) var(--color-border-red);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 };
 

src/components/Checkbox.tsx

@@ -80,7 +80,7 @@ Styled.Indicator = styled(Indicator)`
   align-items: center;
   justify-content: center;
 
-  color: var(--color-text-2);
+  color: var(--color-text-button);
 `;
 
 Styled.Label = styled.label<{ disabled?: boolean }>`

src/components/CopyButton.tsx

@@ -77,7 +77,7 @@ Styled.InlineRow = styled.div<{ copied: boolean }>`
         `
       : css`
           &:hover {
-            filter: brightness(1.1);
+            filter: brightness(var(--hover-filter-base));
             text-decoration: underline;
           }
         `}

src/components/DropdownHeaderMenu.tsx

@@ -87,7 +87,7 @@ Styled.Trigger = styled(Trigger)`
   outline: none;
 
   :hover {
-    filter: brightness(1.1);
+    filter: brightness(var(--hover-filter-base));
   }
 `;
 

src/components/Icon.tsx

@@ -13,6 +13,7 @@ import {
   CaretIcon,
   CautionCircleStrokeIcon,
   CautionCircleIcon,
+  ChaosLabsIcon,
   ChatIcon,
   CheckIcon,
   CheckCircleIcon,
@@ -90,6 +91,7 @@ export enum IconName {
   Caret = 'Caret',
   CautionCircle = 'CautionCircle',
   CautionCircleStroked = 'CautionCircleStroked',
+  ChaosLabs = 'ChaosLabs',
   Chat = 'Chat',
   Check = 'Check',
   CheckCircle = 'CheckCircle',
@@ -168,6 +170,7 @@ const icons = {
   [IconName.Caret]: CaretIcon,
   [IconName.CautionCircle]: CautionCircleIcon,
   [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
+  [IconName.ChaosLabs]: ChaosLabsIcon,
   [IconName.Chat]: ChatIcon,
   [IconName.Check]: CheckIcon,
   [IconName.CheckCircle]: CheckCircleIcon,

src/components/Table.tsx

@@ -782,7 +782,7 @@ Styled.Tr = styled.tr<{
       &:focus-visible,
       &:focus-within {
         --tableRow-currentBackgroundColor: var(--tableRow-hover-backgroundColor);
-        filter: brightness(1.1);
+        filter: brightness(var(--hover-filter-base));
       }
     `};
 

src/constants/styles/base.ts

@@ -68,3 +68,9 @@ export enum OpacityToken {
   Opacity66 = 'A8',
   Opacity90 = 'E6',
 }
+
+export enum BrightnessFilterToken {
+  Darken10 = '0.9',
+  Darken5 = '0.95',
+  Lighten10 = '1.1',
+}

src/constants/styles/colors.ts

@@ -14,7 +14,8 @@ export type ThemeColorBase = LayerColors &
   DirectionalColors &
   RiskColors &
   IconColors &
-  ComponentColors;
+  ComponentColors &
+  Filters;
 
 type LayerColors = {
   layer0: string;
@@ -37,6 +38,8 @@ type TextColors = {
   textPrimary: string;
   textSecondary: string;
   textTertiary: string;
+
+  textButton: string;
 };
 
 type GradientColors = {
@@ -87,3 +90,9 @@ type ComponentColors = {
   toggleBackground: string;
   tooltipBackground: string;
 };
+
+type Filters = {
+  hoverFilterBase: string;
+  hoverFilterVariant: string;
+  activeFilter: string;
+};

src/hooks/useAppThemeAndColorMode.tsx

@@ -1,8 +1,9 @@
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 
-import { AppTheme, AppColorMode } from '@/state/configs';
+import { AppTheme, AppThemeSetting, AppColorMode, AppThemeSystemSetting } from '@/state/configs';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
 
 import { Themes } from '@/styles/themes';
 
@@ -11,8 +12,37 @@ export const AppThemeAndColorModeProvider = ({ ...props }) => {
 };
 
 export const useAppThemeAndColorModeContext = () => {
-  const theme: AppTheme = useSelector(getAppTheme);
+  const themeSetting: AppThemeSetting = useSelector(getAppThemeSetting);
   const colorMode: AppColorMode = useSelector(getAppColorMode);
 
-  return Themes[theme][colorMode];
+  const darkModePref = globalThis.matchMedia('(prefers-color-scheme: dark)');
+
+  const [systemPreference, setSystemPreference] = useState(
+    darkModePref.matches ? AppTheme.Dark : AppTheme.Light
+  );
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.matches) {
+        setSystemPreference(AppTheme.Dark);
+      } else {
+        setSystemPreference(AppTheme.Light);
+      }
+    };
+    darkModePref.addEventListener('change', handler);
+    return () => darkModePref.removeEventListener('change', handler);
+  }, []);
+
+  const getThemeFromSetting = (): AppTheme => {
+    switch (themeSetting) {
+      case AppThemeSystemSetting.System:
+        return systemPreference;
+      case AppTheme.Classic:
+      case AppTheme.Dark:
+      case AppTheme.Light:
+        return themeSetting;
+    }
+  };
+
+  return Themes[getThemeFromSetting()][colorMode];
 };

src/icons/chaos-labs.tsx

@@ -0,0 +1,62 @@
+import { useSelector } from 'react-redux';
+
+import { AppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
+
+const ChaosLabsIcon: React.FC = () => {
+  const appTheme = useSelector(getAppTheme);
+
+  const fills = appTheme === AppTheme.Light ? ['#1482E5', '#000000'] : ['#1482E5', '#E5E9EB'];
+
+  return (
+    <svg width="91" height="17" viewBox="0 0 91 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.4384 13.2558C13.3846 13.2931 13.3295 13.3283 13.2724 13.3615L11.4238 14.4385L4.17188 10.2149V6.61884L11.4198 2.39746L13.2724 3.47652C13.3376 3.51449 13.4007 3.55521 13.4619 3.59848L8.28233 6.60962V6.60225L6.20661 7.81644V9.05132L8.28233 10.2629V9.0364L14.4967 5.41709C14.5028 5.48788 14.5055 5.55928 14.5055 5.63112V7.80972L10.3675 10.2318V11.4757L13.4384 13.2558Z"
+        fill={fills[0]}
+      />
+      <path
+        d="M9.34397 1.18863L8.48587 0.688787C7.72318 0.244363 6.78308 0.244363 6.01972 0.688787L1.23307 3.47666C0.470044 3.92109 0 4.74241 0 5.63125V11.207C0 12.0958 0.470044 12.9172 1.23307 13.3616L6.01972 16.1495C6.78308 16.5939 7.72318 16.5939 8.48587 16.1495L9.348 15.6475L2.09628 11.4241V5.41158L2.09911 5.41323L2.09628 5.41L9.34397 1.18863Z"
+        fill={fills[0]}
+      />
+      <path d="M62.777 12.3629V4.57764H64.1102V11.1154H67.7133V12.3629H62.777Z" fill={fills[1]} />
+      <path
+        d="M70.2932 10.5919L69.5029 12.3629H68.0797L71.5585 4.57764H72.9817L76.4605 12.3629H75.0373L74.2464 10.5919H70.2932ZM73.7041 9.37795L72.2701 6.17032L70.8355 9.37795H73.7041Z"
+        fill={fills[1]}
+      />
+      <path
+        d="M81.0141 12.3629H77.5581V4.57764H80.6304C81.1646 4.57764 81.6242 4.64075 82.0079 4.76698C82.3997 4.8932 82.6893 5.06398 82.8781 5.27931C83.2396 5.68026 83.4197 6.1332 83.4197 6.6381C83.4197 7.24693 83.2242 7.69991 82.8324 7.99692C82.6893 8.10087 82.5918 8.16767 82.5388 8.19737C82.4863 8.21968 82.3923 8.26047 82.2565 8.31987C82.7464 8.42382 83.1341 8.64289 83.4197 8.97699C83.7134 9.3037 83.8605 9.71213 83.8605 10.2021C83.8605 10.7442 83.6724 11.2231 83.2961 11.6389C82.8512 12.1215 82.0912 12.3629 81.0141 12.3629ZM78.8906 7.80756H80.5847C81.5489 7.80756 82.0307 7.48454 82.0307 6.83858C82.0307 6.46732 81.9138 6.20002 81.6806 6.03667C81.4468 5.87331 81.086 5.79164 80.5961 5.79164H78.8906V7.80756ZM78.8906 11.1489H80.9805C81.4697 11.1489 81.8426 11.0746 82.0986 10.9261C82.362 10.7701 82.4937 10.4806 82.4937 10.0574C82.4937 9.3668 81.9326 9.02154 80.8111 9.02154H78.8906V11.1489Z"
+        fill={fills[1]}
+      />
+      <path
+        d="M87.9162 5.60121C87.5325 5.60121 87.216 5.67917 86.9674 5.8351C86.7194 5.99103 86.5951 6.22863 86.5951 6.54791C86.5951 6.85977 86.7194 7.1011 86.9674 7.27185C87.216 7.4352 87.7435 7.61341 88.5492 7.80647C89.3623 7.99953 89.9724 8.27053 90.379 8.61949C90.7929 8.96851 90.9999 9.48452 90.9999 10.1676C90.9999 10.8433 90.7405 11.3928 90.2204 11.816C89.701 12.2393 89.0196 12.4509 88.1763 12.4509C86.9412 12.4509 85.8459 12.0314 84.8896 11.1923L85.7249 10.201C86.5232 10.8842 87.3518 11.2257 88.2099 11.2257C88.6393 11.2257 88.9779 11.1366 89.2266 10.9584C89.4826 10.7728 89.6109 10.5314 89.6109 10.2345C89.6109 9.93003 89.49 9.69619 89.2494 9.53283C89.0156 9.36202 88.609 9.20981 88.0291 9.07616C87.4499 8.93511 87.0091 8.80885 86.708 8.6975C86.407 8.5787 86.1395 8.42643 85.9057 8.24083C85.4393 7.89188 85.2055 7.35726 85.2055 6.63702C85.2055 5.91678 85.4689 5.36361 85.9964 4.9775C86.5306 4.58397 87.1898 4.38721 87.9727 4.38721C88.4773 4.38721 88.9779 4.46889 89.4752 4.63224C89.9724 4.79558 90.4012 5.02577 90.7627 5.32277L90.0511 6.31402C89.8179 6.10612 89.5014 5.93534 89.1022 5.80169C88.7031 5.66804 88.308 5.60121 87.9162 5.60121Z"
+        fill={fills[1]}
+      />
+      <path
+        d="M24.047 4.38721C22.8629 4.38721 21.861 4.77008 21.0648 5.54419L21.0634 5.54519C20.2745 6.31948 19.8807 7.2916 19.8807 8.43967C19.8807 9.58585 20.2665 10.5517 21.0433 11.3136L21.0439 11.3146C21.8268 12.0745 22.8072 12.4509 23.9643 12.4509C25.1463 12.4509 26.1536 11.9892 26.9707 11.0839L27.1609 10.8729L25.9722 9.65318L25.7558 9.85645C25.442 10.1501 25.1524 10.3555 24.8869 10.4827C24.6336 10.5973 24.3191 10.6603 23.9334 10.6603C23.3434 10.6603 22.8361 10.4504 22.3966 10.0177C21.9686 9.58323 21.7542 9.05029 21.7542 8.39841C21.7542 7.73954 21.9719 7.22084 22.4006 6.81607L22.402 6.81454C22.8367 6.39839 23.371 6.18802 24.0261 6.18802C24.4071 6.18802 24.7216 6.24839 24.9776 6.35892L24.9797 6.35987C25.2437 6.47129 25.5394 6.67559 25.866 6.98947L26.0904 7.20438L27.2583 5.92696L27.0729 5.72256C26.2665 4.83489 25.2511 4.38721 24.047 4.38721Z"
+        fill={fills[1]}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M47.6624 4.38721C46.5167 4.38721 45.5396 4.77222 44.7521 5.54468C43.9625 6.31199 43.5687 7.27749 43.5687 8.41904C43.5687 9.55454 43.9632 10.5194 44.7514 11.2929L44.7527 11.2939C45.5403 12.0594 46.5173 12.4406 47.6624 12.4406C48.8074 12.4406 49.7845 12.0594 50.572 11.2939L50.5734 11.2929C51.3616 10.5194 51.756 9.55454 51.756 8.41904C51.756 7.27749 51.3623 6.312 50.5727 5.54469C49.7851 4.77223 48.8081 4.38721 47.6624 4.38721ZM45.4207 8.41904C45.4207 7.76676 45.6364 7.22501 46.0671 6.77549C46.5039 6.32689 47.0294 6.10561 47.6624 6.10561C48.2954 6.10561 48.8168 6.32697 49.2462 6.77466L49.2476 6.77617C49.6857 7.22615 49.9034 7.7677 49.9034 8.41904C49.9034 9.06265 49.6864 9.60104 49.2476 10.0516L49.2462 10.0531C48.8168 10.5008 48.2954 10.7222 47.6624 10.7222C47.0294 10.7222 46.5039 10.5009 46.0671 10.0523C45.6357 9.60218 45.4207 9.06359 45.4207 8.41904Z"
+        fill={fills[1]}
+      />
+      <path
+        d="M55.2113 4.38721C54.4439 4.38721 53.7767 4.58367 53.2277 4.99291C52.6605 5.41417 52.3843 6.02137 52.3843 6.77092C52.3843 7.50415 52.6222 8.09878 53.1396 8.49282C53.3768 8.68366 53.6463 8.83835 53.9446 8.95789L53.9514 8.96024C54.2423 9.06951 54.6576 9.18959 55.1898 9.32096L55.1938 9.32176C55.7153 9.4438 56.0345 9.57362 56.1944 9.69243L56.1991 9.69565L56.2038 9.69874C56.3355 9.78966 56.402 9.90967 56.402 10.098C56.402 10.2701 56.3362 10.4048 56.1756 10.523C56.0177 10.6376 55.7791 10.7119 55.4277 10.7119C54.7335 10.7119 54.0461 10.4338 53.36 9.83838L53.1262 9.63551L51.9791 11.0155L52.1975 11.2103C53.1228 12.0336 54.1933 12.4509 55.3968 12.4509C56.2179 12.4509 56.9134 12.2409 57.4537 11.7944C57.9987 11.3443 58.2748 10.7498 58.2748 10.0363C58.2748 9.34239 58.0652 8.77028 57.6029 8.37509C57.1809 8.00799 56.5721 7.74216 55.808 7.55804C55.4458 7.47001 55.1515 7.38669 54.923 7.3084C54.6926 7.22931 54.5461 7.16104 54.4648 7.10769C54.3257 7.00954 54.2571 6.88184 54.2571 6.68852C54.2571 6.48456 54.3277 6.36719 54.4574 6.28486C54.6227 6.17969 54.8498 6.11592 55.1596 6.11592C55.4814 6.11592 55.8087 6.17147 56.144 6.28523C56.4813 6.39984 56.73 6.54009 56.9033 6.69703L57.1567 6.92574L58.1646 5.50194L57.9496 5.32269C57.5874 5.02123 57.1621 4.79104 56.6769 4.62937C56.1937 4.46839 55.7052 4.38721 55.2113 4.38721Z"
+        fill={fills[1]}
+      />
+      <path
+        d="M29.7507 4.56055H27.9297V12.3667H29.7507V9.42066H32.7195V12.3667H34.5406V4.56055H32.7195V7.68166H29.7507V4.56055Z"
+        fill={fills[1]}
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M40.3586 4.56055H38.6659L35.2261 12.3667H37.1862L37.9072 10.7289H41.1173L41.8383 12.3667H43.7984L40.3586 4.56055ZM38.6686 9.00014L39.5126 7.08737L40.3559 9.00014H38.6686Z"
+        fill={fills[1]}
+      />
+    </svg>
+  );
+};
+
+export default ChaosLabsIcon;

src/icons/index.ts

@@ -1,3 +1,4 @@
+import ChaosLabsIcon from './chaos-labs';
 export { default as AddressConnectorIcon } from './address-connector.svg';
 export { default as ArrowIcon } from './arrow.svg';
 export { default as Bar3Icon } from './bar3.svg';
@@ -34,7 +35,6 @@ export { default as HistoryIcon } from './history.svg';
 export { default as LeaderboardIcon } from './leaderboard.svg';
 export { default as LinkOutIcon } from './link-out.svg';
 export { default as LockIcon } from './lock.svg';
-export { default as LogoShortIcon } from './logo-short';
 export { default as MarketsIcon } from './markets.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MigrateIcon } from './migrate.svg';
@@ -90,7 +90,9 @@ export { default as WebsiteIcon } from './website.svg';
 export { default as WhitepaperIcon } from './whitepaper.svg';
 
 // Logos
+export { default as ChaosLabsIcon } from './chaos-labs';
 export { default as EtherscanIcon } from './logos/etherscan.svg';
+export { default as LogoShortIcon } from './logo-short';
 
 // Trade
 export { default as OrderCanceledIcon } from './trade/order-canceled.svg';

src/icons/moon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
 </svg>

src/icons/sun.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M11 1V3.5M18.0711 3.92889L16.3033 5.69667M21 11H18.5M18.0711 18.0711L16.3033 16.3033M11 18.5V21M5.69667 16.3033L3.92889 18.0711M3.5 11H1M5.69667 5.69667L3.92889 3.92889M15.1667 11C15.1667 12.1051 14.7277 13.1649 13.9463 13.9463C13.1649 14.7277 12.1051 15.1667 11 15.1667C9.89493 15.1667 8.83512 14.7277 8.05372 13.9463C7.27232 13.1649 6.83333 12.1051 6.83333 11C6.83333 9.89493 7.27232 8.83512 8.05372 8.05372C8.83512 7.27232 9.89493 6.83333 11 6.83333C12.1051 6.83333 13.1649 7.27232 13.9463 8.05372C14.7277 8.83512 15.1667 9.89493 15.1667 11Z"/>
 </svg>

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/pages/portfolio/AccountDetailsAndHistory.tsx

@@ -272,7 +272,7 @@ Styled.AccountDetail = styled.div<{ gridArea: string }>`
 
 Styled.PnlChart = styled(PnlChart)<{ pnlDiffSign: NumberSign }>`
   grid-area: Chart;
-  background-color: var(--color-layer-1);
+  background-color: var(--color-layer-2);
 
   --pnl-line-color: ${({ pnlDiffSign }) =>
     ({

src/pages/rewards/LaunchIncentivesPanel.tsx

@@ -7,6 +7,8 @@ import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 
+import { ChaosLabsIcon } from '@/icons';
+
 import breakpoints from '@/styles/breakpoints';
 import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
 
@@ -114,7 +116,9 @@ const LaunchIncentivesContent = () => {
       <Styled.Description>
         {stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_DESCRIPTION })}{' '}
       </Styled.Description>
-      <Styled.ChaosLabsLogo src="/logos/chaos-labs.svg" />
+      <Styled.ChaosLabsLogo>
+        {stringGetter({ key: STRING_KEYS.POWERED_BY })} <ChaosLabsIcon />
+      </Styled.ChaosLabsLogo>
       <Styled.ButtonRow>
         <Styled.AboutButton
           action={ButtonAction.Base}
@@ -126,7 +130,7 @@ const LaunchIncentivesContent = () => {
               })
             );
           }}
-          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
+          slotRight={<Icon iconName={IconName.LinkOut} />}
         >
           {stringGetter({ key: STRING_KEYS.ABOUT })}
         </Styled.AboutButton>
@@ -140,7 +144,7 @@ const LaunchIncentivesContent = () => {
               })
             );
           }}
-          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
+          slotRight={<Icon iconName={IconName.LinkOut} />}
           slotLeft={<Icon iconName={IconName.Leaderboard} />}
         >
           {stringGetter({ key: STRING_KEYS.LEADERBOARD })}
@@ -153,7 +157,7 @@ const LaunchIncentivesContent = () => {
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Panel = styled(Panel)`
-  background-color: var(--color-layer-4);
+  background-color: var(--color-layer-3);
   width: 100%;
 `;
 
@@ -200,10 +204,6 @@ Styled.Button = styled(Button)`
   --button-padding: 0 1rem;
 `;
 
-Styled.LinkOutIcon = styled(Icon)`
-  color: var(--color-text-1);
-`;
-
 Styled.AboutButton = styled(Styled.Button)`
   --button-textColor: var(--color-text-2);
   --button-backgroundColor: var(--color-layer-6);
@@ -280,9 +280,10 @@ Styled.Image = styled.img`
   height: auto;
 `;
 
-Styled.ChaosLabsLogo = styled.img`
+Styled.ChaosLabsLogo = styled.span`
-  height: 1.25rem;
+  display: flex;
-  align-self: start;
+  gap: 0.5em;
+  font: var(--font-mini-medium);
 `;
 
 Styled.NewTag = styled(Tag)`

src/state/configs.ts

@@ -12,13 +12,19 @@ export enum AppTheme {
   Light = 'Light',
 }
 
+export enum AppThemeSystemSetting {
+  System = 'System',
+}
+
+export type AppThemeSetting = AppTheme | AppThemeSystemSetting;
+
 export enum AppColorMode {
   GreenUp = 'GreenUp',
   RedUp = 'RedUp',
 }
 
 export interface ConfigsState {
-  appTheme: AppTheme;
+  appThemeSetting: AppThemeSetting;
   appColorMode: AppColorMode;
   feeTiers?: kollections.List<FeeTier>;
   feeDiscounts?: FeeDiscount[];
@@ -26,24 +32,8 @@ export interface ConfigsState {
   hasSeenLaunchIncentives: boolean;
 }
 
-const DOCUMENT_THEME_MAP = {
-  [AppTheme.Classic]: () => {
-    document?.documentElement?.classList.remove('theme-dark', 'theme-light');
-  },
-  [AppTheme.Dark]: () => {
-    document?.documentElement?.classList.remove('theme-light');
-    document?.documentElement?.classList.add('theme-dark');
-  },
-  [AppTheme.Light]: () => {
-    document?.documentElement?.classList.remove('theme-dark');
-    document?.documentElement?.classList.add('theme-light');
-  },
-};
-
-export const changeTheme = (theme: AppTheme) => DOCUMENT_THEME_MAP[theme]();
-
 const initialState: ConfigsState = {
-  appTheme: getLocalStorage({
+  appThemeSetting: getLocalStorage({
     key: LocalStorageKey.SelectedTheme,
     defaultValue: AppTheme.Classic,
   }),
@@ -60,16 +50,13 @@ const initialState: ConfigsState = {
   }),
 };
 
-changeTheme(initialState.appTheme);
-
 export const configsSlice = createSlice({
   name: 'Inputs',
   initialState,
   reducers: {
-    setAppTheme: (state: ConfigsState, { payload }: PayloadAction<AppTheme>) => {
+    setAppThemeSetting: (state: ConfigsState, { payload }: PayloadAction<AppThemeSetting>) => {
       setLocalStorage({ key: LocalStorageKey.SelectedTheme, value: payload });
-      changeTheme(payload);
+      state.appThemeSetting = payload;
-      state.appTheme = payload;
     },
     setAppColorMode: (state: ConfigsState, { payload }: PayloadAction<AppColorMode>) => {
       setLocalStorage({ key: LocalStorageKey.SelectedColorMode, value: payload });
@@ -86,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,6 +1,19 @@
 import type { RootState } from './_store';
+import { AppTheme, AppThemeSystemSetting, AppThemeSetting } from './configs';
 
-export const getAppTheme = (state: RootState) => state.configs.appTheme;
+export const getAppThemeSetting = (state: RootState): AppThemeSetting =>
+  state.configs.appThemeSetting;
+
+export const getAppTheme = (state: RootState): AppTheme => {
+  switch (state.configs.appThemeSetting) {
+    case AppThemeSystemSetting.System:
+      return globalThis.matchMedia('(prefers-color-scheme: dark)').matches
+        ? AppTheme.Dark
+        : AppTheme.Light;
+    default:
+      return state.configs.appThemeSetting;
+  }
+};
 
 export const getAppColorMode = (state: RootState) => state.configs.appColorMode;
 

src/styles/formMixins.ts

@@ -38,7 +38,7 @@ export const formMixins: Record<
     border-radius: var(--input-radius);
 
     &:focus-within {
-      filter: brightness(1.1);
+      filter: brightness(var(--hover-filter-base));
     }
 
     @media ${breakpoints.tablet} {

src/styles/globalStyle.ts

@@ -18,6 +18,7 @@ export const GlobalStyle = createGlobalStyle`
     --color-text-0: ${({ theme }) => theme.textTertiary};
     --color-text-1: ${({ theme }) => theme.textSecondary};
     --color-text-2: ${({ theme }) => theme.textPrimary};
+    --color-text-button: ${({ theme }) => theme.textButton};
 
     --color-gradient-base-0: ${({ theme }) => theme.gradientBase0};
     --color-gradient-base-1: ${({ theme }) => theme.gradientBase1};
@@ -41,5 +42,9 @@ export const GlobalStyle = createGlobalStyle`
     --color-risk-low: ${({ theme }) => theme.riskLow};
     --color-risk-medium: ${({ theme }) => theme.riskMedium};
     --color-risk-high: ${({ theme }) => theme.riskHigh};
+
+    --hover-filter-base: ${({ theme }) => theme.hoverFilterBase};
+    --hover-filter-variant: ${({ theme }) => theme.hoverFilterVariant};
+    --active-filter: ${({ theme }) => theme.activeFilter};
   }
 `;

src/styles/popoverMixins.ts

@@ -21,8 +21,8 @@ export const popoverMixins = {
     --trigger-open-backgroundColor: var(--color-layer-1);
     --trigger-open-textColor: var(--color-text-2);
 
-    --trigger-active-filter: brightness(0.9);
+    --trigger-active-filter: brightness(var(--active-filter));
-    --trigger-hover-filter: brightness(1.1);
+    --trigger-hover-filter: brightness(var(--hover-filter-base));
 
     display: flex;
     align-items: center;
@@ -219,7 +219,7 @@ export const popoverMixins = {
       &[aria-selected="true"], // cmdk
       &[data-highlighted] // @radix-ui
       {
-        filter: brightness(1.1);
+        filter: brightness(var(--hover-filter-base));
         background-color: var(--item-highlighted-backgroundColor);
         color: var(--item-highlighted-textColor, var(--trigger-textColor, inherit)) !important;
         outline: none;

src/styles/themes.ts

@@ -1,6 +1,6 @@
 import { AppTheme, AppColorMode } from '@/state/configs';
 import type { Theme, ThemeColorBase } from '@/constants/styles/colors';
-import { ColorToken, OpacityToken } from '@/constants/styles/base';
+import { BrightnessFilterToken, ColorToken, OpacityToken } from '@/constants/styles/base';
 import { generateFadedColorVariant } from '@/lib/styles';
 
 const ClassicThemeBase: ThemeColorBase = {
@@ -20,6 +20,7 @@ const ClassicThemeBase: ThemeColorBase = {
   textPrimary: ColorToken.LightGray2,
   textSecondary: ColorToken.GrayPurple1,
   textTertiary: ColorToken.GrayPurple2,
+  textButton: ColorToken.LightGray2,
 
   gradientBase0: ColorToken.DarkGray9,
   gradientBase1: ColorToken.GrayBlue2,
@@ -53,6 +54,10 @@ const ClassicThemeBase: ThemeColorBase = {
   switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.GrayBlue3,
   tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
+
+  hoverFilterBase: BrightnessFilterToken.Lighten10,
+  hoverFilterVariant: BrightnessFilterToken.Lighten10,
+  activeFilter: BrightnessFilterToken.Darken10,
 };
 
 const DarkThemeBase: ThemeColorBase = {
@@ -72,6 +77,7 @@ const DarkThemeBase: ThemeColorBase = {
   textPrimary: ColorToken.LightGray0,
   textSecondary: ColorToken.MediumGray0,
   textTertiary: ColorToken.DarkGray0,
+  textButton: ColorToken.LightGray0,
 
   gradientBase0: ColorToken.DarkGray8,
   gradientBase1: ColorToken.DarkGray5,
@@ -105,6 +111,10 @@ const DarkThemeBase: ThemeColorBase = {
   switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.DarkGray6,
   tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
+
+  hoverFilterBase: BrightnessFilterToken.Lighten10,
+  hoverFilterVariant: BrightnessFilterToken.Lighten10,
+  activeFilter: BrightnessFilterToken.Darken10,
 };
 
 const LightThemeBase: ThemeColorBase = {
@@ -124,6 +134,7 @@ const LightThemeBase: ThemeColorBase = {
   textPrimary: ColorToken.DarkGray12,
   textSecondary: ColorToken.DarkGray3,
   textTertiary: ColorToken.DarkGray1,
+  textButton: ColorToken.White,
 
   gradientBase0: ColorToken.LightGray8,
   gradientBase1: ColorToken.LightGray5,
@@ -157,6 +168,10 @@ const LightThemeBase: ThemeColorBase = {
   switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.LightGray4,
   tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),
+
+  hoverFilterBase: BrightnessFilterToken.Darken5,
+  hoverFilterVariant: BrightnessFilterToken.Lighten10,
+  activeFilter: BrightnessFilterToken.Darken10,
 };
 
 const generateTheme = (themeBase: ThemeColorBase): Theme => {

src/views/charts/PnlChart.tsx

@@ -9,34 +9,30 @@ import {
   HistoricalPnlPeriods,
   HISTORICAL_PNL_PERIODS,
 } from '@/constants/abacus';
-// import { STRING_KEYS } from '@/constants/localization';
 import { timeUnits } from '@/constants/time';
 import { breakpoints } from '@/styles';
 
-import { useBreakpoints, useNow /*, useStringGetter*/ } from '@/hooks';
+import { useBreakpoints, useNow } from '@/hooks';
 
-// import { Details } from '@/components/Details';
+import { Output } from '@/components/Output';
-import { Output /*, OutputType, ShowSign*/ } from '@/components/Output';
-// import { HorizontalSeparator } from '@/components/Separator';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
 import type { TooltipContextType } from '@visx/xychart';
 import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
-// import { TooltipContent } from '@/components/visx/TooltipContent';
 
 import {
   getSubaccount,
   getSubaccountHistoricalPnl,
   getSubaccountId,
 } from '@/state/accountSelectors';
+import { AppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { formatRelativeTime } from '@/lib/dateTime';
 import { isTruthy } from '@/lib/isTruthy';
 
-import chartBackground from '/chart-background.png';
-
 enum PnlSide {
   Profit = 'Profit',
   Loss = 'Loss',
@@ -62,6 +58,9 @@ const MS_FOR_PERIOD = {
   [HistoricalPnlPeriod.Period90d.name]: 90 * timeUnits.day,
 };
 
+const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
+const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
+
 type ElementProps = {
   onTooltipContext?: (tooltipContext: TooltipContextType<PnlDatum>) => void;
   onVisibleDataChange?: (data: Array<PnlDatum>) => void;
@@ -82,8 +81,8 @@ export const PnlChart = ({
   selectedLocale,
   slotEmpty,
 }: PnlChartProps) => {
-  // const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
+  const appTheme = useSelector(getAppTheme);
   const { equity } = useSelector(getSubaccount, shallowEqual) || {};
   const now = useNow({ intervalMs: timeUnits.minute });
 
@@ -171,10 +170,11 @@ export const PnlChart = ({
     [pnlData, equity, selectedPeriod, now]
   );
 
-  // const latestDatum = data?.[data.length - 1];
+  const chartBackground =
+    appTheme === AppTheme.Light ? LIGHT_CHART_BACKGROUND_URL : DARK_CHART_BACKGROUND_URL;
 
   return (
-    <Styled.Container className={className}>
+    <Styled.Container className={className} chartBackground={chartBackground}>
       <TimeSeriesChart
         id="pnl-chart"
         selectedLocale={selectedLocale}
@@ -198,25 +198,6 @@ export const PnlChart = ({
             yAccessor: (datum) => datum?.equity,
             colorAccessor: () => 'var(--pnl-line-color)',
             getCurve: () => curveLinear,
-            // getCurve: ({ zoomDomain }) =>
-            //   PNL_TIME_RESOLUTION * 30 < zoomDomain && zoomDomain < PNL_TIME_RESOLUTION * 400
-            //     ? curveMonotoneX
-            //     : curveLinear,
-            // threshold: {
-            //   yAccessor: (datum) => datum?.netTransfers,
-            //   aboveAreaProps: {
-            //     fill: 'var(--color-positive)',
-            //     fillOpacity: 0.33,
-            //     strokeWidth: 1,
-            //     stroke: 'var(--color-positive)',
-            //   },
-            //   belowAreaProps: {
-            //     fill: 'var(--color-negative)',
-            //     fillOpacity: 0.33,
-            //     strokeWidth: 1,
-            //     stroke: 'var(--color-negative)',
-            //   },
-            // },
           },
         ]}
         tickFormatY={(value) =>
@@ -229,98 +210,6 @@ export const PnlChart = ({
             .format(Math.abs(value))
             .toLowerCase()
         }
-        // renderXAxisLabel={({ tooltipData }) => {
-        //   const tooltipDatum = tooltipData!.nearestDatum!.datum ?? latestDatum;
-
-        //   return (
-        //     <Styled.XAxisLabelOutput type={OutputType.DateTime} value={tooltipDatum.createdAt} />
-        //   );
-        // }}
-        // renderYAxisLabel={({ tooltipData }) => {
-        //   const tooltipDatum = tooltipData!.nearestDatum!.datum ?? latestDatum;
-
-        //   return (
-        //     <Styled.YAxisLabelOutput
-        //       type={OutputType.CompactFiat}
-        //       value={tooltipDatum.totalPnl}
-        //       accentColor={
-        //         {
-        //           [PnlSide.Loss]: 'var(--color-negative)',
-        //           [PnlSide.Profit]: 'var(--color-positive)',
-        //           [PnlSide.Flat]: 'var(--color-layer-6)',
-        //         }[tooltipDatum.side]
-        //       }
-        //     />
-        //   );
-        // }}
-        // renderTooltip={({ tooltipData }) => {
-        //   const { nearestDatum } = tooltipData || {};
-
-        //   const tooltipDatum = nearestDatum?.datum ?? latestDatum;
-
-        //   return (
-        //     <TooltipContent
-        //       accentColor={
-        //         {
-        //           [PnlSide.Loss]: 'var(--color-negative)',
-        //           [PnlSide.Profit]: 'var(--color-positive)',
-        //           [PnlSide.Flat]: 'var(--color-layer-6)',
-        //         }[tooltipDatum.side]
-        //       }
-        //     >
-        //       <Details
-        //         layout="column"
-        //         items={[
-        //           {
-        //             key: 'createdAt',
-        //             label: stringGetter({ key: STRING_KEYS.TIME }),
-        //             value: <Output type={OutputType.DateTime} value={tooltipDatum.createdAt} />,
-        //           },
-        //         ].filter(Boolean)}
-        //       />
-
-        //       <HorizontalSeparator />
-
-        //       <Details
-        //         layout="column"
-        //         items={[
-        //           {
-        //             key: 'netTransfers',
-        //             label: stringGetter({ key: STRING_KEYS.NET_TRANSFERS }),
-        //             value: <Output type={OutputType.Fiat} value={tooltipDatum.netTransfers} />,
-        //           },
-        //           {
-        //             key: 'equity',
-        //             label: {
-        //               [PnlSide.Profit]: stringGetter({
-        //                 key: STRING_KEYS.NET_PROFIT,
-        //               }),
-        //               [PnlSide.Loss]: stringGetter({
-        //                 key: STRING_KEYS.NET_LOSS,
-        //               }),
-        //               [PnlSide.Flat]: stringGetter({
-        //                 key: STRING_KEYS.NET_ZERO,
-        //               }),
-        //             }[tooltipDatum.side],
-        //             value: (
-        //               <Styled.SignedOutput
-        //                 type={OutputType.Fiat}
-        //                 value={tooltipDatum.equity}
-        //                 showSign={ShowSign.Both}
-        //                 side={tooltipDatum.side}
-        //               />
-        //             ),
-        //           },
-        //           {
-        //             key: 'totalPnl',
-        //             label: stringGetter({ key: STRING_KEYS.TOTAL_VALUE }), // stringGetter({ key: STRING_KEYS.EQUITY }),
-        //             value: <Output type={OutputType.Fiat} value={tooltipDatum.totalPnl} />,
-        //           },
-        //         ].filter(Boolean)}
-        //       />
-        //     </TooltipContent>
-        //   );
-        // }}
         renderTooltip={() => <div />}
         onTooltipContext={onTooltipContext}
         onVisibleDataChange={onVisibleDataChange}
@@ -358,9 +247,9 @@ export const PnlChart = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Container = styled.div`
+Styled.Container = styled.div<{ chartBackground: string }>`
   position: relative;
-  background: url(${chartBackground}) no-repeat center center;
+  background: url(${({ chartBackground }) => chartBackground}) no-repeat center center;
 `;
 
 Styled.PeriodToggle = styled.div`

src/views/dialogs/DisplaySettingsDialog.tsx

@@ -5,8 +5,15 @@ import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
 
 import { useStringGetter } from '@/hooks';
 
-import { AppTheme, AppColorMode, setAppTheme, setAppColorMode } from '@/state/configs';
+import {
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+  AppTheme,
+  type AppThemeSetting,
+  AppThemeSystemSetting,
+  AppColorMode,
+  setAppThemeSetting,
+  setAppColorMode,
+} from '@/state/configs';
+import { getAppTheme, getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
@@ -25,12 +32,14 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
   const dispatch = useDispatch();
   const stringGetter = useStringGetter();
 
+  const currentThemeSetting: AppThemeSetting = useSelector(getAppThemeSetting);
   const currentTheme: AppTheme = useSelector(getAppTheme);
   const currentColorMode: AppColorMode = useSelector(getAppColorMode);
 
   const sectionHeader = (heading: string) => {
     return (
       <Styled.Header>
+        {heading}
         {heading}
         <HorizontalSeparatorFiller />
       </Styled.Header>
@@ -39,31 +48,47 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
 
   const themePanels = () => {
     return (
-      <Styled.AppThemeRoot value={currentTheme}>
+      <Styled.AppThemeRoot value={currentThemeSetting}>
         {[
           {
-            theme: AppTheme.Classic,
+            themeSetting: AppTheme.Classic,
             label: STRING_KEYS.CLASSIC_DARK,
           },
           {
-            theme: AppTheme.Dark,
+            themeSetting: AppThemeSystemSetting.System,
+            label: STRING_KEYS.SYSTEM,
+          },
+          {
+            themeSetting: AppTheme.Dark,
             label: STRING_KEYS.DARK,
           },
           {
-            theme: AppTheme.Light,
+            themeSetting: AppTheme.Light,
             label: STRING_KEYS.LIGHT,
           },
-        ].map(({ theme, label }) => (
+        ].map(({ themeSetting, label }) => {
+          const theme =
+            themeSetting === AppThemeSystemSetting.System
+              ? globalThis.matchMedia('(prefers-color-scheme: dark)').matches
+                ? AppTheme.Dark
+                : AppTheme.Light
+              : themeSetting;
+
+          const backgroundColor = Themes[theme][currentColorMode].layer2;
+          const gridColor = Themes[theme][currentColorMode].borderDefault;
+          const textColor = Themes[theme][currentColorMode].textPrimary;
+
+          return (
             <Styled.AppThemeItem
-            key={theme}
+              key={themeSetting}
-            value={theme}
+              value={themeSetting}
-            backgroundcolor={Themes[theme][currentColorMode].layer2}
+              backgroundcolor={backgroundColor}
-            gridcolor={Themes[theme][currentColorMode].borderDefault}
+              gridcolor={gridColor}
               onClick={() => {
-              dispatch(setAppTheme(theme));
+                dispatch(setAppThemeSetting(themeSetting));
               }}
             >
-            <Styled.AppThemeHeader textcolor={Themes[theme][currentColorMode].textPrimary}>
+              <Styled.AppThemeHeader textcolor={textColor}>
                 {stringGetter({ key: label })}
               </Styled.AppThemeHeader>
               <Styled.Image src="/chart-bars.svg" />
@@ -71,7 +96,8 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
                 <Styled.CheckIcon iconName={IconName.Check} />
               </Styled.CheckIndicator>
             </Styled.AppThemeItem>
-        ))}
+          );
+        })}
       </Styled.AppThemeRoot>
     );
   };
@@ -314,7 +340,7 @@ Styled.CheckIndicator = styled(Indicator)`
   right: var(--item-padding);
 
   background-color: var(--color-accent);
-  color: var(--color-text-2);
+  color: var(--color-text-button);
 `;
 
 Styled.CheckIcon = styled(Icon)`

src/views/dialogs/MnemonicExportDialog.tsx

@@ -189,7 +189,7 @@ Styled.WordList = styled.div<{ isShowing?: boolean }>`
   padding: 1rem;
 
   &:hover {
-    filter: brightness(1.1);
+    filter: brightness(var(--hover-filter-base));
   }
 
   > :first-child {

src/views/dialogs/MobileSignInDialog.tsx

@@ -183,7 +183,7 @@ Styled.QrCodeContainer = styled.figure<{ isShowing: boolean }>`
   transition: 0.2s;
 
   &:hover {
-    filter: brightness(1.1);
+    filter: brightness(var(--hover-filter-base));
   }
 
   > * {

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));
           },
         },
       ],