[UX] CustomCSS field for advance persistent styling (#4282)

CustomCSS field for advance persistent styling Co-authored-by: Flávio Fearn <[email protected]>
Heroic-Games-Launcher · Feb 25, 2025 · 78151d5 · 78151d5
1 parent 60afb3c
commit 78151d5
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -11,5 +11,6 @@
   <body>
     <div id="root"></div>
     <div class="simple-keyboard"></div>
+    <style id="customCSS"></style>
   </body>
 </html>
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -596,6 +596,9 @@
         "change-target-exe": "Select an alternative EXE to run",
         "checkForUpdatesOnStartup": "Check for Heroic Updates on Startup",
         "crossover-version": "Crossover/Wine Version",
+        "custom_css": {
+            "warning": "Warning: this applies to the whole frontend. That means the wrong style can render Heroic unusable. If needed, the setting can be changes manually in `~/.config/heroic/config.json`. Do NOT copy styles from sources you don't trust."
+        },
         "custom_themes_path": "Custom Themes Path",
         "customWineProton": "Custom Wine/Proton Paths",
         "darktray": "Use Dark Tray Icon",
@@ -778,6 +781,9 @@
         "clear-cache": "Clear Heroic Cache",
         "copiedToClipboard": "Copied to Clipboard!",
         "copyToClipboard": "Copy All Settings to Clipboard",
+        "custom_css": {
+            "title": "Custom CSS Style"
+        },
         "default_hint": "Changes in this section only apply as default values when installing games. If you want to change the settings of an already installed game, use the Settings button in the game page.",
         "eacRuntime": {
             "gameModeRequired": {

diff --git a/src/backend/api/helpers.ts b/src/backend/api/helpers.ts
@@ -140,6 +140,8 @@ export const getThemeCSS = async (theme: string) =>
 
 export const getCustomThemes = async () => ipcRenderer.invoke('getCustomThemes')
 
+export const getCustomCSS = async () => ipcRenderer.invoke('getCustomCSS')
+
 export const setTitleBarOverlay = (options: TitleBarOverlay) =>
   ipcRenderer.send('setTitleBarOverlay', options)
 

diff --git a/src/backend/main.ts b/src/backend/main.ts
@@ -1415,6 +1415,10 @@ ipcMain.handle('getThemeCSS', async (event, theme) => {
   return readFileSync(cssPath, 'utf-8')
 })
 
+ipcMain.handle('getCustomCSS', async () => {
+  return GlobalConfig.get().getSettings().customCSS
+})
+
 ipcMain.on('setTitleBarOverlay', (e, args) => {
   const mainWindow = getMainWindow()
   if (typeof mainWindow?.['setTitleBarOverlay'] === 'function') {

diff --git a/src/common/typedefs/ipcBridge.d.ts b/src/common/typedefs/ipcBridge.d.ts
@@ -321,6 +321,7 @@ interface AsyncIPCFunctions {
   ) => Promise<false | [string, UploadedLogData]>
   deleteUploadedLogFile: (url: string) => Promise<boolean>
   getUploadedLogFiles: () => Promise<Record<string, UploadedLogData>>
+  getCustomCSS: () => Promise<string>
 }
 
 // This is quite ugly & throws a lot of errors in a regular .ts file

diff --git a/src/common/types.ts b/src/common/types.ts
@@ -79,6 +79,7 @@ export interface AppSettings extends GameSettings {
   autoUpdateGames: boolean
   checkForUpdatesOnStartup: boolean
   checkUpdatesInterval: number
+  customCSS: string
   customThemesPath: string
   customWinePaths: string[]
   darkTrayIcon: boolean

diff --git a/src/frontend/index.tsx b/src/frontend/index.tsx
@@ -37,6 +37,17 @@ const languageCode: string =
   configStore.get_nodefault('language') ?? storage.getItem('language') ?? 'en'
 configStore.set('language', languageCode)
 
+window.setCustomCSS = (cssString: string) => {
+  const style = document.createElement('style')
+  style.innerHTML = cssString
+  document.getElementById('customCSS')!.innerText = style.innerText
+}
+
+window.api
+  .getCustomCSS()
+  .then(window.setCustomCSS)
+  .catch(() => {})
+
 i18next
   // load translation using http -> see /public/locales
   // learn more: https://github.com/i18next/i18next-http-backend

diff --git a/src/frontend/screens/Settings/components/CustomCSS.tsx b/src/frontend/screens/Settings/components/CustomCSS.tsx
@@ -0,0 +1,34 @@
+import React, { ChangeEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSetting from 'frontend/hooks/useSetting'
+
+const CustomCSS = () => {
+  const { t } = useTranslation()
+  const [customCSS, setCustomCSS] = useSetting('customCSS', '')
+
+  const handleCustomCSS = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setCustomCSS(event.currentTarget.value)
+    window.setCustomCSS(event.currentTarget.value)
+  }
+
+  return (
+    <>
+      <h3>{t('settings.custom_css.title', 'Custom CSS Style')}</h3>
+
+      <textarea
+        defaultValue={customCSS}
+        className="customCSSArea"
+        onChange={handleCustomCSS}
+        rows={5}
+      />
+      <div className="customCSSWarning">
+        {t(
+          'setting.custom_css.warning',
+          "Warning: this applies to the whole frontend. That means the wrong style can render Heroic unusable. If needed, the setting can be changes manually in `~/.config/heroic/config.json`. Do NOT copy styles from sources you don't trust."
+        )}
+      </div>
+    </>
+  )
+}
+
+export default CustomCSS
diff --git a/src/frontend/screens/Settings/components/index.ts b/src/frontend/screens/Settings/components/index.ts
@@ -10,6 +10,7 @@ export { default as BattlEyeRuntime } from './BattlEyeRuntime'
 export { default as CheckUpdatesOnStartup } from './CheckUpdatesOnStartup'
 export { default as CrossoverBottle } from './CrossoverBottle'
 export { default as CustomWineProton } from './CustomWineProton'
+export { default as CustomCSS } from './CustomCSS'
 export { default as DefaultInstallPath } from './DefaultInstallPath'
 export { default as DefaultSteamPath } from './DefaultSteamPath'
 export { default as DisableController } from './DisableController'

diff --git a/src/frontend/screens/Settings/index.css b/src/frontend/screens/Settings/index.css
@@ -231,3 +231,34 @@ a {
 .infoBox.saves-warning svg {
   padding-inline-end: 10px;
 }
+
+.customCSSArea {
+  border-radius: var(--space-3xs);
+  width: 100%;
+  min-height: 200px;
+  background: var(--input-background);
+  font-family: var(--primary-font-family), 'Noto Color Emoji';
+  font-weight: normal;
+  font-size: var(--text-md);
+  line-height: 19px;
+  color: var(--text-secondary);
+  border: none;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 100px;
+  padding: 0.5rem;
+}
+
+.customCSSWarning {
+  background: var(--anticheat-denied, var(--status-danger));
+  color: var(--brand-text-01);
+  text-align: start;
+  padding: var(--space-md);
+  display: flex;
+  gap: var(--space-md);
+  border-radius: var(--space-3xs);
+}
diff --git a/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx b/src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx
@@ -20,6 +20,7 @@ import {
   AltLegendaryBin,
   AltNileBin,
   ClearCache,
+  CustomCSS,
   DisableLogs,
   DownloadNoHTTPS,
   ExperimentalFeatures,
@@ -299,6 +300,11 @@ export default function AdvancedSetting() {
         <hr />
       </div>
 
+      <div className="advancedSetting">
+        <CustomCSS />
+        <hr />
+      </div>
+
       <div className="advancedSetting">
         <ClearCache />
         <hr />

diff --git a/src/frontend/types.ts b/src/frontend/types.ts
@@ -168,6 +168,7 @@ declare global {
     setTheme: (themeClass: string) => void
     isSteamDeckGameMode: boolean
     platform: NodeJS.Platform
+    setCustomCSS: (cssString: string) => void
   }
 
   interface WindowEventMap {