Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

Enhance Telegram WebApp theme integration and update favicon
All checks were successful
CI / lint-and-test (push) Successful in 15s
Details

Browse Source 
- Introduced a new function `applyThemeParamsToCss` to map Telegram theme parameters to CSS variables, improving theme customization.
- Updated the `applyTheme` function to utilize the new theme parameters and set background/header colors accordingly.
- Added a favicon to the project by linking `favicon.png` in `index.html`.
- Modified CSS for the light theme to use CSS variables for better flexibility and maintainability.
- Enhanced styling for light theme elements, including container borders and calendar sticky behavior.
This commit is contained in:
Nikolay Tatarinov
2026-02-18 13:34:26 +03:00
parent dbf91bb4ee
commit be57555d4f
4 changed files with 48 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
webapp/app.js
View File

@@ -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. */
}
}

BIN
webapp/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

1
webapp/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.png" type="image/png">
<title>Календарь дежурств</title>
<link rel="stylesheet" href="style.css">
</head>

21
webapp/style.css
View File

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