Files
ridebus-pwa/index.html
Zakhar Timoshenko 81b2c7d675 feat: implement theme settings with light and dark modes
- Added new icons for settings and theme options in Icons.tsx.
- Enhanced local storage functions to return success status in storage.ts.
- Updated styles to support new theme settings in styles.scss.
- Created a new settings page with theme selection options in Settings.tsx.
- Implemented theme management logic in theme.ts, allowing users to choose between system, light, and dark themes.
- Added Playwright tests for theme settings functionality in settings.spec.ts.
- Introduced new SCSS file for settings styles in _settings.scss.
2026-10-07 03:33:50 +03:00

32 lines
1.4 KiB
HTML

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#f3f3fa" />
<meta name="color-scheme" content="light dark" />
<script>
// Apply the saved theme before the application and its styles load.
(() => {
let choice = 'system';
try {
const saved = localStorage.getItem('ridebus:theme');
if (saved === 'light' || saved === 'dark') choice = saved;
} catch {}
const theme = choice === 'system' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : choice;
document.documentElement.dataset.theme = theme;
document.documentElement.style.colorScheme = theme;
document.querySelector('meta[name="theme-color"]').content = theme === 'dark' ? '#202735' : '#f3f3fa';
})();
</script>
<meta name="description" content="Расписание общественного транспорта RideBus. Найдите остановку и сохраните её в избранное." />
<title>RideBus — расписание в вашем кармане</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>