Revert "fix: eliminate brownish yellow tints and enforce dark color scheme"

This reverts commit 0d9c48ce603f9947f8c49cd3678a44671e1df8f5.
This commit is contained in:
Alex Cheema
2026-02-21 11:07:46 -08:00
parent e5fb35d08e
commit 76c058cf97
15 changed files with 67 additions and 69 deletions
-1
View File
@@ -80,7 +80,6 @@
}
html, body {
@apply bg-background text-foreground;
color-scheme: dark;
font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
letter-spacing: 0.02em;
}
-1
View File
@@ -4,7 +4,6 @@
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark" />
<title>EXO</title>
%sveltekit.head%
</head>
+2 -2
View File
@@ -396,7 +396,7 @@
<!-- Edit mode banner -->
{#if isEditMode && currentEditingImage}
<div
class="flex items-center gap-3 px-3 py-2 bg-exo-medium-gray/40 border-b border-exo-yellow/20"
class="flex items-center gap-3 px-3 py-2 bg-exo-yellow/10 border-b border-exo-yellow/30"
>
<img
src={currentEditingImage.imageDataUrl}
@@ -551,7 +551,7 @@
type="button"
onclick={() => setConversationThinking(!thinkingEnabled)}
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono tracking-wide transition-all duration-200 flex-shrink-0 cursor-pointer border {thinkingEnabled
? 'bg-exo-medium-gray/50 border-exo-yellow/30 text-exo-yellow'
? 'bg-exo-yellow/15 border-exo-yellow/40 text-exo-yellow'
: 'bg-exo-medium-gray/30 border-exo-medium-gray/50 text-exo-light-gray/60 hover:text-exo-light-gray'}"
title={thinkingEnabled
? "Thinking enabled — click to disable"
@@ -378,7 +378,7 @@
handleSelectConversation(conversation.id)}
class="group w-full flex items-center justify-between p-2.5 rounded-lg mb-1 transition-all text-left cursor-pointer
{activeId === conversation.id
? 'bg-white/[0.05] border border-exo-yellow/20'
? 'bg-exo-yellow/5 border border-exo-yellow/30'
: 'hover:bg-white/[0.03] hover:border-white/10 border border-transparent'}"
>
<div class="flex-1 min-w-0 pr-2">
@@ -49,7 +49,7 @@
onclick={() => onSelect(null)}
class="group flex flex-col items-center justify-center p-2 rounded transition-all duration-200 cursor-pointer {selectedFamily ===
null
? 'bg-white/[0.08] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/20 border-l-2 border-exo-yellow'
: 'hover:bg-white/5 border-l-2 border-transparent'}"
title="All models"
>
@@ -78,19 +78,19 @@
onclick={() => onSelect("favorites")}
class="group flex flex-col items-center justify-center p-2 rounded transition-all duration-200 cursor-pointer {selectedFamily ===
'favorites'
? 'bg-white/[0.08] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/20 border-l-2 border-exo-yellow'
: 'hover:bg-white/5 border-l-2 border-transparent'}"
title="Show favorited models"
>
<FamilyLogos
family="favorites"
class={selectedFamily === "favorites"
? "text-exo-yellow"
: "text-white/50 group-hover:text-exo-yellow/70"}
? "text-amber-400"
: "text-white/50 group-hover:text-amber-400/70"}
/>
<span
class="text-[9px] font-mono mt-0.5 {selectedFamily === 'favorites'
? 'text-exo-yellow'
? 'text-amber-400'
: 'text-white/40 group-hover:text-white/60'}">Faves</span
>
</button>
@@ -103,7 +103,7 @@
onclick={() => onSelect("recents")}
class="group flex flex-col items-center justify-center p-2 rounded transition-all duration-200 cursor-pointer {selectedFamily ===
'recents'
? 'bg-white/[0.08] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/20 border-l-2 border-exo-yellow'
: 'hover:bg-white/5 border-l-2 border-transparent'}"
title="Recently launched models"
>
@@ -144,7 +144,7 @@
>
</button>
<div class="h-px bg-white/[0.06] my-1"></div>
<div class="h-px bg-exo-yellow/10 my-1"></div>
<!-- Model families -->
{#each families as family}
@@ -153,7 +153,7 @@
onclick={() => onSelect(family)}
class="group flex flex-col items-center justify-center p-2 rounded transition-all duration-200 cursor-pointer {selectedFamily ===
family
? 'bg-white/[0.08] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/20 border-l-2 border-exo-yellow'
: 'hover:bg-white/5 border-l-2 border-transparent'}"
title={getFamilyName(family)}
>
@@ -125,7 +125,7 @@
<button
type="button"
onclick={onSelect}
class="px-3 py-1.5 text-xs font-mono tracking-wider uppercase bg-exo-medium-gray/50 text-exo-yellow border border-exo-yellow/20 hover:bg-exo-medium-gray/70 transition-colors rounded cursor-pointer"
class="px-3 py-1.5 text-xs font-mono tracking-wider uppercase bg-exo-yellow/10 text-exo-yellow border border-exo-yellow/30 hover:bg-exo-yellow/20 transition-colors rounded cursor-pointer"
>
Select
</button>
@@ -491,7 +491,7 @@
<div
class="bg-exo-dark-gray/60 border {canFit
? 'border-exo-yellow/20 group-hover:border-exo-yellow/40'
: 'border-red-500/20'} p-3 transition-all duration-200 group-hover:shadow-[0_0_15px_rgba(255,215,0,0.06)]"
: 'border-red-500/20'} p-3 transition-all duration-200 group-hover:shadow-[0_0_15px_rgba(255,215,0,0.1)]"
>
<!-- Model Name & Memory Required -->
<div class="flex items-start justify-between gap-2 mb-2">
@@ -981,7 +981,7 @@
0.75} {node.iconSize /
2},{node.iconSize} 0,{node.iconSize *
0.75} 0,{node.iconSize * 0.25}"
fill={node.isUsed ? "rgba(60,60,50,0.6)" : "#0a0a0a"}
fill={node.isUsed ? "rgba(255,215,0,0.1)" : "#0a0a0a"}
stroke={node.isUsed ? "#FFD700" : "#4B5563"}
stroke-width="1.5"
/>
@@ -88,7 +88,7 @@
<button
type="button"
class="px-2 py-1 text-xs font-mono rounded transition-colors {isSelected
? 'bg-exo-medium-gray/60 text-exo-yellow border border-exo-yellow/25'
? 'bg-exo-yellow/20 text-exo-yellow border border-exo-yellow/30'
: 'bg-white/5 text-white/60 hover:bg-white/10 border border-transparent'}"
onclick={() => toggleCapability(cap.id)}
>
@@ -232,7 +232,7 @@
<button
type="button"
class="px-2 py-1 text-xs font-mono rounded transition-colors {isSelected
? 'bg-exo-medium-gray/60 text-exo-yellow border border-exo-yellow/25'
? 'bg-exo-yellow/20 text-exo-yellow border border-exo-yellow/30'
: 'bg-white/5 text-white/60 hover:bg-white/10 border border-transparent'}"
onclick={() => selectSizeRange(range)}
>
@@ -134,7 +134,7 @@
class="flex items-center gap-2 px-3 py-2.5 transition-colors {anyVariantFits
? 'hover:bg-white/5 cursor-pointer'
: 'cursor-not-allowed'} {isMainSelected
? 'bg-white/[0.06] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/10 border-l-2 border-exo-yellow'
: 'border-l-2 border-transparent'}"
onclick={() => {
if (group.hasMultipleVariants) {
@@ -369,7 +369,7 @@
>
{#if isFavorite}
<svg
class="w-4 h-4 text-exo-yellow"
class="w-4 h-4 text-amber-400"
viewBox="0 0 24 24"
fill="currentColor"
>
@@ -426,7 +426,7 @@
class="w-full flex items-center gap-3 px-3 py-2 pl-10 hover:bg-white/5 transition-colors text-left {!modelCanFit
? 'opacity-50 cursor-not-allowed'
: 'cursor-pointer'} {isSelected
? 'bg-white/[0.06] border-l-2 border-exo-yellow'
? 'bg-exo-yellow/10 border-l-2 border-exo-yellow'
: 'border-l-2 border-transparent'}"
disabled={!modelCanFit}
onclick={() => {
@@ -931,7 +931,7 @@
>
<span>Filters:</span>
{#each filters.capabilities as cap}
<span class="px-1.5 py-0.5 bg-exo-medium-gray/60 text-exo-yellow rounded"
<span class="px-1.5 py-0.5 bg-exo-yellow/20 text-exo-yellow rounded"
>{cap}</span
>
{/each}
@@ -941,7 +941,7 @@
>
{/if}
{#if filters.sizeRange}
<span class="px-1.5 py-0.5 bg-exo-medium-gray/60 text-exo-yellow rounded">
<span class="px-1.5 py-0.5 bg-exo-yellow/20 text-exo-yellow rounded">
{filters.sizeRange.min}GB - {filters.sizeRange.max}GB
</span>
{/if}
@@ -20,9 +20,9 @@
iconColor: "text-red-400",
},
warning: {
border: "border-l-exo-yellow",
border: "border-l-yellow-500",
icon: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126z",
iconColor: "text-exo-yellow",
iconColor: "text-yellow-400",
},
info: {
border: "border-l-blue-500",
@@ -40,7 +40,7 @@
function getConfidenceClass(probability: number): string {
if (probability > 0.8) return "text-inherit"; // Expected tokens - blend in
if (probability > 0.5) return "bg-gray-500/10 text-inherit"; // Slight hint
if (probability > 0.2) return "bg-exo-medium-gray/40 text-exo-yellow/90"; // Subtle warmth
if (probability > 0.2) return "bg-amber-500/15 text-amber-200/90"; // Subtle warmth
return "bg-red-500/20 text-red-200/90"; // Draws attention
}
@@ -50,7 +50,7 @@
function getBorderClass(probability: number): string {
if (probability > 0.8) return "border-transparent"; // No border for expected
if (probability > 0.5) return "border-gray-500/20";
if (probability > 0.2) return "border-exo-yellow/25";
if (probability > 0.2) return "border-amber-500/30";
return "border-red-500/40";
}
@@ -128,7 +128,7 @@
function getProbabilityColor(probability: number): string {
if (probability > 0.8) return "text-gray-300";
if (probability > 0.5) return "text-gray-400";
if (probability > 0.2) return "text-exo-yellow";
if (probability > 0.2) return "text-amber-400";
return "text-red-400";
}
</script>
@@ -221,7 +221,7 @@
.attr("y", centerY)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "middle")
.attr("fill", "rgba(179,179,179,0.5)")
.attr("fill", "rgba(255,215,0,0.4)")
.attr("font-size", isMinimized ? 10 : 12)
.attr("font-family", "SF Mono, monospace")
.attr("letter-spacing", "0.1em")
@@ -575,12 +575,12 @@
: "rgba(179,179,179,0.8)"; // Default
const wireColorBright = "rgba(255,255,255,0.9)";
const fillColor = isInFilter
? "rgba(255,255,255,0.12)"
? "rgba(255,215,0,0.25)"
: isHovered
? "rgba(255,255,255,0.06)"
? "rgba(255,215,0,0.12)"
: isHighlighted
? "rgba(255,255,255,0.08)"
: "rgba(255,255,255,0.03)";
? "rgba(255,215,0,0.15)"
: "rgba(255,215,0,0.08)";
const strokeWidth = isInFilter
? 3
: isHovered
+35 -35
View File
@@ -1551,7 +1551,7 @@
case "WARMING UP":
case "WAITING":
case "INITIALIZING":
return "text-exo-yellow";
return "text-yellow-400";
case "RUNNING":
return "text-teal-400";
case "READY":
@@ -2196,10 +2196,10 @@
{@const disableCmd = `sudo networksetup -setnetworkserviceenabled "${serviceName}" off`}
<div class="group relative" role="alert">
<div
class="flex items-center gap-2 px-3 py-2 rounded border border-exo-yellow/20 bg-exo-medium-gray/50 backdrop-blur-sm cursor-help"
class="flex items-center gap-2 px-3 py-2 rounded border border-yellow-500/50 bg-yellow-500/10 backdrop-blur-sm cursor-help"
>
<svg
class="w-5 h-5 text-exo-yellow flex-shrink-0"
class="w-5 h-5 text-yellow-400 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -2211,25 +2211,25 @@
d={warningIconPath}
/>
</svg>
<span class="text-sm font-mono text-exo-yellow">
<span class="text-sm font-mono text-yellow-200">
THUNDERBOLT BRIDGE CYCLE DETECTED
</span>
</div>
<!-- Tooltip on hover -->
<div
class="absolute top-full left-0 mt-2 w-80 p-3 rounded border border-exo-yellow/15 bg-exo-dark-gray/95 backdrop-blur-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg"
class="absolute top-full left-0 mt-2 w-80 p-3 rounded border border-yellow-500/30 bg-exo-dark-gray/95 backdrop-blur-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg"
>
<p class="text-xs text-white/80 mb-2">
A network routing cycle was detected between nodes connected via
Thunderbolt Bridge. This can cause connectivity issues.
</p>
<p class="text-xs text-white/60 mb-2">
<span class="text-exo-yellow">Affected nodes:</span>
<span class="text-yellow-300">Affected nodes:</span>
{cycle.map(getNodeName).join(" → ")}
</p>
<p class="text-xs text-white/60 mb-1">
<span class="text-exo-yellow">To fix:</span> Disable the Thunderbolt
<span class="text-yellow-300">To fix:</span> Disable the Thunderbolt
Bridge on one of the affected nodes:
</p>
<button
@@ -2268,10 +2268,10 @@
{#if macosVersionMismatch}
<div class="group relative" role="alert">
<div
class="flex items-center gap-2 px-3 py-2 rounded border border-exo-yellow/20 bg-exo-medium-gray/50 backdrop-blur-sm cursor-help"
class="flex items-center gap-2 px-3 py-2 rounded border border-yellow-500/50 bg-yellow-500/10 backdrop-blur-sm cursor-help"
>
<svg
class="w-5 h-5 text-exo-yellow flex-shrink-0"
class="w-5 h-5 text-yellow-400 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -2283,21 +2283,21 @@
d={warningIconPath}
/>
</svg>
<span class="text-sm font-mono text-exo-yellow">
<span class="text-sm font-mono text-yellow-200">
INCOMPATIBLE macOS VERSIONS
</span>
</div>
<!-- Tooltip on hover -->
<div
class="absolute top-full left-0 mt-2 w-80 p-3 rounded border border-exo-yellow/15 bg-exo-dark-gray/95 backdrop-blur-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg"
class="absolute top-full left-0 mt-2 w-80 p-3 rounded border border-yellow-500/30 bg-exo-dark-gray/95 backdrop-blur-sm opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 shadow-lg"
>
<p class="text-xs text-white/80 mb-2">
Nodes in this cluster are running different macOS versions. This
may cause inference compatibility issues.
</p>
<div class="text-xs text-white/60 mb-2">
<span class="text-exo-yellow">Node versions:</span>
<span class="text-yellow-300">Node versions:</span>
{#each macosVersionMismatch as node}
<div class="ml-2">
{node.friendlyName} — macOS {node.version} ({node.buildVersion})
@@ -2305,7 +2305,7 @@
{/each}
</div>
<p class="text-xs text-white/60">
<span class="text-exo-yellow">Suggested action:</span> Update all nodes
<span class="text-yellow-300">Suggested action:</span> Update all nodes
to the same macOS version for best compatibility.
</p>
</div>
@@ -2641,11 +2641,11 @@
<div class="absolute top-2 left-2 flex flex-col gap-1">
{#if tbBridgeCycles.length > 0}
<div
class="flex items-center gap-1.5 px-2 py-1 rounded border border-exo-yellow/20 bg-exo-medium-gray/50 backdrop-blur-sm"
class="flex items-center gap-1.5 px-2 py-1 rounded border border-yellow-500/50 bg-yellow-500/10 backdrop-blur-sm"
title="Thunderbolt Bridge cycle detected"
>
<svg
class="w-3.5 h-3.5 text-exo-yellow"
class="w-3.5 h-3.5 text-yellow-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -2657,16 +2657,16 @@
d={warningIconPath}
/>
</svg>
<span class="text-[10px] font-mono text-exo-yellow">TB CYCLE</span>
<span class="text-[10px] font-mono text-yellow-200">TB CYCLE</span>
</div>
{/if}
{#if macosVersionMismatch}
<div
class="flex items-center gap-1.5 px-2 py-1 rounded border border-exo-yellow/20 bg-exo-medium-gray/50 backdrop-blur-sm"
class="flex items-center gap-1.5 px-2 py-1 rounded border border-yellow-500/50 bg-yellow-500/10 backdrop-blur-sm"
title="Incompatible macOS versions detected"
>
<svg
class="w-3.5 h-3.5 text-exo-yellow"
class="w-3.5 h-3.5 text-yellow-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -2678,7 +2678,7 @@
d={warningIconPath}
/>
</svg>
<span class="text-[10px] font-mono text-exo-yellow"
<span class="text-[10px] font-mono text-yellow-200"
>macOS MISMATCH</span
>
</div>
@@ -3125,7 +3125,7 @@
type="button"
onclick={() => onboardingLaunchModel(model.id)}
class="w-full flex items-center justify-between gap-4 px-5 py-4 rounded-xl border transition-all duration-200 cursor-pointer {fitsNow
? 'border-white/10 bg-white/5 hover:border-exo-yellow/50 hover:bg-white/[0.06]'
? 'border-white/10 bg-white/5 hover:border-exo-yellow/50 hover:bg-exo-yellow/5'
: 'border-white/10 bg-white/[0.02] hover:border-white/20 opacity-60'}"
>
<div class="flex flex-col items-start gap-1 min-w-0">
@@ -3136,7 +3136,7 @@
>
{#each tags as tag}
<span
class="text-[10px] font-sans font-medium px-1.5 py-0.5 rounded-full bg-exo-medium-gray/60 text-exo-yellow/80"
class="text-[10px] font-sans font-medium px-1.5 py-0.5 rounded-full bg-exo-yellow/10 text-exo-yellow/80"
>{tag}</span
>
{/each}
@@ -3795,7 +3795,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -3806,7 +3806,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -3817,7 +3817,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -3828,7 +3828,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -3840,7 +3840,7 @@
: isFailed
? 'border-red-500/30 border-l-red-400 group-hover:border-red-500/50'
: isLoading
? 'border-exo-yellow/30 border-l-exo-yellow group-hover:border-exo-yellow/50'
? 'border-exo-yellow/30 border-l-yellow-400 group-hover:border-exo-yellow/50'
: isReady
? 'border-green-500/30 border-l-green-400 group-hover:border-green-500/50'
: 'border-teal-500/30 border-l-teal-400 group-hover:border-teal-500/50'} p-3"
@@ -3853,7 +3853,7 @@
: isFailed
? 'bg-red-400'
: isLoading
? 'bg-exo-yellow animate-pulse'
? 'bg-yellow-400 animate-pulse'
: isReady
? 'bg-green-400'
: 'bg-teal-400'} rounded-full shadow-[0_0_6px_currentColor]"
@@ -3888,7 +3888,7 @@
: isFailed
? 'bg-red-500/15 text-red-400'
: isLoading
? 'bg-exo-medium-gray/60 text-exo-yellow'
? 'bg-yellow-500/15 text-yellow-400'
: isReady
? 'bg-green-500/15 text-green-400'
: 'bg-teal-500/15 text-teal-400'}"
@@ -4698,7 +4698,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -4709,7 +4709,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -4720,7 +4720,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -4731,7 +4731,7 @@
: isFailed
? 'border-red-500/50'
: isLoading
? 'border-exo-yellow/20'
? 'border-yellow-500/50'
: isReady
? 'border-green-500/50'
: 'border-teal-500/50'}"
@@ -4743,7 +4743,7 @@
: isFailed
? 'border-red-500/30 border-l-red-400'
: isLoading
? 'border-exo-yellow/30 border-l-exo-yellow'
? 'border-exo-yellow/30 border-l-yellow-400'
: isReady
? 'border-green-500/30 border-l-green-400'
: 'border-teal-500/30 border-l-teal-400'} p-3"
@@ -4758,7 +4758,7 @@
: isFailed
? 'bg-red-400'
: isLoading
? 'bg-exo-yellow animate-pulse'
? 'bg-yellow-400 animate-pulse'
: isReady
? 'bg-green-400'
: 'bg-teal-400'} rounded-full shadow-[0_0_6px_currentColor]"
@@ -4793,7 +4793,7 @@
: isFailed
? 'bg-red-500/15 text-red-400'
: isLoading
? 'bg-exo-medium-gray/60 text-exo-yellow'
? 'bg-yellow-500/15 text-yellow-400'
: isReady
? 'bg-green-500/15 text-green-400'
: 'bg-teal-500/15 text-teal-400'}"
+1 -1
View File
@@ -767,7 +767,7 @@
'completed'
? 'bg-green-500/10 text-green-400/80 border border-green-500/20'
: cellStatus.kind === 'downloading'
? 'bg-exo-medium-gray/50 text-exo-yellow/80 border border-exo-yellow/20'
? 'bg-exo-yellow/10 text-exo-yellow/80 border border-exo-yellow/20'
: cellStatus.kind === 'failed'
? 'bg-red-500/10 text-red-400/80 border border-red-500/20'
: 'bg-white/5 text-white/50 border border-white/10'}"