lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add theme customization with accent colors and light mode

Browse Source
This commit is contained in:
Your Name
2026-02-18 10:34:59 +02:00
parent 2ddd2ce5d8
commit 318570295f
3 changed files with 244 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/styles/main.css
View File

@@ -34,6 +34,63 @@
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
/* Accent color overrides */
[data-accent="amber"] {
--color-accent: #D97706;
--color-accent-hover: #B45309;
--color-accent-muted: rgba(217, 119, 6, 0.12);
--color-accent-text: #FBBF24;
}
[data-accent="blue"] {
--color-accent: #3B82F6;
--color-accent-hover: #2563EB;
--color-accent-muted: rgba(59, 130, 246, 0.12);
--color-accent-text: #60A5FA;
}
[data-accent="purple"] {
--color-accent: #8B5CF6;
--color-accent-hover: #7C3AED;
--color-accent-muted: rgba(139, 92, 246, 0.12);
--color-accent-text: #A78BFA;
}
[data-accent="green"] {
--color-accent: #10B981;
--color-accent-hover: #059669;
--color-accent-muted: rgba(16, 185, 129, 0.12);
--color-accent-text: #34D399;
}
[data-accent="red"] {
--color-accent: #EF4444;
--color-accent-hover: #DC2626;
--color-accent-muted: rgba(239, 68, 68, 0.12);
--color-accent-text: #F87171;
}
[data-accent="pink"] {
--color-accent: #EC4899;
--color-accent-hover: #DB2777;
--color-accent-muted: rgba(236, 72, 153, 0.12);
--color-accent-text: #F472B6;
}
[data-accent="cyan"] {
--color-accent: #06B6D4;
--color-accent-hover: #0891B2;
--color-accent-muted: rgba(6, 182, 212, 0.12);
--color-accent-text: #22D3EE;
}
/* Light mode */
[data-theme="light"] {
--color-bg-base: #FAFAF9;
--color-bg-surface: #FFFFFF;
--color-bg-elevated: #F5F5F4;
--color-bg-inset: #E7E5E4;
--color-text-primary: #1C1917;
--color-text-secondary: #57534E;
--color-text-tertiary: #A8A29E;
--color-border-subtle: #E7E5E4;
--color-border-visible: #D6D3D1;
}
@layer base {
* {
margin: 0;
@@ -173,3 +230,18 @@
.animate-pulse-colon {
animation: pulse-colon 1s ease-in-out infinite;
}
/* Markdown inline styles */
.markdown-inline strong { font-weight: 600; }
.markdown-inline em { font-style: italic; }
.markdown-inline code {
padding: 0.1em 0.3em;
background: var(--color-bg-elevated);
border-radius: 3px;
font-family: var(--font-mono);
font-size: 0.85em;
}
.markdown-inline a {
color: var(--color-accent-text);
text-decoration: underline;
}