- 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.
32 lines
1.4 KiB
HTML
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>
|