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

16
AGENTS.md
View File

@@ -96,15 +96,19 @@ locales/
## Farbpalette
```
Monochrome Theme - reine Graustufen
Light Mode:
- BG: #FAF8FC (Lavender Tint)
- Text: #2A2633
- Primary: #6B5B95 (Amethyst)
- BG: #FAFAFA
- Text: #1A1A1A
- Primary: #555555
- Border: #D0D0D0
Dark Mode:
- BG: #1A1424 (Deep Purple)
- Text: #F5F2FA
- Primary: #B8A5D6 (Soft Lilac)
- BG: #141414
- Text: #F0F0F0
- Primary: #AAAAAA
- Border: #3A3A3A
```
## Ansprechpartner

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);
}

22
js/components/chat-widget.js
View File

@@ -188,11 +188,13 @@ style.textContent = /* css */`
chat-widget .chat-recipient {
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
chat-widget .chat-encrypted {
font-size: var(--font-size-sm);
cursor: help;
filter: grayscale(1);
}
chat-widget .chat-messages {
@@ -233,13 +235,14 @@ style.textContent = /* css */`
}
chat-widget .chat-message.own .message-bubble {
background: var(--color-primary);
color: white;
background: var(--color-text);
color: var(--color-bg);
border-bottom-right-radius: var(--radius-sm);
}
chat-widget .chat-message.other .message-bubble {
background: var(--color-bg-secondary);
background: var(--color-bg-tertiary);
color: var(--color-text);
border-bottom-left-radius: var(--radius-sm);
}
@@ -269,17 +272,28 @@ style.textContent = /* css */`
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-base);
}
chat-widget .chat-input input::placeholder {
color: var(--color-text-muted);
}
chat-widget .chat-input input:focus {
outline: none;
border-color: var(--color-primary);
border-color: var(--color-text-muted);
}
chat-widget .chat-input button {
padding: var(--space-sm);
border-radius: var(--radius-md);
background: var(--color-text);
color: var(--color-bg);
}
chat-widget .chat-input button:hover {
background: var(--color-text-secondary);
}
`;
document.head.appendChild(style);

5
js/components/pages/page-listing.js
View File

@@ -398,16 +398,19 @@ style.textContent = /* css */`
page-listing .monero-address code {
flex: 1;
padding: var(--space-sm) var(--space-md);
background: var(--color-bg-secondary);
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
word-break: break-all;
line-height: 1.4;
color: var(--color-text);
}
page-listing .btn-copy {
padding: var(--space-sm);
border-color: var(--color-border);
color: var(--color-text);
flex-shrink: 0;
}

4
manifest.json
View File

@@ -4,8 +4,8 @@
"description": "Anonymer Marktplatz mit Monero-Bezahlung",
"start_url": "/",
"display": "standalone",
"background_color": "#F8F7F5",
"theme_color": "#6B7B8C",
"background_color": "#FAFAFA",
"theme_color": "#555555",
"orientation": "portrait-primary",
"scope": "/",
"lang": "de",