Skip to content

webui: add custom CSS injection via config #23904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
allozaur merged 6 commits into from
May 30, 2026
Merged

webui: add custom CSS injection via config #23904

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f6d77bf
webui: add custom CSS injection via config
ServeurpersoCom May 30, 2026
1281b5d
ui: address review from @niutech and @allozaur, rename custom JSON ke…
ServeurpersoCom May 30, 2026
8d66de4
ui: address review from @allozaur, move custom CSS injection to a sty…
ServeurpersoCom May 30, 2026
42f6ae0
ui: inject custom CSS through a svelte action instead of a bound element
ServeurpersoCom May 30, 2026
dc929ed
Update tools/ui/src/lib/constants/settings-keys.ts
ServeurpersoCom May 30, 2026
67a1159
ui: address review from @allozaur, rename custom config key to custom…
ServeurpersoCom May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion tools/ui/src/lib/constants/settings-keys.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,6 @@ export const SETTINGS_KEYS = {
EXCLUDE_REASONING_FROM_CONTEXT: 'excludeReasoningFromContext',
SHOW_RAW_OUTPUT_SWITCH: 'showRawOutputSwitch',
// PY_INTERPRETER_ENABLED: 'pyInterpreterEnabled',
CUSTOM: 'custom'
CUSTOM_JSON: 'custom',
Comment thread
ServeurpersoCom marked this conversation as resolved.
Outdated
CUSTOM_CSS: 'customCss'
} as const;
14 changes: 13 additions & 1 deletion tools/ui/src/lib/constants/settings-registry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,12 +659,24 @@ const SETTINGS_REGISTRY: Record<string, SettingsSectionEntry> = {
}
},
{
key: SETTINGS_KEYS.CUSTOM,
key: SETTINGS_KEYS.CUSTOM_JSON,
label: 'Custom JSON',
help: 'Custom JSON parameters to send to the API. Must be valid JSON format.',
defaultValue: '',
type: SettingsFieldType.TEXTAREA,
section: SETTINGS_SECTION_SLUGS.DEVELOPER
},
{
key: SETTINGS_KEYS.CUSTOM_CSS,
label: 'Custom CSS',
help: 'CSS injected into the page at runtime. Set it here, or ship it server side via the --ui-config customCss field.',
defaultValue: '',
type: SettingsFieldType.TEXTAREA,
section: SETTINGS_SECTION_SLUGS.DEVELOPER,
sync: {
serverKey: SETTINGS_KEYS.CUSTOM_CSS,
paramType: SyncableParameterType.STRING
}
}
]
},
Expand Down
12 changes: 12 additions & 0 deletions tools/ui/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,14 @@
}
});

// Inject custom CSS at runtime through an action on the head style node
// textContent keeps the value as text, never parsed as HTML
function customCss(node: HTMLStyleElement) {
$effect(() => {
node.textContent = (config().customCss as string | undefined) ?? '';
});
}

// Fetch router models when in router mode (for status and modalities)
// Wait for models to be loaded first, run only once
let routerModelsFetched = false;
Expand Down Expand Up @@ -227,6 +235,10 @@
});
</script>

<svelte:head>
<style use:customCss></style>
</svelte:head>
Comment thread
ServeurpersoCom marked this conversation as resolved.

<Tooltip.Provider delayDuration={TOOLTIP_DELAY_DURATION}>
<ModeWatcher />
<Toaster richColors />
Expand Down
Loading