Add ability to toggle higher contrast text in the reader

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

@@ -32,6 +32,7 @@ type ArticleContainerProps = {
   fontSize?: number
   fontFamily?: string
   lineHeight?: number
+  highContrastFont?: boolean
   showHighlightsModal: boolean
   setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
@@ -48,6 +49,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [fontFamilyOverride, setFontFamilyOverride] = useState<string | null>(
     null
   )
+  const [highContrastFont, setHighContrastFont] = useState(props.highContrastFont ?? false)
   const highlightHref = useRef(
     window.location.hash ? window.location.hash.split('#')[1] : null
   )
@@ -117,6 +119,15 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       setFontFamilyOverride(newFontFamily)
     }
 
+    interface UpdateFontContrastEvent extends Event {
+      fontContrast?: 'high' | 'normal'
+    }
+
+    const handleFontContrastChange = async (event: UpdateFontContrastEvent) => {
+      const highContrast = event.fontContrast == 'high'
+      setHighContrastFont(highContrast)
+    }
+
     interface UpdateFontSizeEvent extends Event {
       fontSize?: number
     }
@@ -151,6 +162,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     document.addEventListener('updateMargin', updateMargin)
     document.addEventListener('updateFontSize', handleFontSizeChange)
     document.addEventListener('updateColorMode', updateColorMode)
+    document.addEventListener('handleFontContrastChange', handleFontContrastChange)
     document.addEventListener('share', share)
 
     return () => {
@@ -159,6 +171,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       document.removeEventListener('updateMargin', updateMargin)
       document.removeEventListener('updateFontSize', handleFontSizeChange)
       document.removeEventListener('updateColorMode', updateColorMode)
+      document.removeEventListener('handleFontContrastChange', handleFontContrastChange)
       document.removeEventListener('share', share)
     }
   })
@@ -168,7 +181,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     margin: marginOverride ?? props.margin ?? 360,
     lineHeight: lineHeightOverride ?? props.lineHeight ?? 150,
     fontFamily: fontFamilyOverride ?? props.fontFamily ?? 'inter',
-    readerFontColor: theme.colors.readerFont.toString(),
+    readerFontColor: highContrastFont ? theme.colors.readerFontHighContrast.toString() : theme.colors.readerFont.toString(),
     readerFontColorTransparent: theme.colors.readerFontTransparent.toString(),
     readerTableHeaderColor: theme.colors.readerTableHeader.toString(),
     readerHeadersColor: theme.colors.readerHeader.toString(),

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

@@ -139,6 +139,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // Reader Colors
         readerBg: '#E5E5E5',
         readerFont: '#3D3D3D',
+        readerFontHighContrast: 'black',
         readerFontTransparent: 'rgba(61,61,61,0.65)',
         readerHeader: '3D3D3D',
         readerTableHeader: '#FFFFFF',
@@ -194,6 +195,7 @@ const darkThemeSpec = {
     // Reader Colors
     readerBg: '#303030',
     readerFont: '#b9b9b9',
+    readerFontHighContrast: 'black',
     readerFontTransparent: 'rgba(185,185,185,0.65)',
     readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',