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

- 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:
2026-02-18 13:34:26 +03:00
parent dbf91bb4ee
commit be57555d4f
4 changed files with 48 additions and 12 deletions

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