fix: fixing update of inactive theme

src/main/events/index.ts

@@ -85,7 +85,6 @@ import "./themes/update-custom-theme";
 import "./themes/open-editor-window";
 import "./themes/get-custom-theme-by-id";
 import "./themes/get-active-custom-theme";
-import "./themes/css-injector";
 import "./themes/close-editor-window";
 import "./themes/toggle-custom-theme";
 import { isPortableVersion } from "@main/helpers";

src/main/events/themes/css-injector.ts

@@ -1,11 +0,0 @@
-import { registerEvent } from "../register-event";
-import { WindowManager } from "@main/services";
-
-const injectCSS = async (
-  _event: Electron.IpcMainInvokeEvent,
-  cssString: string
-) => {
-  WindowManager.mainWindow?.webContents.send("css-injected", cssString);
-};
-
-registerEvent("injectCSS", injectCSS);

src/main/events/themes/update-custom-theme.ts

@@ -1,5 +1,6 @@
 import { themesSublevel } from "@main/level";
 import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
 
 const updateCustomTheme = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -17,6 +18,10 @@ const updateCustomTheme = async (
     code,
     updatedAt: new Date(),
   });
+
+  if (theme.isActive) {
+    WindowManager.mainWindow?.webContents.send("css-injected", code);
+  }
 };
 
 registerEvent("updateCustomTheme", updateCustomTheme);

src/preload/index.ts

@@ -366,7 +366,6 @@ contextBridge.exposeInMainWorld("electron", {
   /* Editor */
   openEditorWindow: (themeId: string) =>
     ipcRenderer.invoke("openEditorWindow", themeId),
-  injectCSS: (cssString: string) => ipcRenderer.invoke("injectCSS", cssString),
   onCssInjected: (cb: (cssString: string) => void) => {
     const listener = (_event: Electron.IpcRendererEvent, cssString: string) =>
       cb(cssString);

src/renderer/src/declaration.d.ts

@@ -293,7 +293,6 @@ declare global {
 
     /* Editor */
     openEditorWindow: (themeId: string) => Promise<void>;
-    injectCSS: (cssString: string) => Promise<void>;
     onCssInjected: (
       cb: (cssString: string) => void
     ) => () => Electron.IpcRenderer;

src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx

@@ -22,6 +22,38 @@ interface FormValues {
   name: string;
 }
 
+const DEFAULT_THEME_CODE = `
+  /*
+    Here you can edit CSS for your theme and apply it on Hydra.
+    There are a few classes already in place, you can use them to style the launcher.
+
+    If you want to learn more about how to run Hydra in dev mode (which will allow you to inspect the DOM and view the classes)
+    or how to publish your theme in the theme store, you can check the docs:
+    https://docs.hydralauncher.gg/
+
+    Happy hacking!
+  */
+
+  /* Header */
+  .header {}
+
+  /* Sidebar */
+  .sidebar {}
+
+  /* Main content */
+  .container__content {}
+
+  /* Bottom panel */
+  .bottom-panel {}
+
+  /* Toast */
+  .toast {}
+
+  /* Button */
+  .button {}
+
+`;
+
 export function AddThemeModal({
   visible,
   onClose,
@@ -54,7 +86,7 @@ export function AddThemeModal({
         isActive: false,
         author: userDetails?.id,
         authorName: userDetails?.username,
-        code: "/* Your theme goes here */",
+        code: DEFAULT_THEME_CODE,
         createdAt: new Date(),
         updatedAt: new Date(),
       };

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -33,10 +33,6 @@ export default function ThemeEditor() {
     if (theme) {
       await window.electron.updateCustomTheme(theme.id, code);
       setHasUnsavedChanges(false);
-
-      if (theme.isActive) {
-        window.electron.injectCSS(code);
-      }
     }
   }, [code, theme]);