diff --git a/docs/installation.md b/docs/installation.md
index af64bb25..fbca263c 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -275,6 +275,7 @@ These are the environmental options available on meet backend.
| CREATION_CALLBACK_THROTTLE_RATES | Creation callback throttle rates | 600/minute |
| SPECTACULAR_SETTINGS_ENABLE_DJANGO_DEPLOY_CHECK | Enable Django deploy check | false |
| CSRF_TRUSTED_ORIGINS | CSRF trusted origins list | [] |
+| FRONTEND_CUSTOM_CSS_URL | URL of an additional CSS file to load in the frontend app. If set, a `` tag with this URL as href is added to the `` of the frontend app | |
| FRONTEND_ANALYTICS | Analytics information | {} |
| FRONTEND_SUPPORT | Crisp frontend support configuration | {} |
| FRONTEND_SILENCE_LIVEKIT_DEBUG | Silence LiveKit debug logs | false |
diff --git a/src/backend/meet/settings.py b/src/backend/meet/settings.py
index 09931673..df9a5e84 100755
--- a/src/backend/meet/settings.py
+++ b/src/backend/meet/settings.py
@@ -304,6 +304,11 @@ class Base(Configuration):
# Frontend
FRONTEND_CONFIGURATION = {
+ # If set, a tag with this URL as href is added to the of the frontend app.
+ # This is useful if you want to change CSS variables to customize the look of the app.
+ "custom_css_url": values.Value(
+ None, environ_name="FRONTEND_CUSTOM_CSS_URL", environ_prefix=None
+ ),
"analytics": values.DictValue(
{}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
),
diff --git a/src/frontend/src/api/useConfig.ts b/src/frontend/src/api/useConfig.ts
index 0a490341..69e1b930 100644
--- a/src/frontend/src/api/useConfig.ts
+++ b/src/frontend/src/api/useConfig.ts
@@ -16,6 +16,7 @@ export interface ApiConfig {
}
silence_livekit_debug_logs?: boolean
is_silent_login_enabled?: boolean
+ custom_css_url?: string
recording?: {
is_enabled?: boolean
available_modes?: RecordingMode[]
diff --git a/src/frontend/src/components/AppInitialization.tsx b/src/frontend/src/components/AppInitialization.tsx
index 1477c6d4..5b5b8a49 100644
--- a/src/frontend/src/components/AppInitialization.tsx
+++ b/src/frontend/src/components/AppInitialization.tsx
@@ -3,6 +3,7 @@ import { useConfig } from '@/api/useConfig'
import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
import { useSupport } from '@/features/support/hooks/useSupport'
import { useSyncUserPreferencesWithBackend } from '@/features/auth'
+import { useEffect } from 'react'
export const AppInitialization = () => {
const { data } = useConfig()
@@ -12,11 +13,22 @@ export const AppInitialization = () => {
analytics = {},
support = {},
silence_livekit_debug_logs = false,
+ custom_css_url = '',
} = data || {}
useAnalytics(analytics)
useSupport(support)
+ useEffect(() => {
+ if (custom_css_url) {
+ const link = document.createElement('link')
+ link.href = custom_css_url
+ link.id = 'meet-custom-css'
+ link.rel = 'stylesheet'
+ document.head.appendChild(link)
+ }
+ }, [custom_css_url])
+
silenceLiveKitLogs(silence_livekit_debug_logs)
return null