More themeing, set color-scheme on body when changing theme

packages/web/components/elements/LogoBox.tsx

@@ -1,4 +1,5 @@
 import { LIBRARY_LEFT_MENU_WIDTH } from '../templates/homeFeed/LibraryFilterMenu'
+import { theme } from '../tokens/stitches.config'
 import { OmnivoreFullLogo } from './images/OmnivoreFullLogo'
 import { OmnivoreNameLogo } from './images/OmnivoreNameLogo'
 import { SpanBox } from './LayoutPrimitives'
@@ -17,7 +18,10 @@ export function LogoBox(): JSX.Element {
           },
         }}
       >
-        <OmnivoreFullLogo showTitle={true} />
+        <OmnivoreFullLogo
+          showTitle={true}
+          color={theme.colors.thHighContrast.toString()}
+        />
       </SpanBox>
       <SpanBox
         css={{

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -36,7 +36,7 @@ const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => {
   const LineSeparator = styled(Separator, {
     width: '100%',
     margin: 0,
-    borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
+    borderBottom: `1px solid ${theme.colors.thHighContrast.toString()}`,
     my: '8px',
   })
   return props.layout == 'side' ? <LineSeparator /> : <></>
@@ -79,7 +79,10 @@ export function ArticleActionsMenu(
                   tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
                 >
                   <SpanBox ref={displaySettingsButtonRef}>
-                    <TagSimple size={24} color="#3D3D3D" />
+                    <TagSimple
+                      size={24}
+                      color={theme.colors.thHighContrast.toString()}
+                    />
                   </SpanBox>
                 </TooltipWrapped>
               </Button>
@@ -124,7 +127,10 @@ export function ArticleActionsMenu(
                 },
               }}
             >
-              <TagSimple size={24} color="#3D3D3D" />
+              <TagSimple
+                size={24}
+                color={theme.colors.thHighContrast.toString()}
+              />
             </Button>
           )}
         </SpanBox>
@@ -139,7 +145,7 @@ export function ArticleActionsMenu(
             },
           }}
         >
-          <TagSimple size={24} color="#3D3D3D" />
+          <TagSimple size={24} color={theme.colors.thHighContrast.toString()} />
         </Button>
 
         <Button
@@ -150,7 +156,10 @@ export function ArticleActionsMenu(
             tooltipContent="View Highlights"
             tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
           >
-            <HighlighterCircle size={24} color="#3D3D3D" />
+            <HighlighterCircle
+              size={24}
+              color={theme.colors.thHighContrast.toString()}
+            />
           </TooltipWrapped>
         </Button>
 
@@ -162,7 +171,7 @@ export function ArticleActionsMenu(
             tooltipContent="Edit title & description"
             tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
           >
-            <Info size={24} color="#3D3D3D" />
+            <Info size={24} color={theme.colors.thHighContrast.toString()} />
           </TooltipWrapped>
         </Button>
 
@@ -178,7 +187,7 @@ export function ArticleActionsMenu(
             tooltipContent="Delete"
             tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
           >
-            <Trash size={24} color="#3D3D3D" />
+            <Trash size={24} color={theme.colors.thHighContrast.toString()} />
           </TooltipWrapped>
         </Button>
 
@@ -191,7 +200,10 @@ export function ArticleActionsMenu(
               tooltipContent="Archive"
               tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
             >
-              <ArchiveBox size={24} color="#3D3D3D" />
+              <ArchiveBox
+                size={24}
+                color={theme.colors.thHighContrast.toString()}
+              />
             </TooltipWrapped>
           </Button>
         ) : (
@@ -203,7 +215,7 @@ export function ArticleActionsMenu(
               tooltipContent="Unarchive"
               tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
             >
-              <Tray size={24} color="#3D3D3D" />
+              <Tray size={24} color={theme.colors.thHighContrast.toString()} />
             </TooltipWrapped>
           </Button>
         )}

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

@@ -318,7 +318,11 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
     >
       <Circle size={9} color={props.label.color} weight="fill" />
       <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
-      <SpanBox css={{ ml: 'auto' }}>
+      <SpanBox
+        css={{
+          ml: 'auto',
+        }}
+      >
         <input
           type="checkbox"
           checked={state === 'on'}

packages/web/components/templates/reader/ReaderHeader.tsx

@@ -6,6 +6,7 @@ import { TooltipWrapped } from '../../elements/Tooltip'
 import { LogoBox } from '../../elements/LogoBox'
 import { ReactNode } from 'react'
 import { LIBRARY_HEADER_MOBILE_HEIGHT } from '../homeFeed/LibraryHeader'
+import { theme } from '../../tokens/stitches.config'
 
 const HEADER_HEIGHT = '105px'
 
@@ -81,30 +82,16 @@ function ControlButtonBox(props: ReaderHeaderProps): JSX.Element {
           }}
         >
           <TooltipWrapped tooltipContent="Adjust Display Settings">
-            <TextAa size={25} color="#6A6968" />
+            <TextAa size={25} color={theme.colors.thHighContrast.toString()} />
           </TooltipWrapped>
         </Button>
         <PrimaryDropdown showThemeSection={false}>
-          <DotsThreeOutline size={25} color="#6A6968" />
+          <DotsThreeOutline
+            size={25}
+            color={theme.colors.thHighContrast.toString()}
+          />
         </PrimaryDropdown>
       </HStack>
-
-      {/* <HStack
-        alignment="center"
-        distribution="end"
-        css={{
-          marginLeft: 'auto',
-          marginRight: '20px',
-          width: '100px',
-          height: '100%',
-          gap: '20px',
-          '@md': {
-            display: 'none',
-          },
-        }}
-      >
-        <PrimaryDropdown showThemeSection={false} />
-      </HStack> */}
     </>
   )
 }

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

@@ -109,8 +109,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       },
       zIndices: {},
       transitions: {},
+
+      colorScheme: {
+        colorScheme: 'light',
+      },
+
       colors: {
-        // Grayscale
         grayBase: '#F8F8F8',
         grayBg: '#FFFFFF',
         grayBgActive: '#e6e6e6',
@@ -191,7 +195,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
         thProgressFg: '#FFD234',
 
-        thHighContrast: '#D9D9D9',
+        thHighContrast: '#3D3D3D',
       },
     },
     media: {
@@ -209,6 +213,9 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
   })
 
 const darkThemeSpec = {
+  colorScheme: {
+    colorScheme: 'dark',
+  },
   colors: {
     grayBase: '#252525',
     grayBg: '#3B3938',
@@ -260,6 +267,7 @@ const darkThemeSpec = {
     // New theme, special naming to keep things straigh
     // once all switch over, we will rename
     // DARK
+    colorScheme: 'dark',
     thBackground: '#2A2A2A',
     thBackground2: '#3D3D3D',
     thBackground3: '#242424',
@@ -329,6 +337,7 @@ export const lighterTheme = createTheme(ThemeId.Lighter, {})
 // Apply global styles in here
 export const globalStyles = globalCss({
   body: {
+    colorScheme: 'var(--colorScheme-colorScheme)',
     backgroundColor: '$thBackground2',
   },
   '*': {