From cab6a90c785cd350d9b3caefd97f916f11caeb0d Mon Sep 17 00:00:00 2001 From: MathieuG-P <40181755+Zagrios@users.noreply.github.com> Date: Sun, 16 Jul 2023 14:34:07 +0200 Subject: [PATCH] [chore-245] dark and light theme is now generic for all windows --- src/renderer/index.tsx | 13 +++++++++++++ src/renderer/windows/App.tsx | 9 --------- src/renderer/windows/Launcher.tsx | 12 ------------ .../windows/OneClick/OneClickDownloadMap.tsx | 14 +------------- .../windows/OneClick/OneClickDownloadModel.tsx | 14 +------------- .../windows/OneClick/OneClickDownloadPlaylist.tsx | 13 ------------- src/renderer/windows/ShortcutLaunch.tsx | 12 ------------ 7 files changed, 15 insertions(+), 72 deletions(-) diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 16ce237a..35ae65e2 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -3,6 +3,7 @@ import { HashRouter } from "react-router-dom"; import "tailwindcss/tailwind.css"; import "./index.css"; import { IpcService } from "./services/ipc.service"; +import { ThemeService } from "./services/theme.service"; const launcherContainer = document.getElementById("launcher"); const oneclickDownloadMapContainer = document.getElementById("oneclick-download-map"); @@ -11,11 +12,21 @@ const oneclickDownloadModelContainer = document.getElementById("oneclick-downloa const shortcutLaunchContainer = document.getElementById("shortcut-launch"); const ipc = IpcService.getInstance(); +const themeService = ThemeService.getInstance(); window.onerror = (...data) => { ipc.sendLazy("log-error", { args: data }); }; +document.addEventListener("DOMContentLoaded", () => { + themeService.theme$.subscribe(() => { + if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { + return document.documentElement.classList.add("dark"); + } + document.documentElement.classList.remove("dark"); + }); +}); + if (launcherContainer) { import("./windows/Launcher").then(reactWindow => { createRoot(launcherContainer).render(); @@ -46,3 +57,5 @@ if (launcherContainer) { ); }); } + + diff --git a/src/renderer/windows/App.tsx b/src/renderer/windows/App.tsx index 40a8a639..3c70c7fa 100644 --- a/src/renderer/windows/App.tsx +++ b/src/renderer/windows/App.tsx @@ -7,7 +7,6 @@ import { Modal } from "../components/modal/modal.component"; import { SettingsPage } from "../pages/settings-page.component"; import { BsmProgressBar } from "../components/progress-bar/bsm-progress-bar.component"; import { useEffect } from "react"; -import { ThemeService } from "../services/theme.service"; import { NotificationOverlay } from "../components/notification/notification-overlay.component"; import { PageStateService } from "../services/page-state.service"; import { SharedContentsPage } from "../pages/shared-contents-page.component"; @@ -26,7 +25,6 @@ import { useService } from "renderer/hooks/use-service.hook"; export default function App() { useService(OsDiagnosticService); - const themeService = useService(ThemeService); const pageState = useService(PageStateService); const maps = useService(MapsManagerService); const playlists = useService(PlaylistsManagerService); @@ -38,13 +36,6 @@ export default function App() { const navigate = useNavigate(); useEffect(() => { - themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - return document.documentElement.classList.add("dark"); - } - document.documentElement.classList.remove("dark"); - }); - checkOneClicks(); }, []); diff --git a/src/renderer/windows/Launcher.tsx b/src/renderer/windows/Launcher.tsx index c8a77ed3..270056ef 100644 --- a/src/renderer/windows/Launcher.tsx +++ b/src/renderer/windows/Launcher.tsx @@ -5,13 +5,11 @@ import { BsmProgressBar } from "../components/progress-bar/bsm-progress-bar.comp import TitleBar from "../components/title-bar/title-bar.component"; import { useTranslation } from "../hooks/use-translation.hook"; import { AutoUpdaterService } from "../services/auto-updater.service"; -import { ThemeService } from "../services/theme.service"; import { WindowManagerService } from "../services/window-manager.service"; import { useService } from "renderer/hooks/use-service.hook"; export default function Launcher() { - const themeService = useService(ThemeService); const updaterService = useService(AutoUpdaterService); const windowService = useService(WindowManagerService); @@ -22,14 +20,6 @@ export default function Launcher() { const t = useTranslation(); useEffect(() => { - const sub = themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }); - updaterService.isUpdateAvailable().then(available => { if (!available) { return windowService.openThenCloseAll("index.html"); @@ -42,8 +32,6 @@ export default function Launcher() { updaterService.quitAndInstall(); }); }); - - return () => sub.unsubscribe(); }, []); return ( diff --git a/src/renderer/windows/OneClick/OneClickDownloadMap.tsx b/src/renderer/windows/OneClick/OneClickDownloadMap.tsx index 89ab8d4c..8667c7bd 100644 --- a/src/renderer/windows/OneClick/OneClickDownloadMap.tsx +++ b/src/renderer/windows/OneClick/OneClickDownloadMap.tsx @@ -7,7 +7,6 @@ import { IpcService } from "renderer/services/ipc.service"; import { MapsDownloaderService } from "renderer/services/maps-downloader.service"; import { NotificationService } from "renderer/services/notification.service"; import { ProgressBarService } from "renderer/services/progress-bar.service"; -import { ThemeService } from "renderer/services/theme.service"; import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.service"; import { WindowManagerService } from "renderer/services/window-manager.service"; import { timer } from "rxjs"; @@ -20,7 +19,6 @@ export default function OneClickDownloadMap() { const ipc = useService(IpcService); const bsv = useService(BeatSaverService); const mapsDownloader = useService(MapsDownloaderService); - const themeService = useService(ThemeService); const progressBar = useService(ProgressBarService); const windows = useService(WindowManagerService); const notification = useService(NotificationService); @@ -32,13 +30,6 @@ export default function OneClickDownloadMap() { const title = mapInfo ? mapInfo.name : null; useEffect(() => { - const sub = themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }); progressBar.open(); @@ -81,10 +72,7 @@ export default function OneClickDownloadMap() { promise.finally(() => { windows.close("oneclick-download-map.html"); }); - - return () => { - sub.unsubscribe(); - }; + }, []); return ( diff --git a/src/renderer/windows/OneClick/OneClickDownloadModel.tsx b/src/renderer/windows/OneClick/OneClickDownloadModel.tsx index 62d4df40..bc9f1927 100644 --- a/src/renderer/windows/OneClick/OneClickDownloadModel.tsx +++ b/src/renderer/windows/OneClick/OneClickDownloadModel.tsx @@ -6,7 +6,6 @@ import { useTranslation } from "renderer/hooks/use-translation.hook"; import { IpcService } from "renderer/services/ipc.service"; import { NotificationService } from "renderer/services/notification.service"; import { ProgressBarService } from "renderer/services/progress-bar.service"; -import { ThemeService } from "renderer/services/theme.service"; import { ModelSaberService } from "renderer/services/thrird-partys/model-saber.service"; import { WindowManagerService } from "renderer/services/window-manager.service"; import { MSModel } from "shared/models/models/model-saber.model"; @@ -15,8 +14,8 @@ import { ModelsDownloaderService } from "renderer/services/models-management/mod import { useService } from "renderer/hooks/use-service.hook"; export default function OneClickDownloadModel() { + const ipc = useService(IpcService); - const themeService = useService(ThemeService); const modelSaber = useService(ModelSaberService); const progress = useService(ProgressBarService); const modelDownloader = useService(ModelsDownloaderService); @@ -30,13 +29,6 @@ export default function OneClickDownloadModel() { const title = model ? model.name : null; useEffect(() => { - const sub = themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }); const promise = new Promise(async (resolve, reject) => { const infos = await ipc.send<{ id: string; type: string }>("one-click-model-info"); @@ -73,10 +65,6 @@ export default function OneClickDownloadModel() { }); promise.finally(() => windows.close("oneclick-download-model.html")); - - return () => { - sub.unsubscribe(); - }; }, []); return ( diff --git a/src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx b/src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx index 590e9b9b..af1e0a8b 100644 --- a/src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx +++ b/src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx @@ -8,7 +8,6 @@ import { useTranslation } from "renderer/hooks/use-translation.hook"; import { IpcService } from "renderer/services/ipc.service"; import { NotificationService } from "renderer/services/notification.service"; import { PlaylistDownloaderService } from "renderer/services/playlist-downloader.service"; -import { ThemeService } from "renderer/services/theme.service"; import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.service"; import { WindowManagerService } from "renderer/services/window-manager.service"; import { map, filter } from "rxjs/operators"; @@ -20,7 +19,6 @@ export default function OneClickDownloadPlaylist() { const ipc = useService(IpcService); const bSaver = useService(BeatSaverService); - const themeService = useService(ThemeService); const playlistDownloader = useService(PlaylistDownloaderService); const mapsContainer = useRef(null); const windows = useService(WindowManagerService); @@ -40,13 +38,6 @@ export default function OneClickDownloadPlaylist() { const title = playlist ? playlist.name : null; useEffect(() => { - const sub = themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }); const promise = new Promise(async (resolve, reject) => { const infos = await ipc.send<{ bpListUrl: string; id: string }>("one-click-playlist-info"); @@ -79,10 +70,6 @@ export default function OneClickDownloadPlaylist() { promise.finally(() => { windows.close("oneclick-download-playlist.html"); }); - - return () => { - sub.unsubscribe(); - }; }, []); useEffect(() => { diff --git a/src/renderer/windows/ShortcutLaunch.tsx b/src/renderer/windows/ShortcutLaunch.tsx index c1058f34..0a215a75 100644 --- a/src/renderer/windows/ShortcutLaunch.tsx +++ b/src/renderer/windows/ShortcutLaunch.tsx @@ -1,6 +1,5 @@ import TitleBar from "renderer/components/title-bar/title-bar.component"; import { useService } from "renderer/hooks/use-service.hook"; -import { ThemeService } from "renderer/services/theme.service"; import { useEffect, useState } from "react" import { WindowManagerService } from "renderer/services/window-manager.service"; import { IpcService } from "renderer/services/ipc.service"; @@ -20,8 +19,6 @@ import { useTranslation } from "renderer/hooks/use-translation.hook"; export default function ShortcutLaunch() { - - const themeService = useService(ThemeService); const windows = useService(WindowManagerService); const ipc = useService(IpcService); const bsLauncher = useService(BSLauncherService); @@ -34,20 +31,11 @@ export default function ShortcutLaunch() { const [status, setStatus] = useState(); useEffect(() => { - const sub = themeService.theme$.subscribe(() => { - if (themeService.isDark || (themeService.isOS && window.matchMedia("(prefers-color-scheme: dark)").matches)) { - document.documentElement.classList.add("dark"); - } else { - document.documentElement.classList.remove("dark"); - } - }); - const interval = setInterval(() => { setRotation(rotation => rotation + 45 * 3); }, 1500); return () => { - sub.unsubscribe(); clearInterval(interval); } }, []);