Implement a new theme system with a ThemeToggle component, allowing users to switch between light, dark, and auto (system) modes. Move theme CSS variables to app.css and manage theme state via theme.js with localStorage persistence. Integrate ThemeToggle into editor and preview top bars. Clean up old theme logic from MainLayout.razor.css for better separation and maintainability.
31 lines
864 B
Plaintext
31 lines
864 B
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<base href="/" />
|
|
<ResourcePreloader />
|
|
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
|
|
<link rel="stylesheet" href="@Assets["app.css"]" />
|
|
<link rel="stylesheet" href="@Assets["Notemark.styles.css"]" />
|
|
<ImportMap />
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<HeadOutlet />
|
|
</head>
|
|
|
|
<body>
|
|
<Routes />
|
|
<ReconnectModal />
|
|
<script src="js/theme.js"></script>
|
|
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
|
<script>
|
|
// Initialize theme on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
notemarkTheme.init();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|