Feature Request: Allow to inject custom CSS to webUI via config

[niutech]

Prerequisites

• I am running the latest code. Mention the version if possible as well.
• I carefully followed the README.md.
• I searched using keywords relevant to my issue to make sure that I am creating a new issue that is not already open (or closed).
• I reviewed the Discussions, and have a new and useful enhancement to share.

Feature Description

Please allow to inject custom CSS into WebUI at runtime, without rebuilding it.

Motivation

Even slightly customizing llama.cpp webUI (like changing colors) requires cloning the repo, installing node.js packages and rebuilding the Svelte app, then rebuilding llama.cpp. There is no way to easily customize downloaded prebuilt llama.cpp binary.

Possible Implementation

It could be done e.g. by adding customCSS property to the config object passed to --webui-config or --webui-config-file.

[ServeurpersoCom]

It's a great idea for llama-ui!

Other projects are doing this, and it's creating a community for sharing CSS hacks. Here's a functionally (but not visually) identical example from another project:

[ServeurpersoCom]

demo-css.mp4

Example of overriding the default Dark and Light settings with a bluish tint :

{
  "theme": "dark",
  "customCss": ":root{--background:oklch(0.985 0.018 240);--foreground:oklch(0.2 0.06 258);--card:oklch(1 0.012 240);--card-foreground:oklch(0.2 0.06 258);--popover:oklch(1 0.012 240);--popover-foreground:oklch(0.2 0.06 258);--secondary:oklch(0.93 0.035 240);--secondary-foreground:oklch(0.28 0.06 258);--muted:oklch(0.955 0.03 240);--muted-foreground:oklch(0.5 0.07 255);--accent:oklch(0.92 0.05 245);--accent-foreground:oklch(0.28 0.07 258);--code-background:oklch(0.965 0.025 240);--border:oklch(0.84 0.05 245);--input:oklch(0.89 0.04 243);--ring:oklch(0.62 0.13 258);--sidebar:oklch(0.97 0.025 240);--sidebar-foreground:oklch(0.2 0.06 258);--sidebar-accent:oklch(0.93 0.04 243);--sidebar-accent-foreground:oklch(0.28 0.07 258);--sidebar-border:oklch(0.9 0.04 243);--sidebar-ring:oklch(0.62 0.13 258);}.dark{--background:oklch(0.17 0.055 258);--foreground:oklch(0.97 0.015 255);--card:oklch(0.215 0.06 258);--card-foreground:oklch(0.97 0.015 255);--popover:oklch(0.215 0.06 258);--popover-foreground:oklch(0.97 0.015 255);--secondary:oklch(0.3 0.065 258);--secondary-foreground:oklch(0.97 0.015 255);--muted:oklch(0.28 0.06 258);--muted-foreground:oklch(0.73 0.05 255);--accent:oklch(0.33 0.085 262);--accent-foreground:oklch(0.98 0.012 255);--code-background:oklch(0.235 0.06 258);--border:oklch(0.66 0.1 260 / 38%);--input:oklch(0.66 0.1 260 / 38%);--ring:oklch(0.62 0.14 262);--sidebar:oklch(0.205 0.06 258);--sidebar-foreground:oklch(0.97 0.015 255);--sidebar-accent:oklch(0.3 0.07 260);--sidebar-accent-foreground:oklch(0.98 0.012 255);--sidebar-border:oklch(0.66 0.1 260 / 20%);--sidebar-ring:oklch(0.62 0.14 262);}"
}

Green hacky one for cut/paste demo inside Custom CSS field :

.dark{--background:oklch(0.13 0.06 150);--foreground:oklch(0.92 0.18 150);--card:oklch(0.17 0.07 150);--card-foreground:oklch(0.92 0.18 150);--popover:oklch(0.16 0.07 150);--popover-foreground:oklch(0.92 0.18 150);--primary:oklch(0.78 0.22 135);--primary-foreground:oklch(0.12 0.05 150);--secondary:oklch(0.24 0.09 155);--secondary-foreground:oklch(0.9 0.18 150);--muted:oklch(0.2 0.07 152);--muted-foreground:oklch(0.72 0.15 150);--accent:oklch(0.7 0.24 135);--accent-foreground:oklch(0.12 0.05 150);--destructive:oklch(0.65 0.27 18);--border:oklch(0.7 0.2 150 / 55%);--input:oklch(0.5 0.14 155 / 50%);--ring:oklch(0.82 0.22 135);--code-background:oklch(0.15 0.06 152);--code-foreground:oklch(0.88 0.2 145);--sidebar:oklch(0.15 0.07 152);--sidebar-foreground:oklch(0.9 0.18 150);--sidebar-accent:oklch(0.4 0.16 140);--sidebar-accent-foreground:oklch(0.95 0.1 145);--sidebar-border:oklch(0.7 0.2 140 / 45%);--sidebar-ring:oklch(0.82 0.22 135);}
.dark body{font-family:var(--font-mono) !important;}
.dark *{border-color:oklch(0.7 0.18 150 / 30%);}
.dark button:hover{box-shadow:0 0 12px oklch(0.82 0.22 135 / 60%);transition:box-shadow 0.2s;}
.dark [data-sidebar],.dark aside{box-shadow:2px 0 24px oklch(0.7 0.22 140 / 25%);}
.dark h1,.dark h2,.dark h3{text-shadow:0 0 8px oklch(0.82 0.22 135 / 50%);letter-spacing:0.02em;}
.dark a,.dark a:visited{text-shadow:0 0 6px oklch(0.88 0.2 150 / 50%);}
.dark code,.dark pre{text-shadow:0 0 4px oklch(0.88 0.2 145 / 40%);border:1px solid oklch(0.7 0.2 150 / 30%);border-radius:6px;}
.dark svg{filter:drop-shadow(0 0 3px oklch(0.8 0.2 145 / 50%));}
.dark input,.dark textarea{caret-color:oklch(0.82 0.22 135);}
.dark input:focus,.dark textarea:focus{box-shadow:0 0 14px oklch(0.82 0.22 135 / 50%) !important;}