[GH-ISSUE #172] feat: Add built-in theme customization #93

New issue

Open

opened 2026-10-18 14:02:50 +00:00 by bsakaguchi · 1 comment

bsakaguchi commented

2026-10-18 14:02:50 +00:00

Owner

Originally created by @JKGeovision on GitHub (Jul 26, 2026).
Original GitHub issue: https://github.com/open-webui/computer/issues/172

Hello,

I'd like to request a theme customization feature to allow users to easily switch and personalize themes without relying on third-party browser extensions.

Currently, users who want to customize the appearance of the app must rely on external tools like the Stylus Firefox extension to manually inject custom CSS into the document. A built-in theme system would provide a more seamless and accessible experience for all users, regardless of their browser or technical setup.

For example, I use this CSS code to mimic the appearance of Open WebUI:

 html {
    color-scheme: dark !important;
    --app-bg: #0f0f0f !important;
    --app-fg: #f1f1f1 !important;
    --app-border: color-mix(in oklab, var(--app-fg) 1.5%, transparent) !important;
    --app-divider: color-mix(in oklab, var(--app-fg) 0.875%, transparent) !important;
}

aside > :nth-child(2) {
    & > a {
        margin: 1px 0px 0px 1px;
        gap: 0.75rem !important;
        font-weight: normal !important;
    }
   
    & > a > img {
        width: 20px;
        height: 20px;
        margin-left: -6px;
    }
}

main {
    --app-bg: #161616;
    --app-border: color-mix(in oklab, var(--app-fg) 5%, transparent);
    background-color: var(--app-bg);
}

#main-col > div {
    --app-bg: #161616;
    --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent);
    background-color: var(--app-bg);
}

.app-surface:has(.chat-editor-mount) {
    --app-bg: #1c1c1c;
    --app-border: transparent;
    position: relative;
    background-color: var(--app-bg);

    & span.truncate {
        max-width: none !important;
    }
   
    &:focus-within, &:hover {
        --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent);
    }
    
    &:after {
        content: '';
        position: absolute;
        bottom: 100%;
        right: 100px;
        width: 40px;
        height: 35px;
        background: url('https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/clawd.png');
        background-size: cover;
        image-rendering: pixelated;
    }
}

.resize-handle, .git-resize-handle {
    background: none !important;
}

div.pane-content > div > div > div > .max-w-full {
    width: 80% !important;

    &.flex-col {
        zoom: 0.95;
    }
   
    & .not-prose:not(.group\/table) {
        background-color: black !important;
    }

    & .chat-editor-mount {
        & ol {
            list-style: decimal;
        }
       
        & ul {
            list-style: disc;
        }
    }
}

button.max-w-32 {
    max-width: none !important;
}

div.svelte-1fbx6nu {
    width: auto !important;
}

div.svelte-1ieqiib .text-left {
    font-weight: normal !important;
}

div.svelte-1ieqiib .text-xs {
    font-size: 13px !important;
}

div.svelte-1onbaf .select-none.text-gray-400 {
    width: 29px;
}

Thank you for considering this feature. It would greatly improve the user experience and accessibility of the app.

Thank you for your work and I wish you all a great day,
Joshua Krimmer

Originally created by @JKGeovision on GitHub (Jul 26, 2026). Original GitHub issue: https://github.com/open-webui/computer/issues/172 Hello, I'd like to request a theme customization feature to allow users to easily switch and personalize themes without relying on third-party browser extensions. Currently, users who want to customize the appearance of the app must rely on external tools like the Stylus Firefox extension to manually inject custom CSS into the document. A built-in theme system would provide a more seamless and accessible experience for all users, regardless of their browser or technical setup. For example, I use this CSS code to mimic the appearance of Open WebUI: ```css html { color-scheme: dark !important; --app-bg: #0f0f0f !important; --app-fg: #f1f1f1 !important; --app-border: color-mix(in oklab, var(--app-fg) 1.5%, transparent) !important; --app-divider: color-mix(in oklab, var(--app-fg) 0.875%, transparent) !important; } aside > :nth-child(2) { & > a { margin: 1px 0px 0px 1px; gap: 0.75rem !important; font-weight: normal !important; } & > a > img { width: 20px; height: 20px; margin-left: -6px; } } main { --app-bg: #161616; --app-border: color-mix(in oklab, var(--app-fg) 5%, transparent); background-color: var(--app-bg); } #main-col > div { --app-bg: #161616; --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent); background-color: var(--app-bg); } .app-surface:has(.chat-editor-mount) { --app-bg: #1c1c1c; --app-border: transparent; position: relative; background-color: var(--app-bg); & span.truncate { max-width: none !important; } &:focus-within, &:hover { --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent); } &:after { content: ''; position: absolute; bottom: 100%; right: 100px; width: 40px; height: 35px; background: url('https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/clawd.png'); background-size: cover; image-rendering: pixelated; } } .resize-handle, .git-resize-handle { background: none !important; } div.pane-content > div > div > div > .max-w-full { width: 80% !important; &.flex-col { zoom: 0.95; } & .not-prose:not(.group\/table) { background-color: black !important; } & .chat-editor-mount { & ol { list-style: decimal; } & ul { list-style: disc; } } } button.max-w-32 { max-width: none !important; } div.svelte-1fbx6nu { width: auto !important; } div.svelte-1ieqiib .text-left { font-weight: normal !important; } div.svelte-1ieqiib .text-xs { font-size: 13px !important; } div.svelte-1onbaf .select-none.text-gray-400 { width: 29px; } ``` Thank you for considering this feature. It would greatly improve the user experience and accessibility of the app. Thank you for your work and I wish you all a great day, Joshua Krimmer

bsakaguchi commented

2026-10-18 14:02:51 +00:00

Author

Owner

@owui-terminator[bot] commented on GitHub (Jul 26, 2026):

🔍 Related Issues Found

I found some existing issues that might be related. Please check if any of these are duplicates or contain helpful solutions:

🟣 #151 bug: Borders less pronounced in newest version, making layout sections hard to distinguish
This issue also focuses on the app’s visual styling and how background/border colors affect readability and section separation. While it is framed as a bug rather than a feature request, it overlaps with the broader theme/customization concern.
by JKGeovision

💡 If your issue is a duplicate, please close it and add any additional details to the existing issue instead.

This comment was generated automatically. React with 👍 if helpful, 👎 if not.

@owui-terminator[bot] commented on GitHub (Jul 26, 2026):  🔍 **Related Issues Found** I found some existing issues that might be related. Please check if any of these are duplicates or contain helpful solutions: 1. 🟣 [#151](https://github.com/open-webui/computer/issues/151) **bug: Borders less pronounced in newest version, making layout sections hard to distinguish** *This issue also focuses on the app’s visual styling and how background/border colors affect readability and section separation. While it is framed as a bug rather than a feature request, it overlaps with the broader theme/customization concern.* *by JKGeovision* --- 💡 If your issue is a duplicate, please close it and add any additional details to the existing issue instead. *This comment was generated automatically.* React with 👍 if helpful, 👎 if not.

bsakaguchi referenced this issue

2026-10-18 14:04:23 +00:00

[PR #93] [MERGED] 0.7.5 #284