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

Activity

1. niutech

   added

   enhancementNew feature or requestNew feature or request

   on May 29, 2026
2. allozaur

   assigned

   ServeurpersoCom

   on May 30, 2026
3. allozaur

   added the

   Feature

   issue type on May 30, 2026
4. ServeurpersoCom commented on May 30, 2026

   

   ServeurpersoCom

   on May 30, 2026

   Contributor

   More actions

   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:

   
5. ServeurpersoCom commented on May 30, 2026

   

   ServeurpersoCom

   on May 30, 2026

   Last edited by ServeurpersoCom

   Contributor

   More actions

   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;}
   
6. allozaur

   closed this as completedin #23904on May 30, 2026