set darkMode as default

Author: foxier25

src/nft/css/sprinkles.css.ts

@@ -165,8 +165,13 @@ export const vars = createGlobalTheme(':root', {
     white: '#FFF',
 
     // new uniswap colors:
-    blue400: '#4C82FB',
+    blue100: '#DEE1FF',
     blue200: '#ADBCFF30',
+    blue300: '#869EFF',
+    blue400: '#4C82FB',
+    blue500: '#1267D6',
+    blue600: '#1D4294',
+    blue700: '#09265E',
     pink400: '#FB118E',
     red700: '#530f10',
     red400: '#FA2C38',

src/pages/Landing/index.tsx

@@ -111,7 +111,7 @@ const TitleText = styled.h1<{ isDarkMode: boolean }>`
   margin: 0 0 24px;
   background: ${({ isDarkMode }) =>
     isDarkMode
-      ? 'linear-gradient(20deg,rgb(129 92 255) 10%,rgb(255 47 47) 99.8%)'
+      ? 'linear-gradient(20deg,rgb(60,160,250,1) 10%,rgb(40,100,200,1) 99.8%)'
       : 'linear-gradient(10deg, rgba(20,20,20,1) 0%, rgba(0,55,130,1) 100%)'};
   background-clip: text;
   -webkit-background-clip: text;

src/state/user/hooks.tsx

@@ -49,15 +49,7 @@ function deserializeToken(serializedToken: SerializedToken, Class: typeof Token
 }
 
 export function useIsDarkMode(): boolean {
-  const { userDarkMode, matchesDarkMode } = useAppSelector(
-    ({ user: { matchesDarkMode, userDarkMode } }) => ({
-      userDarkMode,
-      matchesDarkMode,
-    }),
-    shallowEqual
-  )
-
-  return userDarkMode === null ? matchesDarkMode : userDarkMode
+  return true;
 }
 
 export function useDarkModeManager(): [boolean, () => void] {

src/theme/colors.ts

@@ -140,15 +140,15 @@ export const darkTheme = {
   textSecondary: colors.gray300,
   textTertiary: colors.gray500,
 
-  accentAction: colors.blue400,
-  accentActive: colors.blue400,
+  accentAction: colors.blue500,
+  accentActive: colors.blue700,
   accentSuccess: colors.green200,
   accentWarning: colors.gold200,
   accentFailure: colors.red300,
   accentCritical: colors.red300,
 
   accentActionSoft: opacify(24, colors.blue400),
-  accentActiveSoft: opacify(24, colors.blue400),
+  accentActiveSoft: opacify(24, colors.blue700),
   accentSuccessSoft: opacify(24, colors.green400),
   accentWarningSoft: opacify(24, colors.gold200),
   accentFailureSoft: opacify(12, colors.red300),
@@ -192,15 +192,15 @@ export const lightTheme: Theme = {
   textSecondary: colors.gray400,
   textTertiary: colors.gray300,
 
-  accentAction: colors.blue700,
-  accentActive: colors.blue400,
+  accentAction: colors.blue400,
+  accentActive: colors.blue700,
   accentSuccess: colors.green300,
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
   accentCritical: colors.red400,
 
-  accentActionSoft: opacify(24, colors.blue700),
-  accentActiveSoft: opacify(24, colors.blue400),
+  accentActionSoft: opacify(24, colors.blue400),
+  accentActiveSoft: opacify(24, colors.blue700),
   accentSuccessSoft: opacify(24, colors.green300),
   accentWarningSoft: opacify(24, colors.gold200),
   accentFailureSoft: opacify(12, colors.red400),
@@ -218,7 +218,7 @@ export const lightTheme: Theme = {
   shallowShadow:
     '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
 
-  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.blue700)}`,
+  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.blue400)}`,
 
   stateOverlayHover: opacify(8, colors.gray300),
   stateOverlayPressed: opacify(24, colors.gray200),