diff --git a/webapp/app.js b/webapp/app.js
index a135ef5..5e59c46 100644
--- a/webapp/app.js
+++ b/webapp/app.js
@@ -24,15 +24,41 @@
return "light";
}
+ /**
+ * Map Telegram themeParams (snake_case) to CSS variables (--tg-theme-*).
+ * Only set when Telegram WebApp and themeParams are available.
+ */
+ function applyThemeParamsToCss() {
+ var twa = window.Telegram?.WebApp;
+ var params = twa?.themeParams;
+ if (!params) return;
+ var root = document.documentElement;
+ var map = [
+ ["bg_color", "bg-color"],
+ ["secondary_bg_color", "secondary-bg-color"],
+ ["text_color", "text-color"],
+ ["hint_color", "hint-color"],
+ ["link_color", "link-color"],
+ ["button_color", "button-color"],
+ ["header_bg_color", "header-bg-color"],
+ ["accent_text_color", "accent-text-color"]
+ ];
+ map.forEach(function (pair) {
+ var value = params[pair[0]];
+ if (value) root.style.setProperty("--tg-theme-" + pair[1], value);
+ });
+ }
+
function applyTheme() {
var scheme = getTheme();
document.documentElement.dataset.theme = scheme;
- var bg = THEME_BG[scheme] || THEME_BG.dark;
- if (window.Telegram?.WebApp?.setBackgroundColor) {
- window.Telegram.WebApp.setBackgroundColor(bg);
- }
- if (window.Telegram?.WebApp?.setHeaderColor) {
- window.Telegram.WebApp.setHeaderColor(bg);
+ var twa = window.Telegram?.WebApp;
+ if (twa) {
+ if (twa.setBackgroundColor) twa.setBackgroundColor("bg_color");
+ if (twa.setHeaderColor) twa.setHeaderColor("bg_color");
+ applyThemeParamsToCss();
+ } else {
+ /* Outside Telegram: only data-theme is set; no setBackgroundColor/setHeaderColor. */
}
}
diff --git a/webapp/favicon.png b/webapp/favicon.png
new file mode 100644
index 0000000..34f4c8d
Binary files /dev/null and b/webapp/favicon.png differ
diff --git a/webapp/index.html b/webapp/index.html
index e64ec3f..b55a016 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -3,6 +3,7 @@
+
Календарь дежурств
diff --git a/webapp/style.css b/webapp/style.css
index 990832f..14befdc 100644
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -11,14 +11,15 @@
--error: #f7768e;
}
+/* Light theme: prefer Telegram themeParams (--tg-theme-*), fallback to Telegram-like palette */
[data-theme="light"] {
- --bg: #d5d6db;
- --surface: #b8b9c4;
- --text: #343b58;
- --muted: #6b7089;
- --accent: #2e7de0;
+ --bg: var(--tg-theme-bg-color, #f0f1f3);
+ --surface: var(--tg-theme-secondary-bg-color, #e0e2e6);
+ --text: var(--tg-theme-text-color, #343b58);
+ --muted: var(--tg-theme-hint-color, #6b7089);
+ --accent: var(--tg-theme-link-color, #2e7de0);
--duty: #587d0a;
- --today: #7847b3;
+ --today: var(--tg-theme-link-color, var(--tg-theme-accent-text-color, #2481cc));
--unavailable: #b8860b;
--vacation: #0d6b9e;
--error: #c43b3b;
@@ -56,6 +57,10 @@ body {
padding-bottom: env(safe-area-inset-bottom, 12px);
}
+[data-theme="light"] .container {
+ border-radius: 12px;
+}
+
.header {
display: flex;
align-items: center;
@@ -114,6 +119,10 @@ body {
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.25);
}
+[data-theme="light"] .calendar-sticky.is-scrolled {
+ box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.08);
+}
+
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);