feat: add custom CSS styling

src/app/AppConfig.ts

@@ -6,7 +6,7 @@
 import { app, webContents } from 'electron'
 import { readFile, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
-import { isWayland, isMac } from './system.utils.ts'
+import { isMac, isWayland } from './system.utils.ts'
 
 const APP_CONFIG_FILE_NAME = 'config.json'
 
@@ -156,7 +156,7 @@ const defaultAppConfig: AppConfig = {
  */
 const forcedAppConfig: Partial<AppConfig> = Object.fromEntries(Object.entries({
 	// See: https://github.com/electron/electron/issues/49244
-	systemTitleBar: isWayland ? false : undefined
+	systemTitleBar: isWayland ? false : undefined,
 }).filter(([, value]) => value !== undefined))
 
 /** Local cache of the config file mixed with the default values */

src/main.js

@@ -6,6 +6,7 @@
 const { app, ipcMain, desktopCapturer, systemPreferences, shell, session } = require('electron')
 const { default: mri } = require('mri')
 const { spawn } = require('node:child_process')
+const { readFile } = require('node:fs/promises')
 const path = require('node:path')
 const { setupMenu } = require('./app/app.menu.js')
 const { loadAppConfig, getAppConfig, setAppConfig } = require('./app/AppConfig.ts')
@@ -88,6 +89,14 @@ ipcMain.handle('app:setBadgeCount', async (event, count) => app.setBadgeCount(co
 ipcMain.on('app:relaunch', () => relaunchApp())
 ipcMain.handle('app:config:get', (event, key) => getAppConfig(key))
 ipcMain.handle('app:config:set', (event, key, value) => setAppConfig(key, value))
+ipcMain.handle('app:custom-css:get', async () => {
+	const files = [
+		...(isWindows && process.env.ProgramData ? [path.join(process.env.ProgramData, app.getName(), 'custom.css')] : []),
+		path.join(app.getPath('userData'), 'custom.css'),
+	]
+	const styles = await Promise.all(files.map((file) => readFile(file, 'utf-8').catch(() => '')))
+	return styles.filter(Boolean).join('\n\n')
+})
 ipcMain.on('app:grantUserGesturedPermission', (event, id) => {
 	return event.sender.executeJavaScript(`document.getElementById('${id}')?.click()`, true)
 })

src/preload.js

@@ -108,6 +108,12 @@ const TALK_DESKTOP = {
 	 * @param {(event: import('electron').IpcRedererEvent, payload: { key: string, value: unknown, appConfig: import('./app/AppConfig.ts').AppConfig}) => void} callback - Callback
 	 */
 	onAppConfigChange: (callback) => ipcRenderer.on('app:config:change', callback),
+	/**
+	 * Get custom CSS loaded from fixed app data locations
+	 *
+	 * @return {Promise<string>}
+	 */
+	getCustomCss: () => ipcRenderer.invoke('app:custom-css:get'),
 	/**
 	 * Grant a permission requiring a user gesture
 	 *

src/shared/setupWebPage.js

@@ -243,6 +243,21 @@ function applyHeaderHeight() {
 	document.documentElement.style.setProperty('--header-height', `${TITLE_BAR_HEIGHT}px`)
 }
 
+/**
+ * Apply custom CSS from fixed app data locations
+ */
+async function applyCustomCss() {
+	const css = await window.TALK_DESKTOP.getCustomCss()
+	if (!css) {
+		return
+	}
+
+	const style = document.createElement('style')
+	style.id = 'talk-desktop-custom-css'
+	style.textContent = css
+	document.head.appendChild(style)
+}
+
 /**
  * Handle download links
  */
@@ -267,6 +282,7 @@ export async function setupWebPage() {
 	initGlobals()
 	applyUserData()
 	applyHeaderHeight()
+	await applyCustomCss()
 	applyAxiosInterceptors()
 	applyDownloadLinkHandler()
 

src/talk/renderer/Settings/DesktopSettingsSection.vue

@@ -6,15 +6,18 @@
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
 import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
 import NcFormBox from '@nextcloud/vue/components/NcFormBox'
 import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
 import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
 import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
 import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
+import IconPaletteOutline from 'vue-material-design-icons/PaletteOutline.vue'
 import IconThemeLightDark from 'vue-material-design-icons/ThemeLightDark.vue'
 import IconWeatherNight from 'vue-material-design-icons/WeatherNight.vue'
 import IconWeatherSunny from 'vue-material-design-icons/WeatherSunny.vue'
 import DesktopSettingsSectionRelaunchNote from './components/DesktopSettingsSectionRelaunchNote.vue'
+import NcFormBoxItem from './components/NcFormBoxItem.vue'
 import UiFormBoxAudioOutput from './components/UiFormBoxAudioOutput.vue'
 import UiFormBoxSelectNative from './components/UiFormBoxSelectNative.vue'
 import UiFormGroupZoom from './components/UiFormGroupZoom.vue'
@@ -43,6 +46,11 @@ const notificationLevelOptions = [
 
 const secondarySpeaker = useAppConfigValue('secondarySpeaker')
 const secondarySpeakerDevice = useAppConfigValue('secondarySpeakerDevice')
+
+const isCustomCssApplied = ref(false)
+onMounted(async () => {
+	isCustomCssApplied.value = !!await window.TALK_DESKTOP.getCustomCss()
+})
 </script>
 
 <template>
@@ -75,6 +83,12 @@ const secondarySpeakerDevice = useAppConfigValue('secondarySpeakerDevice')
 			<NcFormBox>
 				<NcFormBoxSwitch v-model="monochromeTrayIcon" :label="t('talk_desktop', 'Use monochrome tray icon')" />
 				<NcFormBoxSwitch v-if="!isWayland" v-model="systemTitleBar" :label="t('talk_desktop', 'Use system title bar')" />
+				<!-- TODO: Link to documentation when custom CSS docs are available. -->
+				<NcFormBoxItem v-if="isCustomCssApplied" tag="span" :label="t('talk_desktop', 'Custom CSS is applied')">
+					<template #icon>
+						<IconPaletteOutline :size="20" />
+					</template>
+				</NcFormBoxItem>
 			</NcFormBox>
 		</NcFormGroup>