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