Sabo/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add OLED theme

Browse Source 
True black background with subtle borders for OLED displays.
Pure #000 backgrounds, low-opacity borders, and warm accent colors
to minimize burn-in risk and maximize contrast.
This commit is contained in:
Kevin Ho
2026-04-07 17:56:57 +00:00
parent ccabdf9882
commit 40cbd024b9
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/commands.js
View File

@@ -10,7 +10,7 @@ const COMMANDS=[
{name:'workspace', desc:'Switch workspace by name', fn:cmdWorkspace, arg:'name'}, {name:'workspace', desc:'Switch workspace by name', fn:cmdWorkspace, arg:'name'},
{name:'new', desc:'Start a new chat session', fn:cmdNew}, {name:'new', desc:'Start a new chat session', fn:cmdNew},
{name:'usage', desc:'Toggle token usage display on/off', fn:cmdUsage}, {name:'usage', desc:'Toggle token usage display on/off', fn:cmdUsage},
{name:'theme', desc:'Switch theme (dark/light/slate/solarized/monokai/nord)', fn:cmdTheme, arg:'name'}, {name:'theme', desc:'Switch theme (dark/light/slate/solarized/monokai/nord/oled)', fn:cmdTheme, arg:'name'},
{name:'personality', desc:'Switch agent personality', fn:cmdPersonality, arg:'name'}, {name:'personality', desc:'Switch agent personality', fn:cmdPersonality, arg:'name'},
]; ];
@@ -125,7 +125,7 @@ async function cmdUsage(){
} }
async function cmdTheme(args){ async function cmdTheme(args){
const themes=['dark','light','slate','solarized','monokai','nord']; const themes=['dark','light','slate','solarized','monokai','nord','oled'];
if(!args||!themes.includes(args.toLowerCase())){ if(!args||!themes.includes(args.toLowerCase())){
showToast('Usage: /theme '+themes.join('|')); showToast('Usage: /theme '+themes.join('|'));
return; return;

1
static/index.html
View File

@@ -342,6 +342,7 @@
<option value="solarized">Solarized Dark</option> <option value="solarized">Solarized Dark</option>
<option value="monokai">Monokai</option> <option value="monokai">Monokai</option>
<option value="nord">Nord</option> <option value="nord">Nord</option>
<option value="oled">OLED</option>
</select> </select>
</div> </div>
<div class="settings-field"> <div class="settings-field">

8
static/style.css
View File

@@ -100,6 +100,14 @@
--focus-ring:rgba(129,161,193,.35);--focus-glow:rgba(129,161,193,.08); --focus-ring:rgba(129,161,193,.35);--focus-glow:rgba(129,161,193,.08);
--strong:#eceff4;--em:#b8c0cc;--code-text:#a3be8c;--code-inline-bg:rgba(0,0,0,.2);--pre-text:#d8dee9; --strong:#eceff4;--em:#b8c0cc;--code-text:#a3be8c;--code-inline-bg:rgba(0,0,0,.2);--pre-text:#d8dee9;
} }
/* ── OLED theme ── */
:root[data-theme="oled"]{
--bg:#000000;--sidebar:#000000;--border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
--text:#e0e0e0;--muted:#777777;--accent:#ff3b5c;--blue:#6cb4ff;--gold:#d4a74a;--code-bg:#080808;
--surface:#0a0a0a;--topbar-bg:rgba(0,0,0,.98);--main-bg:rgba(0,0,0,0.5);
--focus-ring:rgba(108,180,255,.3);--focus-glow:rgba(108,180,255,.06);
--strong:#ffffff;--em:#c0c0d0;--code-text:#e8b86d;--code-inline-bg:rgba(255,255,255,.06);--pre-text:#d0d0d8;
}
body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;} body{background:var(--bg);color:var(--text);height:100vh;height:100dvh;overflow:hidden;display:flex;}
.layout{display:flex;width:100%;height:100vh;height:100dvh;} .layout{display:flex;width:100%;height:100vh;height:100dvh;}
.sidebar{width:300px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;} .sidebar{width:300px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;}