From ff119768681bc5e29ffec248fa209050d46a6d87 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Tue, 11 Apr 2023 16:50:43 +0200
Subject: [PATCH] fix: forced dark mode for iframe

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../hooks/use-send-dark-mode-status-to-renderer.ts | 14 +++++++++++---
 .../editor-page/renderer-pane/render-iframe.tsx    |  5 +++--
 .../components/intro-page/intro-custom-content.tsx |  3 ++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts b/frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts
index 88d859538..7b129459d 100644
--- a/frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts
+++ b/frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { DarkModePreference } from '../../../../redux/dark-mode/types'
 import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
 import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
 import { useMemo } from 'react'
@@ -14,16 +15,23 @@ import { useMemo } from 'react'
  * @param forcedDarkMode Overwrites the value from the global application states if set.
  * @param rendererReady Defines if the target renderer is ready
  */
-export const useSendDarkModeStatusToRenderer = (forcedDarkMode: boolean | undefined, rendererReady: boolean): void => {
+export const useSendDarkModeStatusToRenderer = (
+  rendererReady: boolean,
+  forcedDarkMode: DarkModePreference = DarkModePreference.AUTO
+): void => {
   const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
 
+  const darkMode = useMemo(() => {
+    return forcedDarkMode === DarkModePreference.AUTO ? darkModePreference : forcedDarkMode
+  }, [darkModePreference, forcedDarkMode])
+
   useSendToRenderer(
     useMemo(
       () => ({
         type: CommunicationMessageType.SET_DARKMODE,
-        preference: darkModePreference
+        preference: darkMode
       }),
-      [darkModePreference]
+      [darkMode]
     ),
     rendererReady
   )
diff --git a/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx b/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx
index defba321f..2cb4d2212 100644
--- a/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx
+++ b/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import type { DarkModePreference } from '../../../redux/dark-mode/types'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
 import { isTestMode } from '../../../utils/test-modes'
@@ -28,7 +29,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } fr
 
 export interface RenderIframeProps extends RendererProps {
   rendererType: RendererType
-  forcedDarkMode?: boolean
+  forcedDarkMode?: DarkModePreference
   frameClasses?: string
   onRendererStatusChange?: undefined | ((rendererReady: boolean) => void)
   adaptFrameHeightToContent?: boolean
@@ -144,7 +145,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   )
 
   useEffectOnRenderTypeChange(rendererType, onIframeLoad)
-  useSendDarkModeStatusToRenderer(forcedDarkMode, rendererReady)
+  useSendDarkModeStatusToRenderer(rendererReady, forcedDarkMode)
   useSendMarkdownToRenderer(markdownContentLines, rendererReady)
   useSendScrollState(scrollState, rendererReady)
 
diff --git a/frontend/src/components/intro-page/intro-custom-content.tsx b/frontend/src/components/intro-page/intro-custom-content.tsx
index 0848a6e58..d77ef276f 100644
--- a/frontend/src/components/intro-page/intro-custom-content.tsx
+++ b/frontend/src/components/intro-page/intro-custom-content.tsx
@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { DarkModePreference } from '../../redux/dark-mode/types'
 import { Logger } from '../../utils/logger'
 import { AsyncLoadingBoundary } from '../common/async-loading-boundary/async-loading-boundary'
 import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
@@ -31,7 +32,7 @@ export const IntroCustomContent: React.FC = () => {
         frameClasses={'w-100 overflow-y-hidden'}
         markdownContentLines={value as string[]}
         rendererType={RendererType.SIMPLE}
-        forcedDarkMode={true}
+        forcedDarkMode={DarkModePreference.DARK}
         adaptFrameHeightToContent={true}
       />
     </AsyncLoadingBoundary>