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

move to monochrome theme

Browse Source
This commit is contained in:
Schmidt
2026-01-28 10:23:19 +01:00
parent 0f1ec738b1
commit ed270e7050
6 changed files with 123 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
css/base.css
View File

@@ -78,6 +78,15 @@ p + p {
color: white;
}
/* Grayscale all emoji icons */
.emoji-icon,
.upload-icon,
.empty-state-icon,
[class*="encrypted"],
.listing-location {
filter: grayscale(1);
}
.sr-only {
position: absolute;
width: 1px;

160
css/variables.css
View File

@@ -1,37 +1,37 @@
:root {
/*
* Warm Gray Theme - dgray.io
* WCAG AA konform (Kontrast > 4.5:1)
* Monochrome Theme - dgray.io
* Pure grayscale, no colors
*/
/* Colors - Light Mode */
--color-primary: #6B7B8C;
--color-primary-hover: #56656F;
--color-primary-light: #E5E8EB;
--color-primary: #555555;
--color-primary-hover: #404040;
--color-primary-light: #E8E8E8;
--color-secondary: #8A9299;
--color-secondary-hover: #6E777D;
--color-secondary: #777777;
--color-secondary-hover: #5A5A5A;
--color-accent: #A67C52;
--color-accent-hover: #8B6543;
--color-accent: #333333;
--color-accent-hover: #1A1A1A;
--color-success: #5A8F6B;
--color-warning: #C49A3C;
--color-error: #B54747;
--color-success: #666666;
--color-warning: #888888;
--color-error: #444444;
--color-bg: #F8F7F5;
--color-bg-secondary: #F0EFEC;
--color-bg-tertiary: #E5E3DF;
--color-bg: #FAFAFA;
--color-bg-secondary: #F0F0F0;
--color-bg-tertiary: #E5E5E5;
--color-text: #2D2D2A;
--color-text-secondary: #525250;
--color-text-muted: #8A8985;
--color-text: #1A1A1A;
--color-text-secondary: #4A4A4A;
--color-text-muted: #8A8A8A;
--color-border: #D5D3CE;
--color-border-focus: #6B7B8C;
--color-border: #D0D0D0;
--color-border-focus: #555555;
--color-shadow: rgba(45, 45, 42, 0.1);
--color-overlay: rgba(45, 45, 42, 0.5);
--color-shadow: rgba(0, 0, 0, 0.1);
--color-overlay: rgba(0, 0, 0, 0.5);
/* Spacing */
--space-xs: 0.25rem;
@@ -96,94 +96,94 @@
/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: #9AABBB;
--color-primary-hover: #B0BEC9;
--color-primary-light: #2A2D30;
--color-primary: #AAAAAA;
--color-primary-hover: #C0C0C0;
--color-primary-light: #2A2A2A;
--color-secondary: #A0A8AE;
--color-secondary-hover: #B5BCC1;
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
--color-accent: #C9A378;
--color-accent-hover: #D9B88E;
--color-accent: #CCCCCC;
--color-accent-hover: #E0E0E0;
--color-success: #7CB88A;
--color-warning: #D4B05C;
--color-error: #D47070;
--color-success: #999999;
--color-warning: #AAAAAA;
--color-error: #888888;
--color-bg: #1E1D1B;
--color-bg-secondary: #28272A;
--color-bg-tertiary: #343230;
--color-bg: #141414;
--color-bg-secondary: #1E1E1E;
--color-bg-tertiary: #2A2A2A;
--color-text: #F5F4F2;
--color-text-secondary: #D0CFCC;
--color-text-muted: #9A9895;
--color-text: #F0F0F0;
--color-text-secondary: #C0C0C0;
--color-text-muted: #808080;
--color-border: #454340;
--color-border-focus: #9AABBB;
--color-border: #3A3A3A;
--color-border-focus: #AAAAAA;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-overlay: rgba(0, 0, 0, 0.7);
}
}
/* Dark Mode - Manual Override */
[data-theme="dark"] {
--color-primary: #9AABBB;
--color-primary-hover: #B0BEC9;
--color-primary-light: #2A2D30;
--color-primary: #AAAAAA;
--color-primary-hover: #C0C0C0;
--color-primary-light: #2A2A2A;
--color-secondary: #A0A8AE;
--color-secondary-hover: #B5BCC1;
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
--color-accent: #C9A378;
--color-accent-hover: #D9B88E;
--color-accent: #CCCCCC;
--color-accent-hover: #E0E0E0;
--color-success: #7CB88A;
--color-warning: #D4B05C;
--color-error: #D47070;
--color-success: #999999;
--color-warning: #AAAAAA;
--color-error: #888888;
--color-bg: #1E1D1B;
--color-bg-secondary: #28272A;
--color-bg-tertiary: #343230;
--color-bg: #141414;
--color-bg-secondary: #1E1E1E;
--color-bg-tertiary: #2A2A2A;
--color-text: #F5F4F2;
--color-text-secondary: #D0CFCC;
--color-text-muted: #9A9895;
--color-text: #F0F0F0;
--color-text-secondary: #C0C0C0;
--color-text-muted: #808080;
--color-border: #454340;
--color-border-focus: #9AABBB;
--color-border: #3A3A3A;
--color-border-focus: #AAAAAA;
--color-shadow: rgba(0, 0, 0, 0.4);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-overlay: rgba(0, 0, 0, 0.7);
}
/* Light Mode - Manual Override */
[data-theme="light"] {
--color-primary: #6B7B8C;
--color-primary-hover: #56656F;
--color-primary-light: #E5E8EB;
--color-primary: #555555;
--color-primary-hover: #404040;
--color-primary-light: #E8E8E8;
--color-secondary: #8A9299;
--color-secondary-hover: #6E777D;
--color-secondary: #777777;
--color-secondary-hover: #5A5A5A;
--color-accent: #A67C52;
--color-accent-hover: #8B6543;
--color-accent: #333333;
--color-accent-hover: #1A1A1A;
--color-success: #5A8F6B;
--color-warning: #C49A3C;
--color-error: #B54747;
--color-success: #666666;
--color-warning: #888888;
--color-error: #444444;
--color-bg: #F8F7F5;
--color-bg-secondary: #F0EFEC;
--color-bg-tertiary: #E5E3DF;
--color-bg: #FAFAFA;
--color-bg-secondary: #F0F0F0;
--color-bg-tertiary: #E5E5E5;
--color-text: #2D2D2A;
--color-text-secondary: #525250;
--color-text-muted: #8A8985;
--color-text: #1A1A1A;
--color-text-secondary: #4A4A4A;
--color-text-muted: #8A8A8A;
--color-border: #D5D3CE;
--color-border-focus: #6B7B8C;
--color-border: #D0D0D0;
--color-border-focus: #555555;
--color-shadow: rgba(45, 45, 42, 0.1);
--color-overlay: rgba(45, 45, 42, 0.5);
--color-shadow: rgba(0, 0, 0, 0.1);
--color-overlay: rgba(0, 0, 0, 0.5);
}