wasrusgen/zov-tech
1
0
Fork 0
mirror of https://github.com/wasrusgen/zov-tech.git synced 2026-06-03 16:44:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(miniapp): detect Telegram dark theme via tg.colorScheme; bump dark-mode contrast

Browse Source
This commit is contained in:
wasrusgen 2026-05-09 11:47:28 +03:00
parent d7bd0aa5c2
commit 5032b27049
3 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
miniapp/assets/app.js
View File

@ -9,12 +9,17 @@ const app = document.getElementById("app");
/* ----------------- Telegram WebApp setup ----------------- */ /* ----------------- Telegram WebApp setup ----------------- */
function setupTelegram() { function setupTelegram() {
// Apply theme based on Telegram color scheme even if OS prefers-color-scheme misses
const scheme = tg?.colorScheme || (window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", scheme);
if (!tg) return; if (!tg) return;
try { try {
tg.ready(); tg.ready();
tg.expand(); tg.expand();
if (tg.onEvent) tg.onEvent("themeChanged", () => {
document.documentElement.setAttribute("data-theme", tg.colorScheme || "light");
});
if (tg.setHeaderColor) tg.setHeaderColor("#003E7E"); if (tg.setHeaderColor) tg.setHeaderColor("#003E7E");
if (tg.setBackgroundColor) tg.setBackgroundColor("#F4F4F5");
if (tg.enableClosingConfirmation) tg.enableClosingConfirmation(); if (tg.enableClosingConfirmation) tg.enableClosingConfirmation();
} catch (e) { console.warn(e); } } catch (e) { console.warn(e); }
} }

49
miniapp/assets/styles.css
View File

@ -45,24 +45,41 @@
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
} }
/* ====== Dark theme ====== */ /* ====== Dark theme — both via OS preference and Telegram-driven [data-theme="dark"] ====== */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
html[data-theme="dark"],
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root,
--paper: var(--tg-theme-bg-color, #16140F); html[data-theme="dark"] {
--paper-2: var(--tg-theme-secondary-bg-color, #1F1C16); --paper: var(--tg-theme-bg-color, #14130E);
--card: var(--tg-theme-section-bg-color, #1A1813); --paper-2: var(--tg-theme-secondary-bg-color, #1F1D17);
--ink: var(--tg-theme-text-color, #F2EFE8); --card: var(--tg-theme-section-bg-color, #1C1A14);
--ink-2: #D6D2C7; --ink: var(--tg-theme-text-color, #F4F1EA);
--muted: var(--tg-theme-hint-color, #94918A); --ink-2: #C8C3B5;
--muted-2: #6B6862; --muted: var(--tg-theme-hint-color, #A5A299);
--line: rgba(255, 255, 255, 0.07); --muted-2: #807D74;
--line-strong: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.10);
--status-active-bg: rgba(118, 189, 34, 0.18); --line-strong: rgba(255, 255, 255, 0.20);
--status-lapsed-bg: rgba(220, 38, 38, 0.18); --status-active-bg: rgba(118, 189, 34, 0.22);
--status-grace-bg: rgba(217, 119, 6, 0.18); --status-lapsed-bg: rgba(220, 38, 38, 0.22);
--status-grace-bg: rgba(217, 119, 6, 0.22);
} }
} }
/* Force light theme when explicitly set (overrides OS dark) */
html[data-theme="light"] {
--paper: var(--tg-theme-bg-color, #FAFAF7);
--paper-2: var(--tg-theme-secondary-bg-color, #F0EDE5);
--card: var(--tg-theme-section-bg-color, #FFFFFF);
--ink: var(--tg-theme-text-color, #0F0F0E);
--ink-2: #2A2622;
--muted: var(--tg-theme-hint-color, #6E6A62);
--muted-2: #A09C92;
--line: rgba(15, 15, 14, 0.08);
--line-strong: rgba(15, 15, 14, 0.16);
}
/* ============================================================ /* ============================================================
Reset Reset
============================================================ */ ============================================================ */
@ -374,7 +391,9 @@ button { font: inherit; cursor: pointer; border: none; background: none; color:
.menu-item.disabled { cursor: not-allowed; } .menu-item.disabled { cursor: not-allowed; }
.menu-item.disabled .label, .menu-item.disabled .label,
.menu-item.disabled .icon { color: var(--muted-2); } .menu-item.disabled .icon { color: var(--muted); opacity: 0.7; }
html[data-theme="dark"] .menu-item.disabled .label,
html[data-theme="dark"] .menu-item.disabled .icon { opacity: 0.85; }
.badge { .badge {
display: inline-block; display: inline-block;

6
miniapp/index.html
View File

@ -12,7 +12,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap">
<script src="https://telegram.org/js/telegram-web-app.js"></script> <script src="https://telegram.org/js/telegram-web-app.js"></script>
<link rel="stylesheet" href="assets/styles.css?v=20260509c"> <link rel="stylesheet" href="assets/styles.css?v=20260509d">
</head> </head>
<body> <body>
<main id="app"> <main id="app">
@ -20,7 +20,7 @@
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
</main> </main>
<script src="assets/icons.js?v=20260509c"></script> <script src="assets/icons.js?v=20260509d"></script>
<script src="assets/app.js?v=20260509c"></script> <script src="assets/app.js?v=20260509d"></script>
</body> </body>
</html> </html>