From ed270e7050088ca7ca9705712bec05a1bbf3b7fd Mon Sep 17 00:00:00 2001 From: Alexander Schmidt Date: Wed, 28 Jan 2026 10:23:19 +0100 Subject: [PATCH] move to monochrome theme --- AGENTS.md | 16 +-- css/base.css | 9 ++ css/variables.css | 160 ++++++++++++++-------------- js/components/chat-widget.js | 22 +++- js/components/pages/page-listing.js | 5 +- manifest.json | 4 +- 6 files changed, 123 insertions(+), 93 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index b2fa26e..55bebb6 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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 diff --git a/css/base.css b/css/base.css index 64f7b62..8a4d54b 100644 --- a/css/base.css +++ b/css/base.css @@ -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; diff --git a/css/variables.css b/css/variables.css index 04f6ff6..60328da 100644 --- a/css/variables.css +++ b/css/variables.css @@ -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); } diff --git a/js/components/chat-widget.js b/js/components/chat-widget.js index 6acf142..9595c06 100644 --- a/js/components/chat-widget.js +++ b/js/components/chat-widget.js @@ -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); diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js index 26c33fb..0a9b7c0 100644 --- a/js/components/pages/page-listing.js +++ b/js/components/pages/page-listing.js @@ -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; } diff --git a/manifest.json b/manifest.json index 445d844..f63827d 100644 --- a/manifest.json +++ b/manifest.json @@ -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",