From d0d22c150ab0bf4da817729c184e721b8e65325a Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Wed, 18 Feb 2026 15:06:35 +0300
Subject: [PATCH] Update theme colors and enhance dark mode styling

- Changed the dark theme background color in `app.js` for improved aesthetics.
- Added new CSS variables for dark theme elements in `style.css`, enhancing visual consistency and user experience.
- Updated styling for various components in dark mode, including duty markers and calendar sticky behavior, to align with the new theme parameters.
---
 webapp/app.js    |  2 +-
 webapp/style.css | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/webapp/app.js b/webapp/app.js
index 0543b4d..82e22a8 100644
--- a/webapp/app.js
+++ b/webapp/app.js
@@ -3,7 +3,7 @@
   const RETRY_DELAY_MS = 800;
   const RETRY_AFTER_ACCESS_DENIED_MS = 1200;
 
-  const THEME_BG = { dark: "#1a1b26", light: "#d5d6db" };
+  const THEME_BG = { dark: "#17212b", light: "#d5d6db" };
 
   function getTheme() {
     if (typeof window === "undefined") return "dark";
diff --git a/webapp/style.css b/webapp/style.css
index 99ca27e..9a38652 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -27,6 +27,20 @@
   --error: #c43b3b;
 }
 
+/* Dark theme: prefer Telegram themeParams, fallback to Telegram dark palette */
+[data-theme="dark"] {
+  --bg: var(--tg-theme-bg-color, #17212b);
+  --surface: var(--tg-theme-secondary-bg-color, #232e3c);
+  --text: var(--tg-theme-text-color, #f5f5f5);
+  --muted: var(--tg-theme-hint-color, #708499);
+  --accent: var(--tg-theme-link-color, #6ab3f3);
+  --today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #6ab2f2));
+  --duty: #5c9b4a;
+  --unavailable: #b8860b;
+  --vacation: #5a9bb8;
+  --error: #e06c75;
+}
+
 html {
   scrollbar-gutter: stable;
   scrollbar-width: none;
@@ -125,6 +139,10 @@ body {
   box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
 }
 
+[data-theme="dark"] .calendar-sticky.is-scrolled {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
 .calendar {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -453,6 +471,10 @@ body {
   border-left-color: var(--vacation);
 }
 
+[data-theme="dark"] .duty-marker {
+  background: color-mix(in srgb, var(--duty) 25%, transparent);
+}
+
 .duty-item .duty-item-type {
   grid-column: 1;
   grid-row: 1;