Feature Request: Reduct contrast in web interface

[niansa]

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

Decrease the contrast of the web interface

Motivation

My eyes are quite sensitive to high contrast between background and text (visual snow syndrome), and the contrast between the background and text of the web interface is high enough to cause me to see an afterimage of white lines for a couple of minutes after reading the text.

Possible Implementation

Make the background a bit brighter, and the text a bit darker

[wbste]

FWIW:

llama.cpp/tools/server/README-dev.md

Line 34 in deab41e

- Customizable themes, it is also costly to maintain. While we do focus on the aesthetic, we try to achieve this by perfecting a small set of themes.

You could use something to inject a theme into the web ui. I pasted the below into the console, but there are extensions/bookmarklets that do this too. Of course building the web ui yourself is always an option. You can launch server with a custom web ui ./llama-server -m model.gguf --path ./your-custom-ui-directory

var s = document.createElement('style');
s.id = 'custom-theme';
s.textContent = `
  .dark {
    --background: oklch(0.2817 0.024 264.07);
    --foreground: oklch(0.9019 0.013 255.06);
    --card: oklch(0.3067 0.025 263.53);
    --card-foreground: oklch(0.9019 0.013 255.06);
    --popover: oklch(0.3067 0.025 263.53);
    --popover-foreground: oklch(0.9019 0.013 255.06);
    --primary: oklch(0.7426 0.147 211.53);
    --primary-foreground: oklch(0.2817 0.024 264.07);
    --secondary: oklch(0.3529 0.027 262.78);
    --secondary-foreground: oklch(0.9019 0.013 255.06);
    --muted: oklch(0.3529 0.027 262.78);
    --muted-foreground: oklch(0.6625 0.024 256.84);
    --accent: oklch(0.7426 0.147 211.53);
    --accent-foreground: oklch(0.2817 0.024 264.07);
    --destructive: oklch(0.6567 0.196 18.97);
    --border: oklch(0.3804 0.029 261.98 / 30%);
    --input: oklch(0.3804 0.029 261.98 / 30%);
    --ring: oklch(0.7426 0.147 211.53);
    --chart-1: oklch(0.7426 0.147 211.53);
    --chart-2: oklch(0.7455 0.141 168.23);
    --chart-3: oklch(0.7941 0.132 97.21);
    --chart-4: oklch(0.6863 0.163 320.45);
    --chart-5: oklch(0.6567 0.196 18.97);
    --sidebar: oklch(0.2588 0.022 264.54);
    --sidebar-foreground: oklch(0.9019 0.013 255.06);
    --sidebar-primary: oklch(0.7426 0.147 211.53);
    --sidebar-primary-foreground: oklch(0.2817 0.024 264.07);
    --sidebar-accent: oklch(0.3529 0.027 262.78);
    --sidebar-accent-foreground: oklch(0.9019 0.013 255.06);
    --sidebar-border: oklch(0.3804 0.029 261.98 / 10%);
    --sidebar-ring: oklch(0.7426 0.147 211.53);
    --code-background: oklch(0.2588 0.022 264.54);
    --code-foreground: oklch(0.9019 0.013 255.06);
  }
`;
document.head.appendChild(s);

[niansa]

Hi, thank you! Yes, that helps me a lot.

But, I would suggest building this into llama.cpp itself? Won't hurt anyone, and will help some.

[erknie]

I need high contrast to read text. It's a common problem in elderly people, therefore changing contrast should be an option not a fixed default.

[wbste]

I agree it's useful but the quote above from the readme says they don't want to maintain different themes.

There are many extensions out there purpose built for custom theming of websites you visit, making the extension route is the only option.

Note within this thread we already have two conflicting themes being requested...

If you use firefox and want a extension-free way of doing this:

1. Go to about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true
2. Go to about:support, open Profile Folder
3. Create chrome/userContent.css inside it
4. Full restart Firefox

@-moz-document domain(llm.my.domain),
               url-prefix(http://localhost:9292),
               url-prefix(http://127.0.0.1:9292) {
    .dark {
        --background: oklch(0.2817 0.024 264.07) !important;
        --foreground: oklch(0.9019 0.013 255.06) !important;
        --card: oklch(0.3067 0.025 263.53) !important;
        --card-foreground: oklch(0.9019 0.013 255.06) !important;
        --popover: oklch(0.3067 0.025 263.53) !important;
        --popover-foreground: oklch(0.9019 0.013 255.06) !important;
        --primary: oklch(0.7426 0.147 211.53) !important;
        --primary-foreground: oklch(0.2817 0.024 264.07) !important;
        --secondary: oklch(0.3529 0.027 262.78) !important;
        --secondary-foreground: oklch(0.9019 0.013 255.06) !important;
        --muted: oklch(0.3529 0.027 262.78) !important;
        --muted-foreground: oklch(0.6625 0.024 256.84) !important;
        --accent: oklch(0.7426 0.147 211.53) !important;
        --accent-foreground: oklch(0.2817 0.024 264.07) !important;
        --destructive: oklch(0.6567 0.196 18.97) !important;
        --border: oklch(0.3804 0.029 261.98 / 30%) !important;
        --input: oklch(0.3804 0.029 261.98 / 30%) !important;
        --ring: oklch(0.7426 0.147 211.53) !important;
        --chart-1: oklch(0.7426 0.147 211.53) !important;
        --chart-2: oklch(0.7455 0.141 168.23) !important;
        --chart-3: oklch(0.7941 0.132 97.21) !important;
        --chart-4: oklch(0.6863 0.163 320.45) !important;
        --chart-5: oklch(0.6567 0.196 18.97) !important;
        --sidebar: oklch(0.2588 0.022 264.54) !important;
        --sidebar-foreground: oklch(0.9019 0.013 255.06) !important;
        --sidebar-primary: oklch(0.7426 0.147 211.53) !important;
        --sidebar-primary-foreground: oklch(0.2817 0.024 264.07) !important;
        --sidebar-accent: oklch(0.3529 0.027 262.78) !important;
        --sidebar-accent-foreground: oklch(0.9019 0.013 255.06) !important;
        --sidebar-border: oklch(0.3804 0.029 261.98 / 10%) !important;
        --sidebar-ring: oklch(0.7426 0.147 211.53) !important;
        --code-background: oklch(0.2588 0.022 264.54) !important;
        --code-foreground: oklch(0.9019 0.013 255.06) !important;
    }
}

Use domain() for production, url-prefix() for localhost (handles ports). Add !important if the site's bundle loads after your file.

Debugging

• Style Editor tab in DevTools — confirms file loaded and shows parsed rules
• Inspector → Styles panel — shows if your rule is active or crossed out (overridden)
• Check which element actually carries the dark class before choosing your selector
• Test with body { outline: 5px solid red !important; } to confirm the file is being picked up

[niansa]

Why not just have one single theme but with a "high contrast" mode for those who need it?