render correct color mode in privacy and term web embeds [apple]

apple/OmnivoreKit/Sources/Views/Article/WebAppViewCoordinator.swift

@@ -126,7 +126,7 @@ extension WKWebView {
     }
   }
 
-  private func injectCookie(cookieString: String?, url: URL) {
+  func injectCookie(cookieString: String?, url: URL) {
     if let cookieString = cookieString {
       for cookie in HTTPCookie.cookies(withResponseHeaderFields: ["Set-Cookie": cookieString], for: url) {
         configuration.websiteDataStore.httpCookieStore.setCookie(cookie) {}

apple/OmnivoreKit/Sources/Views/Web/BasicWebAppView.swift

@@ -18,6 +18,10 @@ import WebKit
       webView.scrollView.isScrollEnabled = true
       webView.isOpaque = false
       webView.backgroundColor = UIColor.clear
+      if let url = request.url {
+        let themeID = UITraitCollection.current.userInterfaceStyle == .dark ? "Gray" : "LightGray"
+        webView.injectCookie(cookieString: "theme=\(themeID); Max-Age=31536000;", url: url)
+      }
       return webView
     }
 
@@ -43,7 +47,14 @@ import WebKit
     }
 
     public func makeNSView(context _: Context) -> WKWebView {
-      WebView(frame: CGRect.zero)
+      let webView = WebView(frame: CGRect.zero)
+      if let url = request.url {
+        // Dark mode is still rendering a white background on mac for some reason.
+        // Forcing light mode for now until we figure out a fix
+        let themeID = "LightGray" // NSApp.effectiveAppearance.name == NSAppearance.Name.darkAqua ? "Gray" : "LightGray"
+        webView.injectCookie(cookieString: "theme=\(themeID); Max-Age=31536000;", url: url)
+      }
+      return webView
     }
 
     public func updateNSView(_ webView: WKWebView, context: Context) {

packages/web/components/templates/PrivacyPolicy.tsx

@@ -5,11 +5,15 @@ import {
   StyledList,
 } from '../elements/StyledText'
 
-export function PrivacyPolicy(): JSX.Element {
+type PrivacyPolicyProps = {
+  isAppEmbed?: boolean
+}
+
+export function PrivacyPolicy(props: PrivacyPolicyProps): JSX.Element {
   return (
     <Box
       css={{
-        bg: '$grayBase',
+        bg: props.isAppEmbed ? '#ffffff00' : '$grayBase',
         px: '$1',
         py: '$3',
         mx: '$3',

packages/web/components/templates/TermsAndConditions.tsx

@@ -5,11 +5,17 @@ import {
   StyledList,
 } from '../elements/StyledText'
 
-export function TermsAndConditions(): JSX.Element {
+type TermsAndConditionsProps = {
+  isAppEmbed?: boolean
+}
+
+export function TermsAndConditions(
+  props: TermsAndConditionsProps
+): JSX.Element {
   return (
     <Box
       css={{
-        bg: '$grayBase',
+        bg: props.isAppEmbed ? '#ffffff00' : '$grayBase',
         px: '$1',
         py: '$3',
         mx: '$3',

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -67,12 +67,13 @@ function AppArticleEmbedContent(
   if (articleData) {
     return (
       <Box
-      ref={scrollRef}
-      css={{
-        overflowY: 'auto',
-        height: '100%',
-        width: '100vw',
-      }}>
+        ref={scrollRef}
+        css={{
+          overflowY: 'auto',
+          height: '100%',
+          width: '100vw',
+        }}
+      >
         <VStack
           alignment="center"
           distribution="center"

packages/web/pages/app/privacy.tsx

@@ -1,5 +1,7 @@
 import { PrivacyPolicy } from '../../components/templates/PrivacyPolicy'
+import { applyStoredTheme } from '../../lib/themeUpdater'
 
 export default function Privacy(): JSX.Element {
-  return <PrivacyPolicy />
+  applyStoredTheme(false) // false to skip server sync
+  return <PrivacyPolicy isAppEmbed />
 }

packages/web/pages/app/terms.tsx

@@ -1,5 +1,7 @@
 import { TermsAndConditions } from '../../components/templates/TermsAndConditions'
+import { applyStoredTheme } from '../../lib/themeUpdater'
 
 export default function Terms(): JSX.Element {
-  return <TermsAndConditions />
+  applyStoredTheme(false) // false to skip server sync
+  return <TermsAndConditions isAppEmbed />
 }