Merge pull request #123 from omnivore-app/fix/apple-web-embed-color-modes

Fix apple web embed color modes

apple/OmnivoreKit/Sources/Binders/Views/ProfileContainerView.swift

@@ -56,11 +56,15 @@ struct ProfileContainerView: View {
       }
 
       Section {
-        NavigationLink(destination: BasicWebAppView.privacyPolicyWebView) {
+        NavigationLink(
+          destination: BasicWebAppView.privacyPolicyWebView(baseURL: dataService.appEnvironment.webAppBaseURL)
+        ) {
           Text("Privacy Policy")
         }
 
-        NavigationLink(destination: BasicWebAppView.termsConditionsWebView) {
+        NavigationLink(
+          destination: BasicWebAppView.termsConditionsWebView(baseURL: dataService.appEnvironment.webAppBaseURL)
+        ) {
           Text("Terms and Conditions")
         }
 
@@ -105,16 +109,21 @@ struct ProfileContainerView: View {
 }
 
 private extension BasicWebAppView {
-  static let privacyPolicyWebView: BasicWebAppView = {
-    omnivoreWebView(path: "privacy")
-  }()
+  static func privacyPolicyWebView(baseURL: URL) -> BasicWebAppView {
+    omnivoreWebView(path: "/app/privacy", baseURL: baseURL)
+  }
 
-  static let termsConditionsWebView: BasicWebAppView = {
-    omnivoreWebView(path: "terms")
-  }()
+  static func termsConditionsWebView(baseURL: URL) -> BasicWebAppView {
+    omnivoreWebView(path: "/app/terms", baseURL: baseURL)
+  }
 
-  private static func omnivoreWebView(path: String) -> BasicWebAppView {
-    let urlString = "https://omnivore.app/\(path)?isAppEmbedView=true"
-    return BasicWebAppView(request: URLRequest(url: URL(string: urlString)!))
+  private static func omnivoreWebView(path: String, baseURL: URL) -> BasicWebAppView {
+    let urlRequest = URLRequest.webRequest(
+      baseURL: baseURL,
+      urlPath: path,
+      queryParams: nil
+    )
+
+    return BasicWebAppView(request: urlRequest)
   }
 }

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

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

packages/web/pages/app/terms.tsx

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