helios/rsvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode auto-switching with flash prevention

Browse Source
This commit is contained in:
Ian Gulliver
2025-12-28 22:15:16 -08:00
parent b508b19dbb
commit e5972a4e52
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/index.html
View File

@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>document.documentElement.className = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'wa-dark' : 'wa-light';</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tickets App</title>
@@ -15,11 +16,18 @@
}
</style>
</head>
<body>
<body style="opacity: 0">
<wa-card>
<h1 slot="header">Hello World</h1>
<p>Welcome to the Tickets App!</p>
<wa-button variant="brand">Get Started</wa-button>
</wa-card>
<script type="module">
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.documentElement.className = e.matches ? 'wa-dark' : 'wa-light';
});
await customElements.whenDefined('wa-card');
document.body.style.opacity = 1;
</script>
</body>
</html>