Light mode theme cleanup

packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx

@@ -10,7 +10,6 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { theme } from '../../tokens/stitches.config'
 import { currentThemeName } from '../../../lib/themeUpdater'
 import { useRegisterActions } from 'kbar'
-import { HEADER_HEIGHT } from './HeaderSpacer'
 import { LogoBox } from '../../elements/LogoBox'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '233px'
@@ -33,10 +32,9 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
           left: '0px',
           top: '0px',
           position: 'fixed',
-          bg: '#1D1D1D', // $thBackground',
+          bg: '$thLeftMenuBackground',
           height: '100%',
           width: LIBRARY_LEFT_MENU_WIDTH,
-          // borderRight: '1px solid $thBorderColor',
           overflowY: 'auto',
           overflowX: 'hidden',
           '&::-webkit-scrollbar': {
@@ -67,10 +65,6 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         <SavedSearches {...props} />
         <Subscriptions {...props} />
         <Labels {...props} />
-        {/* 
-        <AddLinkButton
-          showAddLinkModal={() => props.setShowAddLinkModal(true)}
-        /> */}
         <Box css={{ height: '250px ' }} />
       </Box>
       {/* This spacer pushes library content to the right of 

packages/web/components/tokens/stitches.config.ts

@@ -172,6 +172,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackground5: '#F5F5F5',
         thBackgroundActive: '#F9F9F9',
         thBackgroundContrast: '#FFFFFF',
+        thLeftMenuBackground: '$thBackground',
+        thLibraryBackground: '$thBackground2',
 
         thTextContrast: '#1E1E1E',
         thTextContrast2: '#3D3D3D',
@@ -259,6 +261,8 @@ const darkThemeSpec = {
     thBackground5: '#3D3D3D',
     thBackgroundActive: '#2E2E2E',
     thBackgroundContrast: '#000000',
+    thLeftMenuBackground: '#1D1D1D',
+    thLibraryBackground: '#333333',
 
     thTextContrast: '#FFFFFF',
     thTextContrast2: '#EBEBEB',

packages/web/pages/home.tsx

@@ -18,7 +18,7 @@ function LoadedContent(): JSX.Element {
       <VStack
         alignment="center"
         distribution="center"
-        css={{ backgroundColor: '#333333' }}
+        css={{ backgroundColor: '$thLibraryBackground' }}
       >
         <HomeFeedContainer />
       </VStack>