[chore-245] dark and light theme is now generic for all windows

This commit is contained in:
MathieuG-P
2023-07-16 14:34:07 +02:00
parent cdbe9aa740
commit cab6a90c78
7 changed files with 15 additions and 72 deletions
+13
View File
@@ -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(<reactWindow.default />);
@@ -46,3 +57,5 @@ if (launcherContainer) {
);
});
}
-9
View File
@@ -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();
}, []);
-12
View File
@@ -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 (
@@ -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 (
@@ -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 (
@@ -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<HTMLDivElement>(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(() => {
-12
View File
@@ -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<BSLaunchEventType>();
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);
}
}, []);