matt/Claudia-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add theme customization with 6 color schemes

Browse Source 
Added comprehensive theme system with:
- 6 themes: Dark (default), Darker, Midnight Blue, Forest, Sunset, Light
- New Appearance tab in settings with theme selector
- Live theme preview showing user/assistant message styles
- Theme persistence using localStorage
- Dynamic CSS variable updates for instant theme switching
- Each theme includes custom gradients, accent colors, and text colors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
matt
2025-10-14 12:30:06 -07:00
parent efa3ccbd26
commit 32fc57fab0
3 changed files with 356 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/index.html
View File

@@ -72,6 +72,7 @@
<div class="settings-tabs">
<button class="tab-btn active" data-tab="api">API</button>
<button class="tab-btn" data-tab="character">Character</button>
<button class="tab-btn" data-tab="appearance">Appearance</button>
</div>
<div id="api-tab" class="tab-content active">
@@ -342,6 +343,36 @@
</div>
</form>
</div>
<div id="appearance-tab" class="tab-content">
<div class="settings-form">
<div class="form-group">
<label for="theme-select">Theme</label>
<select id="theme-select" class="theme-select">
<option value="dark">Dark (Default)</option>
<option value="darker">Darker</option>
<option value="midnight">Midnight Blue</option>
<option value="forest">Forest</option>
<option value="sunset">Sunset</option>
<option value="light">Light</option>
</select>
<small style="color: var(--text-secondary); margin-top: 4px; display: block;">Choose your preferred color scheme</small>
</div>
<div class="theme-preview-container">
<div class="theme-preview-label">Preview</div>
<div class="theme-preview">
<div class="theme-preview-message user-preview">
<div class="theme-preview-content">User message</div>
</div>
<div class="theme-preview-message assistant-preview">
<div class="theme-preview-avatar"></div>
<div class="theme-preview-content">Assistant response</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="input-container">

143
src/main.js
View File

@@ -14,6 +14,138 @@ let newCharacterBtn;
let currentCharacter = null;
let pendingAvatarPath = null;
// Theme definitions
const themes = {
dark: {
name: 'Dark (Default)',
bgPrimary: '#1a1a1a',
bgSecondary: '#252525',
bgTertiary: '#2f2f2f',
textPrimary: '#e8e8e8',
textSecondary: '#a0a0a0',
accent: '#6366f1',
accentHover: '#4f46e5',
userMsg: '#4f46e5',
assistantMsg: '#2f2f2f',
border: '#3a3a3a',
gradient: 'linear-gradient(135deg, #1a1a1a 0%, #2a1a2a 100%)',
glow: 'rgba(99, 102, 241, 0.1)'
},
darker: {
name: 'Darker',
bgPrimary: '#0a0a0a',
bgSecondary: '#141414',
bgTertiary: '#1a1a1a',
textPrimary: '#e0e0e0',
textSecondary: '#909090',
accent: '#7c3aed',
accentHover: '#6d28d9',
userMsg: '#6d28d9',
assistantMsg: '#1a1a1a',
border: '#2a2a2a',
gradient: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 100%)',
glow: 'rgba(124, 58, 237, 0.1)'
},
midnight: {
name: 'Midnight Blue',
bgPrimary: '#0f1419',
bgSecondary: '#1a2332',
bgTertiary: '#243447',
textPrimary: '#e6f1ff',
textSecondary: '#8892a0',
accent: '#3b82f6',
accentHover: '#2563eb',
userMsg: '#1e40af',
assistantMsg: '#243447',
border: '#2d3e54',
gradient: 'linear-gradient(135deg, #0f1419 0%, #1a2845 100%)',
glow: 'rgba(59, 130, 246, 0.1)'
},
forest: {
name: 'Forest',
bgPrimary: '#0d1b14',
bgSecondary: '#162820',
bgTertiary: '#1f352b',
textPrimary: '#e8f5e9',
textSecondary: '#90a89f',
accent: '#10b981',
accentHover: '#059669',
userMsg: '#047857',
assistantMsg: '#1f352b',
border: '#2d4a3a',
gradient: 'linear-gradient(135deg, #0d1b14 0%, #1a2820 100%)',
glow: 'rgba(16, 185, 129, 0.1)'
},
sunset: {
name: 'Sunset',
bgPrimary: '#1a1214',
bgSecondary: '#261a1e',
bgTertiary: '#332228',
textPrimary: '#fde8e8',
textSecondary: '#b89090',
accent: '#f97316',
accentHover: '#ea580c',
userMsg: '#c2410c',
assistantMsg: '#332228',
border: '#4a3238',
gradient: 'linear-gradient(135deg, #1a1214 0%, #2a1a1e 100%)',
glow: 'rgba(249, 115, 22, 0.1)'
},
light: {
name: 'Light',
bgPrimary: '#ffffff',
bgSecondary: '#f5f5f5',
bgTertiary: '#e8e8e8',
textPrimary: '#1a1a1a',
textSecondary: '#666666',
accent: '#6366f1',
accentHover: '#4f46e5',
userMsg: '#6366f1',
assistantMsg: '#f0f0f0',
border: '#d0d0d0',
gradient: 'linear-gradient(135deg, #ffffff 0%, #f5f0ff 100%)',
glow: 'rgba(99, 102, 241, 0.05)'
}
};
// Apply theme
function applyTheme(themeName) {
const theme = themes[themeName];
if (!theme) return;
const root = document.documentElement;
root.style.setProperty('--bg-primary', theme.bgPrimary);
root.style.setProperty('--bg-secondary', theme.bgSecondary);
root.style.setProperty('--bg-tertiary', theme.bgTertiary);
root.style.setProperty('--text-primary', theme.textPrimary);
root.style.setProperty('--text-secondary', theme.textSecondary);
root.style.setProperty('--accent', theme.accent);
root.style.setProperty('--accent-hover', theme.accentHover);
root.style.setProperty('--user-msg', theme.userMsg);
root.style.setProperty('--assistant-msg', theme.assistantMsg);
root.style.setProperty('--border', theme.border);
// Update gradient and glow
const appContainer = document.querySelector('.app-container');
if (appContainer) {
appContainer.style.background = theme.gradient;
const glow = appContainer.querySelector('::before');
}
// Store preference
localStorage.setItem('claudia-theme', themeName);
}
// Load saved theme
function loadSavedTheme() {
const savedTheme = localStorage.getItem('claudia-theme') || 'dark';
const themeSelect = document.getElementById('theme-select');
if (themeSelect) {
themeSelect.value = savedTheme;
}
applyTheme(savedTheme);
}
// Helper function to get avatar URL
async function getAvatarUrl(avatarFilename) {
if (!avatarFilename) return null;
@@ -1039,6 +1171,14 @@ function setupAppControls() {
section.classList.toggle('collapsed');
});
});
// Setup theme selector
const themeSelect = document.getElementById('theme-select');
if (themeSelect) {
themeSelect.addEventListener('change', (e) => {
applyTheme(e.target.value);
});
}
}
// Keyboard shortcuts
@@ -1433,5 +1573,8 @@ window.addEventListener('DOMContentLoaded', () => {
messageInput.focus();
setStatus('Ready');
// Load saved theme before anything else
loadSavedTheme();
loadExistingConfig();
});

176
src/styles.css
View File

@@ -811,9 +811,25 @@ body {
animation: spin 0.8s linear infinite;
}
/* Light mode support */
@media (prefers-color-scheme: light) {
:root {
/* Theme System */
/* Dark theme (default) */
:root,
[data-theme="dark"] {
--bg-primary: #1a1a1a;
--bg-secondary: #252525;
--bg-tertiary: #2f2f2f;
--text-primary: #e8e8e8;
--text-secondary: #a0a0a0;
--accent: #6366f1;
--accent-hover: #4f46e5;
--user-msg: #4f46e5;
--assistant-msg: #2f2f2f;
--border: #3a3a3a;
--shadow: rgba(0, 0, 0, 0.5);
}
/* Light theme */
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-tertiary: #e8e8e8;
@@ -825,11 +841,87 @@ body {
--assistant-msg: #f5f5f5;
--border: #e0e0e0;
--shadow: rgba(0, 0, 0, 0.1);
}
}
.message.assistant .message-content {
[data-theme="light"] .app-container {
background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
}
[data-theme="light"] .app-container::before {
background: radial-gradient(circle at top center, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
}
[data-theme="light"] .message.assistant .message-content {
border: 1px solid var(--border);
}
}
/* Abyss theme - Deep purple/blue */
[data-theme="abyss"] {
--bg-primary: #0f0f1e;
--bg-secondary: #1a1a2e;
--bg-tertiary: #252538;
--text-primary: #e0e0ff;
--text-secondary: #8888bb;
--accent: #9d4edd;
--accent-hover: #7b2cbf;
--user-msg: #7b2cbf;
--assistant-msg: #252538;
--border: #2f2f48;
--shadow: rgba(0, 0, 0, 0.7);
}
[data-theme="abyss"] .app-container {
background: linear-gradient(135deg, #0f0f1e 0%, #1a1033 100%);
}
[data-theme="abyss"] .app-container::before {
background: radial-gradient(circle at top center, rgba(157, 78, 221, 0.15) 0%, transparent 70%);
}
/* Nord theme - Cool blues and grays */
[data-theme="nord"] {
--bg-primary: #2e3440;
--bg-secondary: #3b4252;
--bg-tertiary: #434c5e;
--text-primary: #eceff4;
--text-secondary: #d8dee9;
--accent: #88c0d0;
--accent-hover: #81a1c1;
--user-msg: #5e81ac;
--assistant-msg: #434c5e;
--border: #4c566a;
--shadow: rgba(0, 0, 0, 0.4);
}
[data-theme="nord"] .app-container {
background: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
}
[data-theme="nord"] .app-container::before {
background: radial-gradient(circle at top center, rgba(136, 192, 208, 0.1) 0%, transparent 70%);
}
/* Mocha theme - Warm browns */
[data-theme="mocha"] {
--bg-primary: #1e1e2e;
--bg-secondary: #2a2837;
--bg-tertiary: #3a3850;
--text-primary: #cdd6f4;
--text-secondary: #bac2de;
--accent: #f5c2e7;
--accent-hover: #cba6f7;
--user-msg: #cba6f7;
--assistant-msg: #3a3850;
--border: #45475a;
--shadow: rgba(0, 0, 0, 0.5);
}
[data-theme="mocha"] .app-container {
background: linear-gradient(135deg, #1e1e2e 0%, #2a2440 100%);
}
[data-theme="mocha"] .app-container::before {
background: radial-gradient(circle at top center, rgba(245, 194, 231, 0.1) 0%, transparent 70%);
}
/* Settings Panel - Slide-in Sidebar */
@@ -1160,6 +1252,78 @@ body {
transform: scale(0.95);
}
/* Theme Preview */
.theme-preview-container {
margin-top: 20px;
}
.theme-preview-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.theme-preview {
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.theme-preview-message {
display: flex;
align-items: flex-start;
gap: 10px;
animation: none;
}
.theme-preview-message.user-preview {
justify-content: flex-end;
}
.theme-preview-message.assistant-preview {
justify-content: flex-start;
}
.theme-preview-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
opacity: 0.6;
}
.theme-preview-content {
padding: 10px 14px;
border-radius: 10px;
font-size: 13px;
max-width: 70%;
}
.theme-preview-message.user-preview .theme-preview-content {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: white;
border-bottom-right-radius: 4px;
}
.theme-preview-message.assistant-preview .theme-preview-content {
background: var(--assistant-msg);
color: var(--text-primary);
border-bottom-left-radius: 4px;
border: 1px solid var(--border);
}
.theme-select {
cursor: pointer;
}
/* Responsive */
@media (max-width: 600px) {
.messages-list {