Enhance Telegram WebApp theme integration and update favicon
All checks were successful
CI / lint-and-test (push) Successful in 15s
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:
@@ -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. */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user