mirror of
https://github.com/diffusionstudio/lottie.git
synced 2026-09-14 13:40:33 +08:00
konstantin-paulus
91153550dd
- Implemented a dynamic color scheme toggle based on user preferences for improved accessibility. - Updated CSS variables for light and dark themes to ensure consistent styling. - Refined the NumericSlider component by removing default box-shadow and border styles for a cleaner appearance. - Adjusted button styles in base.css to support dark mode while maintaining visual consistency.
32 lines
1.1 KiB
HTML
32 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/mark.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<title>Text-to-Lottie by Diffusion Studio</title>
|
|
<!-- Apply the system color scheme before first paint to avoid a flash of
|
|
the wrong theme. Dark mode is class-based (see the `dark` custom
|
|
variant in src/index.css), so we just toggle `.dark` on <html>. -->
|
|
<script>
|
|
(function () {
|
|
var mq = window.matchMedia('(prefers-color-scheme: dark)');
|
|
var apply = function (dark) {
|
|
document.documentElement.classList.toggle('dark', dark);
|
|
};
|
|
apply(mq.matches);
|
|
mq.addEventListener('change', function (e) {
|
|
apply(e.matches);
|
|
});
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
<div id="root"></div>
|
|
|
|
<script src="/src/index.tsx" type="module"></script>
|
|
</body>
|
|
</html>
|