From 54244d231789e3b6749ce394557e850ac2011c41 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Mon, 27 May 2024 21:39:36 +0200
Subject: [PATCH] add `color-scheme`

according to the user's dark/light setting in the app #1969
---
 src/renderer/src/App.tsx          | 6 ++++--
 src/renderer/src/NoFileLoaded.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index d8252531358..190dbb7941d 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -2508,12 +2508,14 @@ function App() {
 
   // throw new Error('Test error boundary');
 
+  const baseColorStyle = useMemo(() => ({ color: 'var(--gray12)', background: 'var(--gray1)', colorScheme: darkMode ? 'only dark' : 'only light' }), [darkMode]);
+
   return (
     <>
       <SegColorsContext.Provider value={segColorsContext}>
         <UserSettingsContext.Provider value={userSettingsContext}>
           <ThemeProvider value={theme}>
-            <div className={darkMode ? 'dark-theme' : undefined} style={{ display: 'flex', flexDirection: 'column', height: '100vh', color: 'var(--gray12)', background: 'var(--gray1)', transition: darkModeTransition }}>
+            <div className={darkMode ? 'dark-theme' : undefined} style={{ ...baseColorStyle, display: 'flex', flexDirection: 'column', height: '100vh', transition: darkModeTransition }}>
               <TopMenu
                 filePath={filePath}
                 fileFormat={fileFormat}
@@ -2805,7 +2807,7 @@ function App() {
         </UserSettingsContext.Provider>
       </SegColorsContext.Provider>
 
-      <div id="swal2-container-wrapper" className={darkMode ? 'dark-theme' : undefined} style={{ color: 'var(--gray12)', background: 'var(--gray1)' }} />
+      <div id="swal2-container-wrapper" className={darkMode ? 'dark-theme' : undefined} style={baseColorStyle} />
     </>
   );
 }
diff --git a/src/renderer/src/NoFileLoaded.tsx b/src/renderer/src/NoFileLoaded.tsx
index 67b2083380f..760e5d6d283 100644
--- a/src/renderer/src/NoFileLoaded.tsx
+++ b/src/renderer/src/NoFileLoaded.tsx
@@ -41,7 +41,7 @@ function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode }: {
 
       {mifiLink && typeof mifiLink === 'object' && 'loadUrl' in mifiLink && typeof mifiLink.loadUrl === 'string' && mifiLink.loadUrl ? (
         <div style={{ position: 'relative', margin: '.3em', width: '24em', height: '8em' }}>
-          <iframe src={`${mifiLink.loadUrl}#dark=${darkMode ? 'true' : 'false'}`} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute' }} />
+          <iframe src={`${mifiLink.loadUrl}#dark=${darkMode ? 'true' : 'false'}`} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute', colorScheme: 'initial' }} />
           {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
           <div style={{ width: '100%', height: '100%', position: 'absolute', cursor: 'pointer' }} role="button" onClick={(e) => { e.stopPropagation(); if ('targetUrl' in mifiLink && typeof mifiLink.targetUrl === 'string') electron.shell.openExternal(mifiLink.targetUrl); }} />
         </div>