jinghui/hermes-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge #4738 (savagebread neon skins + skin-persistence fix) into stage

Browse Source
This commit is contained in:
nesquena-hermes committed 2026-06-30 22:21:28 +00:00
2 parents 7d19792a4a 0b2507ac9f
commit 3e84d7bf11
4 files changed
+137 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

api/config.py
+2
View File
@@ -7890,6 +7890,8 @@ _SETTINGS_SKIN_VALUES = {
"geist-contrast",
"zeus",
"verdigris",
"neon-soft",
"neon-paint",
}
_SETTINGS_LEGACY_THEME_MAP = {
# Legacy full themes now map onto the closest supported theme + accent skin pair.
static/boot.js
+2
View File
@@ -2022,6 +2022,8 @@ const _SKINS=[
{name:'Hepburn', colors:['#c6246a','#ec5597','#f2abca']},
{name:'Nous', colors:['#4682B4','#3A6E9A','#2C5F88']},
{name:'Neon', colors:['#B347FF','#C76BFF','#00DDFF']},
{name:'Neon Soft', value:'neon-soft', colors:['#B347FF','#C76BFF','#00DDFF']},
{name:'Neon Paint', value:'neon-paint', colors:['#FF2D95','#00E5FF','#FFB800']},
{name:'Geist Contrast', value:'geist-contrast', colors:['#000000','#ffffff','#FFF175']},
{name:'Zeus', colors:['#FFD700','#FFBF00','#1A1A00']},
{name:'Verdigris', value:'verdigris', colors:['#C89A5A','#0F1714','#22342C']},
static/index.html
+1 -1
View File
@@ -17,7 +17,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Hermes">
<link rel="apple-touch-icon" sizes="512x512" href="static/apple-touch-icon.png">
<script>(function(){try{var themes={light:1,dark:1,system:1},skins={codex:1,terracotta:1,default:1,ares:1,mono:1,graphite:1,github:1,slate:1,poseidon:1,sisyphus:1,charizard:1,sienna:1,catppuccin:1,hepburn:1,nous:1,'geist-contrast':1,neon:1,zeus:1,'verdigris':1},legacy={slate:['dark','slate'],solarized:['dark','poseidon'],monokai:['dark','sisyphus'],nord:['dark','slate'],oled:['dark','default']},t=(localStorage.getItem('hermes-theme')||'dark').toLowerCase(),s=(localStorage.getItem('hermes-skin')||'').toLowerCase(),m=legacy[t],theme=m?m[0]:(themes[t]?t:'dark');var pendingExt=s&&s!=='default'&&!skins[s]&&!legacy[s];var skin=skins[s]?s:(pendingExt?s:(m?m[1]:'default'));localStorage.setItem('hermes-theme',theme);localStorage.setItem('hermes-skin',skin);if(theme==='system')theme=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';if(theme==='dark')document.documentElement.classList.add('dark');if(skin!=='default')document.documentElement.dataset.skin=skin;}catch(e){document.documentElement.classList.add('dark');}})()</script>
<script>(function(){try{var themes={light:1,dark:1,system:1},skins={codex:1,terracotta:1,default:1,ares:1,mono:1,graphite:1,github:1,slate:1,poseidon:1,sisyphus:1,charizard:1,sienna:1,catppuccin:1,hepburn:1,nous:1,'geist-contrast':1,neon:1,'neon-soft':1,'neon-paint':1,zeus:1,'verdigris':1},legacy={slate:['dark','slate'],solarized:['dark','poseidon'],monokai:['dark','sisyphus'],nord:['dark','slate'],oled:['dark','default']},t=(localStorage.getItem('hermes-theme')||'dark').toLowerCase(),s=(localStorage.getItem('hermes-skin')||'').toLowerCase(),m=legacy[t],theme=m?m[0]:(themes[t]?t:'dark');var pendingExt=s&&s!=='default'&&!skins[s]&&!legacy[s];var skin=skins[s]?s:(pendingExt?s:(m?m[1]:'default'));localStorage.setItem('hermes-theme',theme);localStorage.setItem('hermes-skin',skin);if(theme==='system')theme=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';if(theme==='dark')document.documentElement.classList.add('dark');if(skin!=='default')document.documentElement.dataset.skin=skin;}catch(e){document.documentElement.classList.add('dark');}})()</script>
<script>(function(){try{var fs=localStorage.getItem('hermes-font-size');if(fs&&fs!=='default')document.documentElement.dataset.fontSize=fs;}catch(e){}})()</script>
<!-- theme-color: surfaces the active app chrome color to native status bars (Safari status bar, PWA, native WKWebView wrappers). Updated dynamically by boot.js when theme/skin changes. The light/dark default values match style.css :root --sidebar / :root.dark --sidebar. -->
<meta name="theme-color" content="#FAF7F0" media="(prefers-color-scheme: light)">
static/style.css
+132
View File
@@ -1134,6 +1134,138 @@
:root.dark[data-skin="neon"] a{color:var(--info);transition:text-shadow 0.2s;}
:root.dark[data-skin="neon"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);}
/* ═══ NEON SOFT — lighter dark-mode surfaces with the same neon purple/cyan palette ═══ */
:root[data-skin="neon-soft"]{
--bg:#F8F7FC;--sidebar:#F0EEF8;--border:#D8D4EC;--border2:rgba(0,0,0,0.12);
--text:#1E1B2E;--muted:#6E6888;--accent:#9333EA;--blue:#7C3AED;--gold:#A855F7;--code-bg:#F0EDF8;
--surface:#FFFFFF;--topbar-bg:rgba(248,247,252,.98);--main-bg:rgba(248,247,252,0.5);
--focus-ring:rgba(147,51,234,.3);--focus-glow:rgba(147,51,234,.08);
--input-bg:rgba(147,51,234,.03);--hover-bg:rgba(147,51,234,.05);
--strong:#0D0B14;--em:#7C3AED;--code-text:#6D28D9;--code-inline-bg:rgba(147,51,234,.08);--pre-text:#1E1B2E;
--accent-hover:#7E22CE;--accent-bg:rgba(147,51,234,0.06);--accent-bg-strong:rgba(147,51,234,0.12);--accent-text:#6D28D9;
--error:#DC2626;--success:#059669;--warning:#D97706;--info:#7C3AED;
--radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px;
--font-ui:system-ui,-apple-system,sans-serif;
--surface-subtle:rgba(147,51,234,.025);--surface-subtle-hover:rgba(147,51,234,.05);
--border-subtle:rgba(147,51,234,.08);--border-muted:rgba(147,51,234,.12);
--purple:#9333EA;
}
:root.dark[data-skin="neon-soft"]{
--bg:#181428;--sidebar:#141024;--border:#2a2448;--border2:rgba(179,71,255,0.15);
--text:#e8e6f8;--muted:#8a85aa;--accent:#b347ff;--blue:#a78bfa;--gold:#c084fc;--code-bg:#121020;
--surface:#1c1732;--topbar-bg:rgba(24,20,40,.98);--main-bg:rgba(24,20,40,0.5);
--focus-ring:rgba(179,71,255,.35);--focus-glow:rgba(179,71,255,.10);
--input-bg:rgba(179,71,255,.04);--hover-bg:rgba(179,71,255,.06);
--strong:#f8f6ff;--em:#00ddff;--code-text:#c8c0f0;--code-inline-bg:rgba(179,71,255,.10);--pre-text:#e8e6f8;
--accent-hover:#c76bff;--accent-bg:rgba(179,71,255,0.10);--accent-bg-strong:rgba(179,71,255,0.20);--accent-text:#c8a0ff;
--error:#ff4466;--success:#00dd88;--warning:#ffaa33;--info:#00ddff;
--surface-subtle:rgba(179,71,255,.03);--surface-subtle-hover:rgba(179,71,255,.06);
--border-subtle:rgba(179,71,255,.08);--border-muted:rgba(179,71,255,.12);
--purple:#b347ff;
}
/* Neon Soft: component-level overrides (same as Neon, targeting neon-soft) */
:root.dark[data-skin="neon-soft"] ::selection{background:rgba(179,71,255,0.35);color:#fff;}
:root.dark[data-skin="neon-soft"] .app-titlebar{border-bottom-color:rgba(179,71,255,0.2);}
:root.dark[data-skin="neon-soft"] .sidebar{box-shadow:inset -1px 0 30px rgba(179,71,255,0.03);}
:root.dark[data-skin="neon-soft"] textarea:focus,
:root.dark[data-skin="neon-soft"] input[type="text"]:focus,
:root.dark[data-skin="neon-soft"] input[type="password"]:focus,
:root.dark[data-skin="neon-soft"] select:focus{box-shadow:0 0 16px rgba(179,71,255,0.2);}
:root.dark[data-skin="neon-soft"] button.send-btn{box-shadow:0 0 14px rgba(179,71,255,0.25);}
:root.dark[data-skin="neon-soft"] button.send-btn:hover{box-shadow:0 0 24px rgba(179,71,255,0.45);}
:root.dark[data-skin="neon-soft"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 12px rgba(179,71,255,0.2);}
:root.dark[data-skin="neon-soft"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 20px rgba(179,71,255,0.35);}
:root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb{background:rgba(179,71,255,.18);border-radius:3px;}
:root.dark[data-skin="neon-soft"]::-webkit-scrollbar-thumb:hover{background:rgba(179,71,255,.30);}
:root.dark[data-skin="neon-soft"]{scrollbar-width:thin;scrollbar-color:rgba(179,71,255,.18) transparent;}
:root.dark[data-skin="neon-soft"] .tool-card{background:rgba(179,71,255,0.03);border-color:rgba(179,71,255,0.08);}
:root.dark[data-skin="neon-soft"] .tool-card:hover{border-color:rgba(179,71,255,0.2);}
:root.dark[data-skin="neon-soft"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
:root.dark[data-skin="neon-soft"] .tool-card-name{color:var(--muted);font-weight:500;}
:root.dark[data-skin="neon-soft"] .tool-arg-key,
:root.dark[data-skin="neon-soft"] .tool-card-more{color:var(--accent-text);}
:root.dark[data-skin="neon-soft"] .tool-card-running-dot{background:var(--accent);}
:root.dark[data-skin="neon-soft"] .tree-key{color:#b347ff;}
:root.dark[data-skin="neon-soft"] .tree-str{color:#c8a0ff;}
:root.dark[data-skin="neon-soft"] .tree-num{color:#00ddff;}
:root.dark[data-skin="neon-soft"] .tree-bool{color:#b347ff;}
:root.dark[data-skin="neon-soft"] .session-child-count{background:rgba(179,71,255,.16);color:#c8a0ff;}
:root.dark[data-skin="neon-soft"] .session-child-count:hover{background:rgba(179,71,255,.26);color:#d8c0ff;}
:root.dark[data-skin="neon-soft"] .session-tree-badge{background:rgba(179,71,255,.2);color:#c8a0ff;}
:root.dark[data-skin="neon-soft"] .session-tag{background:rgba(179,71,255,.2);color:#c8a0ff;}
:root.dark[data-skin="neon-soft"] .diff-block .diff-plus{color:#b347ff;}
:root.dark[data-skin="neon-soft"] .mcp-http{color:#c8a0ff;}
:root.dark[data-skin="neon-soft"] .mcp-status-active{color:#00dd88;}
:root.dark[data-skin="neon-soft"] .img-lightbox-close:hover{background:rgba(179,71,255,.35);}
:root.dark[data-skin="neon-soft"] a{color:var(--info);transition:text-shadow 0.2s;}
:root.dark[data-skin="neon-soft"] a:hover{text-shadow:0 0 8px rgba(0,221,255,0.4);}
/* ═══ NEON PAINT — cyberpunk noodle bar: hot pink + electric cyan + warm amber on deep purple-gray ═══ */
:root[data-skin="neon-paint"]{
--bg:#F5F0FF;--sidebar:#EDE6F8;--border:#D4C8EE;--border2:rgba(0,0,0,0.12);
--text:#1A1028;--muted:#6E5A88;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#EDE6F8;
--surface:#FFFFFF;--topbar-bg:rgba(245,240,255,.98);--main-bg:rgba(245,240,255,0.5);
--focus-ring:rgba(255,45,149,.3);--focus-glow:rgba(255,45,149,.08);
--input-bg:rgba(255,45,149,.03);--hover-bg:rgba(255,45,149,.05);
--strong:#0D0518;--em:#00E5FF;--code-text:#D81B60;--code-inline-bg:rgba(255,45,149,.08);--pre-text:#1A1028;
--accent-hover:#E91E80;--accent-bg:rgba(255,45,149,0.06);--accent-bg-strong:rgba(255,45,149,0.12);--accent-text:#C2185B;
--error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF;
--radius-sm:2px;--radius-md:4px;--radius-card:4px;--radius-lg:6px;
--font-ui:system-ui,-apple-system,sans-serif;
--surface-subtle:rgba(255,45,149,.025);--surface-subtle-hover:rgba(255,45,149,.05);
--border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12);
--purple:#FF2D95;
}
:root.dark[data-skin="neon-paint"]{
--bg:#0D0A16;--sidebar:#0A0712;--border:#2a1f40;--border2:rgba(255,45,149,0.15);
--text:#f0e8ff;--muted:#9a8ab8;--accent:#FF2D95;--blue:#00E5FF;--gold:#FFB800;--code-bg:#080510;
--surface:#12101e;--topbar-bg:rgba(13,10,22,.98);--main-bg:rgba(13,10,22,0.5);
--focus-ring:rgba(255,45,149,.4);--focus-glow:rgba(255,45,149,.12);
--input-bg:rgba(255,45,149,.04);--hover-bg:rgba(255,45,149,.06);
--strong:#fff5ff;--em:#00E5FF;--code-text:#f0c0e8;--code-inline-bg:rgba(255,45,149,.12);--pre-text:#f0e8ff;
--accent-hover:#FF59A8;--accent-bg:rgba(255,45,149,0.10);--accent-bg-strong:rgba(255,45,149,0.20);--accent-text:#FF80BF;
--error:#FF1744;--success:#00E676;--warning:#FFB300;--info:#00E5FF;
--surface-subtle:rgba(255,45,149,.03);--surface-subtle-hover:rgba(255,45,149,.06);
--border-subtle:rgba(255,45,149,.08);--border-muted:rgba(255,45,149,.12);
--purple:#FF2D95;
}
/* Neon Paint: component-level overrides */
:root.dark[data-skin="neon-paint"] ::selection{background:rgba(255,45,149,0.4);color:#fff;}
:root.dark[data-skin="neon-paint"] .app-titlebar{border-bottom-color:rgba(255,45,149,0.25);}
:root.dark[data-skin="neon-paint"] .sidebar{box-shadow:inset -1px 0 30px rgba(255,45,149,0.04);}
:root.dark[data-skin="neon-paint"] textarea:focus,
:root.dark[data-skin="neon-paint"] input[type="text"]:focus,
:root.dark[data-skin="neon-paint"] input[type="password"]:focus,
:root.dark[data-skin="neon-paint"] select:focus{box-shadow:0 0 18px rgba(255,45,149,0.25);}
:root.dark[data-skin="neon-paint"] button.send-btn{box-shadow:0 0 16px rgba(255,45,149,0.3);}
:root.dark[data-skin="neon-paint"] button.send-btn:hover{box-shadow:0 0 28px rgba(255,45,149,0.5);}
:root.dark[data-skin="neon-paint"] .new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 0 14px rgba(255,45,149,0.25);}
:root.dark[data-skin="neon-paint"] .new-chat-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 24px rgba(255,45,149,0.4);}
:root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb{background:rgba(255,45,149,.20);border-radius:3px;}
:root.dark[data-skin="neon-paint"]::-webkit-scrollbar-thumb:hover{background:rgba(255,45,149,.35);}
:root.dark[data-skin="neon-paint"]{scrollbar-width:thin;scrollbar-color:rgba(255,45,149,.20) transparent;}
:root.dark[data-skin="neon-paint"] .tool-card{background:rgba(255,45,149,0.03);border-color:rgba(255,45,149,0.08);}
:root.dark[data-skin="neon-paint"] .tool-card:hover{border-color:rgba(255,45,149,0.25);}
:root.dark[data-skin="neon-paint"] .tool-card-running{background:var(--accent-bg);border-color:var(--accent-bg-strong);}
:root.dark[data-skin="neon-paint"] .tool-card-name{color:var(--muted);font-weight:500;}
:root.dark[data-skin="neon-paint"] .tool-arg-key,
:root.dark[data-skin="neon-paint"] .tool-card-more{color:var(--accent-text);}
:root.dark[data-skin="neon-paint"] .tool-card-running-dot{background:var(--accent);}
:root.dark[data-skin="neon-paint"] .tree-key{color:#FF2D95;}
:root.dark[data-skin="neon-paint"] .tree-str{color:#FF80BF;}
:root.dark[data-skin="neon-paint"] .tree-num{color:#00E5FF;}
:root.dark[data-skin="neon-paint"] .tree-bool{color:#FF2D95;}
:root.dark[data-skin="neon-paint"] .session-child-count{background:rgba(255,45,149,.16);color:#FF80BF;}
:root.dark[data-skin="neon-paint"] .session-child-count:hover{background:rgba(255,45,149,.28);color:#FFA0D0;}
:root.dark[data-skin="neon-paint"] .session-tree-badge{background:rgba(255,45,149,.2);color:#FF80BF;}
:root.dark[data-skin="neon-paint"] .session-tag{background:rgba(255,45,149,.2);color:#FF80BF;}
:root.dark[data-skin="neon-paint"] .diff-block .diff-plus{color:#FF2D95;}
:root.dark[data-skin="neon-paint"] .mcp-http{color:#FF80BF;}
:root.dark[data-skin="neon-paint"] .mcp-status-active{color:#00E676;}
:root.dark[data-skin="neon-paint"] .img-lightbox-close:hover{background:rgba(255,45,149,.35);}
:root.dark[data-skin="neon-paint"] a{color:var(--info);transition:text-shadow 0.2s;}
:root.dark[data-skin="neon-paint"] a:hover{text-shadow:0 0 10px rgba(0,229,255,0.5);}
/* ═══ VERDIGRIS — emerald/bronze dashboard palette (dark-only) ═══ */
:root.dark[data-skin="verdigris"]{
--bg:#0F1714;--sidebar:#121D18;--border:#22342C;--border2:rgba(200,154,90,0.10);