Move theme and color scheme setting to the documentElement

In theory this is more correct and could help with issues of
color-scheme not being set correctly in the reader on iOS and
Android.

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift

@@ -116,6 +116,7 @@ struct WebReader: PlatformViewRepresentable {
       (webView as? OmnivoreWebView)?.updateJustifyText()
 
       webView.backgroundColor = UIColor(ThemeManager.currentBgColor)
+      webView.tintColor = UIColor.black
       webView.underPageBackgroundColor = UIColor(ThemeManager.currentBgColor)
       webView.scrollView.backgroundColor = UIColor(ThemeManager.currentBgColor)
       webView.scrollView.indicatorStyle = ThemeManager.currentTheme.isDark ?

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

@@ -288,6 +288,9 @@ const blackThemeSpec = {
 }
 
 const sepiaThemeSpec = {
+  colorScheme: {
+    colorScheme: 'light',
+  },
   colors: {
     readerBg: '#FBF0D9',
     readerFont: '#5F4B32',

packages/web/lib/themeUpdater.tsx

@@ -44,7 +44,7 @@ export function updateThemeLocally(themeId: string): void {
     window.localStorage.setItem(themeKey, themeId)
   }
 
-  document.body.classList.remove(
+  document.documentElement.classList.remove(
     ...Object.keys(LEGACY_THEMES),
     sepiaTheme,
     darkTheme,
@@ -52,7 +52,7 @@ export function updateThemeLocally(themeId: string): void {
     blackTheme,
     ...Object.keys(ThemeId)
   )
-  document.body.classList.add(getTheme(themeId))
+  document.documentElement.classList.add(getTheme(themeId))
 }
 
 export function currentThemeName(): string {

packages/web/styles/articleInnerStyling.css

@@ -3,7 +3,7 @@
 }
 
 :root {
-  color-scheme: var(--colorScheme-colorScheme);
+  color-scheme: light;
 }
 
 .speakingSection {