schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

style: switch from monochrome to warm teal theme with proper success/warning/error colors

Browse Source
This commit is contained in:
Schmidt
2026-02-11 06:31:34 +01:00
parent 9069404942
commit 825aee192b
6 changed files with 98 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
css/variables.css
View File

@@ -1,37 +1,37 @@
:root {
/*
* Monochrome Theme - kashilo.com
* Pure grayscale with neon green accent
* Warm Teal Theme - kashilo.com
* Clean, trustworthy, privacy-focused
*/
/* Colors - Light Mode */
--color-primary: #555555;
--color-primary-hover: #404040;
--color-primary-light: #E8E8E8;
--color-primary: #525252;
--color-primary-hover: #3F3F3F;
--color-primary-light: #E7E5E4;
--color-secondary: #777777;
--color-secondary-hover: #5A5A5A;
--color-secondary: #737373;
--color-secondary-hover: #525252;
--color-accent: #059669;
--color-accent-hover: #047857;
--color-accent: #0D9488;
--color-accent-hover: #0F766E;
--color-accent-text: #fff;
--color-success: #666666;
--color-warning: #888888;
--color-error: #444444;
--color-success: #16A34A;
--color-warning: #D97706;
--color-error: #DC2626;
--color-bg: #FAFAFA;
--color-bg-secondary: #F0F0F0;
--color-bg-tertiary: #E5E5E5;
--color-bg: #FAFAF9;
--color-bg-secondary: #F5F5F4;
--color-bg-tertiary: #E7E5E4;
--color-text: #1A1A1A;
--color-text-secondary: #4A4A4A;
--color-text-muted: #737373;
--color-text: #1C1917;
--color-text-secondary: #44403C;
--color-text-muted: #78716C;
--color-border: #D0D0D0;
--color-border-focus: #555555;
--color-border: #D6D3D1;
--color-border-focus: #0D9488;
--color-shadow: rgba(0, 0, 0, 0.1);
--color-shadow: rgba(0, 0, 0, 0.08);
--color-overlay: rgba(0, 0, 0, 0.5);
/* Spacing */
@@ -97,31 +97,31 @@
/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: #AAAAAA;
--color-primary-hover: #C0C0C0;
--color-primary-light: #2A2A2A;
--color-primary: #A8A29E;
--color-primary-hover: #D6D3D1;
--color-primary-light: #292524;
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
--color-secondary: #A8A29E;
--color-secondary-hover: #D6D3D1;
--color-accent: #10B981;
--color-accent-hover: #34D399;
--color-accent-text: #052e16;
--color-accent: #2DD4BF;
--color-accent-hover: #5EEAD4;
--color-accent-text: #042F2E;
--color-success: #999999;
--color-warning: #AAAAAA;
--color-error: #888888;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-error: #F87171;
--color-bg: #141414;
--color-bg-secondary: #1E1E1E;
--color-bg-tertiary: #2A2A2A;
--color-bg: #171717;
--color-bg-secondary: #1C1917;
--color-bg-tertiary: #292524;
--color-text: #F0F0F0;
--color-text-secondary: #C0C0C0;
--color-text-muted: #949494;
--color-text: #F5F5F4;
--color-text-secondary: #D6D3D1;
--color-text-muted: #A8A29E;
--color-border: #3A3A3A;
--color-border-focus: #AAAAAA;
--color-border: #3D3836;
--color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7);
@@ -130,33 +130,32 @@
/* Dark Mode - Manual Override */
[data-theme="dark"] {
--color-primary: #AAAAAA;
--color-primary-hover: #C0C0C0;
--color-primary-light: #2A2A2A;
--color-primary: #A8A29E;
--color-primary-hover: #D6D3D1;
--color-primary-light: #292524;
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
--color-secondary: #A8A29E;
--color-secondary-hover: #D6D3D1;
--color-accent: #10B981;
--color-accent-hover: #34D399;
--color-accent-text: #052e16;
--color-accent: #2DD4BF;
--color-accent-hover: #5EEAD4;
--color-accent-text: #042F2E;
--color-success: #999999;
--color-warning: #AAAAAA;
--color-error: #888888;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-error: #F87171;
--color-bg: #141414;
--color-bg-secondary: #1E1E1E;
--color-bg-tertiary: #2A2A2A;
--color-bg: #171717;
--color-bg-secondary: #1C1917;
--color-bg-tertiary: #292524;
--color-text: #F0F0F0;
--color-text-secondary: #C0C0C0;
--color-text-muted: #949494;
--color-text: #F5F5F4;
--color-text-secondary: #D6D3D1;
--color-text-muted: #A8A29E;
--color-border: #3A3A3A;
--color-border-focus: #AAAAAA;
--color-border: #3D3836;
--color-border-focus: #2DD4BF;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.7);
}