From 315baacba748ba1805592126b7459c108c1cf36f Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Fri, 25 Aug 2023 01:20:44 -0700
Subject: [PATCH] Desktop: Fixes #8723: Update CSS variables in user iframes on
 theme change (#8724)

---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .../plugins/hooks/useThemeCss.test.ts         | 21 +++++++++++++++++++
 .../services/plugins/hooks/useThemeCss.ts     | 12 ++++++-----
 4 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 packages/app-desktop/services/plugins/hooks/useThemeCss.test.ts

diff --git a/.eslintignore b/.eslintignore
index 5c94ed1d2..40236ae78 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -381,6 +381,7 @@ packages/app-desktop/services/plugins/hooks/useContentSize.js
 packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
 packages/app-desktop/services/plugins/hooks/useScriptLoader.js
 packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
+packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.js
 packages/app-desktop/services/plugins/hooks/useViewIsReady.js
 packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js
diff --git a/.gitignore b/.gitignore
index 64c2726d6..284ec0c9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -367,6 +367,7 @@ packages/app-desktop/services/plugins/hooks/useContentSize.js
 packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
 packages/app-desktop/services/plugins/hooks/useScriptLoader.js
 packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
+packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.js
 packages/app-desktop/services/plugins/hooks/useViewIsReady.js
 packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js
diff --git a/packages/app-desktop/services/plugins/hooks/useThemeCss.test.ts b/packages/app-desktop/services/plugins/hooks/useThemeCss.test.ts
new file mode 100644
index 000000000..fa173514c
--- /dev/null
+++ b/packages/app-desktop/services/plugins/hooks/useThemeCss.test.ts
@@ -0,0 +1,21 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useThemeCss from './useThemeCss';
+import Setting from '@joplin/lib/models/Setting';
+
+describe('useThemeCss', () => {
+	it('should return a different path when the theme changes', async () => {
+		const hookResult = renderHook(useThemeCss, {
+			initialProps: { pluginId: 'testid', themeId: Setting.THEME_DARK },
+		});
+
+		await hookResult.waitFor(() => {
+			expect(hookResult.result.current).toContain(`plugin_testid_theme_${Setting.THEME_DARK}.css`);
+		});
+
+		hookResult.rerender({ pluginId: 'testid', themeId: Setting.THEME_LIGHT });
+
+		await hookResult.waitFor(() => {
+			expect(hookResult.result.current).toContain(`plugin_testid_theme_${Setting.THEME_LIGHT}.css`);
+		});
+	});
+});
diff --git a/packages/app-desktop/services/plugins/hooks/useThemeCss.ts b/packages/app-desktop/services/plugins/hooks/useThemeCss.ts
index 102a32b24..78b18b43c 100644
--- a/packages/app-desktop/services/plugins/hooks/useThemeCss.ts
+++ b/packages/app-desktop/services/plugins/hooks/useThemeCss.ts
@@ -36,16 +36,18 @@ export default function useThemeCss(dep: HookDependencies) {
 	const [cssFilePath, setCssFilePath] = useState('');
 
 	useEffect(() => {
-		if (cssFilePath) return () => {};
-
 		let cancelled = false;
 
 		async function createThemeStyleSheet() {
 			const theme = themeStyle(themeId);
 			const css = themeToCssVariables(theme);
 			const filePath = `${Setting.value('tempDir')}/plugin_${pluginId}_theme_${themeId}.css`;
-			await shim.fsDriver().writeFile(filePath, css, 'utf8');
-			if (cancelled) return;
+
+			if (!(await shim.fsDriver().exists(filePath))) {
+				await shim.fsDriver().writeFile(filePath, css, 'utf8');
+				if (cancelled) return;
+			}
+
 			setCssFilePath(filePath);
 		}
 
@@ -54,7 +56,7 @@ export default function useThemeCss(dep: HookDependencies) {
 		return () => {
 			cancelled = true;
 		};
-	}, [pluginId, themeId, cssFilePath]);
+	}, [pluginId, themeId]);
 
 	return cssFilePath;
 }