ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Discover dark mode automatically
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m14s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-20 23:54:04 +02:00
parent 08a275093c
commit 8702830f68
2 changed files with 13 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@@ -547,7 +547,7 @@
width: min(calc(100% - 2.4rem), 24.5rem); width: min(calc(100% - 2.4rem), 24.5rem);
height: 3.34rem; height: 3.34rem;
display: grid; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch; align-items: stretch;
gap: 0.06rem; gap: 0.06rem;
padding: 0.22rem; padding: 0.22rem;
@@ -665,14 +665,18 @@
</head> </head>
<body class="m-0 min-h-dvh bg-white text-gray-800 antialiased"> <body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
<script> <script>
const savedTheme = localStorage.getItem('theme'); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true; const applySystemTheme = (isDark) => {
if (useDarkTheme) document.documentElement.classList.add('dark'); document.documentElement.classList.toggle('dark', isDark);
const themeMeta = document.querySelector('meta[name="theme-color"]'); const themeMeta = document.querySelector('meta[name="theme-color"]');
if (themeMeta) { if (themeMeta) {
const appBgRgb = getComputedStyle(document.documentElement).getPropertyValue('--app-bg-rgb').trim(); const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
if (appBgRgb) themeMeta.setAttribute('content', `rgb(${appBgRgb})`); const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
if (rgb) themeMeta.setAttribute('content', `rgb(${rgb})`);
} }
};
applySystemTheme(darkModeQuery.matches);
darkModeQuery.addEventListener('change', (e) => applySystemTheme(e.matches));
</script> </script>
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white"> <div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">

35
js/ui/bottomNav.js
View File

@@ -1,33 +1,4 @@
function syncThemeToggleButton(btn, isDark) {
if (!btn) return;
const icon = btn.querySelector('i');
if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
}
function setupThemeToggle() {
const btn = document.getElementById('nav-theme-toggle');
if (!btn) return;
btn.addEventListener('click', () => {
const html = document.documentElement;
const isDark = html.classList.toggle('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
syncThemeToggleButton(btn, isDark);
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const varName = isDark ? '--sunken-deep-rgb' : '--app-bg-rgb';
const rgb = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
if (rgb) meta.setAttribute('content', `rgb(${rgb})`);
}
});
}
export function getBottomNavHTML() { export function getBottomNavHTML() {
const isDark = document.documentElement.classList.contains('dark');
return ` return `
<nav id="app-bottom-nav" aria-label="Główna nawigacja"> <nav id="app-bottom-nav" aria-label="Główna nawigacja">
<div class="bottom-dock"> <div class="bottom-dock">
@@ -51,11 +22,6 @@ export function getBottomNavHTML() {
<i class="fas fa-cart-shopping" aria-hidden="true"></i> <i class="fas fa-cart-shopping" aria-hidden="true"></i>
</button> </button>
</div> </div>
<div class="nav-slot">
<button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
<i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
</button>
</div>
</div> </div>
</nav> </nav>
`; `;
@@ -99,7 +65,6 @@ export function setupBottomNav({ refreshPantry, refreshShoppingList } = {}) {
if (TABS.includes(tab)) apply(tab); if (TABS.includes(tab)) apply(tab);
}); });
setupThemeToggle();
apply('planner'); apply('planner');
window.refreshStockViews = () => { window.refreshStockViews = () => {