diff --git a/src/main/events/index.ts b/src/main/events/index.ts index 3dd9c298..572cba0f 100644 --- a/src/main/events/index.ts +++ b/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"; diff --git a/src/main/events/themes/css-injector.ts b/src/main/events/themes/css-injector.ts deleted file mode 100644 index facee221..00000000 --- a/src/main/events/themes/css-injector.ts +++ /dev/null @@ -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); diff --git a/src/main/events/themes/update-custom-theme.ts b/src/main/events/themes/update-custom-theme.ts index 38c97abe..b9a8e048 100644 --- a/src/main/events/themes/update-custom-theme.ts +++ b/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); diff --git a/src/preload/index.ts b/src/preload/index.ts index a7b7b753..5b3498ac 100644 --- a/src/preload/index.ts +++ b/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); diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts index 2deffb05..1b588d5c 100644 --- a/src/renderer/src/declaration.d.ts +++ b/src/renderer/src/declaration.d.ts @@ -293,7 +293,6 @@ declare global { /* Editor */ openEditorWindow: (themeId: string) => Promise; - injectCSS: (cssString: string) => Promise; onCssInjected: ( cb: (cssString: string) => void ) => () => Electron.IpcRenderer; diff --git a/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx b/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx index f025b71c..bece2bac 100644 --- a/src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx +++ b/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(), }; diff --git a/src/renderer/src/pages/theme-editor/theme-editor.tsx b/src/renderer/src/pages/theme-editor/theme-editor.tsx index 2bdfe6f2..0059edc9 100644 --- a/src/renderer/src/pages/theme-editor/theme-editor.tsx +++ b/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]);