Enhance theming and styling across the application

- 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.
2026-09-14 13:40:33 +08:00 · 2026-06-14 16:48:25 +02:00
parent 16597a43c5
commit 91153550dd
4 changed files with 95 additions and 58 deletions
@@ -1,11 +1,26 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<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>
@@ -274,6 +274,10 @@ export function NumericSlider(props: NumericSliderProps) {
            onBlur={handleInputBlur}
            onKeyDown={handleInputKeyDown}
            disabled={props.disabled}
+            style={{
+              "box-shadow": "none !important",
+              "border": "none !important",
+            }}
          />
        </div>
      </div>
@@ -61,78 +61,96 @@
 }

 :root {
-  --canvas: hsla(0, 0%, 9%, 1);
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 6px;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --selection: hsla(207, 99%, 22%, 1);
+  --canvas: hsla(0, 0%, 91%, 1);
+  --background: hsla(0, 0%, 100%, 1);
+  --foreground: hsla(240, 5%, 9%, 1);
+  --card: hsla(0, 0%, 100%, 1);
+  --card-foreground: hsla(240, 5%, 9%, 1);
+  --popover: hsla(0, 0%, 95%, 1);
+  --popover-foreground: hsla(240, 5%, 9%, 1);
+  --primary: hsla(207, 100%, 50%, 1);
+  --primary-foreground: hsla(0, 0%, 95%, 1);
+  --primary-hover: hsla(207, 98%, 40%, 1);
+  --primary-pressing: hsla(207, 99%, 35%, 1);
+  --secondary: hsla(0, 0%, 95%, 1);
+  --secondary-foreground: hsla(207, 100%, 90%, 1);
+  --secondary-hover: hsla(0, 0%, 88%, 1);
+  --secondary-pressing: hsla(0, 0%, 40%, 1);
+  --tertiary: hsla(207, 100%, 50%, 1);
+  --tertiary-foreground: hsla(207, 100%, 90%, 1);
+  --tertiary-hover: hsla(207, 80%, 40%, 1);
+  --tertiary-pressing: hsla(207, 80%, 35%, 1);
+  --muted: hsla(0, 0%, 91%, 1);
+  --muted-foreground: hsla(0, 0%, 45%, 1);
+  --disabled-foreground: hsla(0, 0%, 40%, 1);
+  --accent: hsla(0, 0%, 95%, 1);
+  --accent-foreground: hsla(0, 0%, 45%, 1);
+  --destructive: hsla(0, 79%, 54%, 1);
+  --destructive-foreground: hsla(0, 0%, 100%, 1);
+  --destructive-hover: hsla(0, 60%, 40%, 1);
+  --destructive-pressing: hsla(0, 53%, 27%, 1);
+  --destructive-accent: hsla(0, 79%, 54%, 0.24);
+  --destructive-accent-foreground: hsla(0, 78%, 95%, 1);
+  --success-accent: hsla(162, 66%, 29%, 0.24);
+  --success-accent-foreground: hsla(162, 84%, 89%, 1);
+  --border: hsla(0, 0%, 91%, 1);
+  --border-input: hsla(0, 0%, 88%, 1);
+  --border-darker: hsla(0, 0%, 95%, 1);
+  --input: hsla(0, 0%, 95%, 1);
+  --ring: hsla(207, 100%, 50%, 1);
+  --canvas: hsla(0, 0%, 91%, 1);
+  --overlay: hsla(0, 0%, 9%, 0.7);
+  --overlay-soft: hsla(0, 0%, 9%, 0.4);
+  --selection: hsla(207, 100%, 50%, 1);
  --selection-foreground: hsla(207, 100%, 90%, 1);
+  --selection-muted-foreground: hsla(0, 0%, 45%, 1);
 }

 .dark {
  --canvas: hsla(0, 0%, 9%, 1);
  --background: hsla(0, 0%, 11%, 1);
-  --foreground: hsla(0, 0%, 100%, 1);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
+  --foreground: hsla(0, 0%, 95%, 1);
+  --card: hsla(0, 0%, 11%, 1);
+  --card-foreground: hsla(0, 0%, 95%, 1);
  --popover: hsla(0, 0%, 9%, 1);
-  --popover-foreground: oklch(0.985 0 0);
+  --popover-foreground: hsla(0, 0%, 95%, 1);
  --primary: hsla(207, 100%, 50%, 1);
-  --primary-foreground: oklch(0.205 0 0);
+  --primary-foreground: hsla(0, 0%, 95%, 1);
+  --primary-hover: hsla(207, 98%, 29%, 1);
+  --primary-pressing: hsla(207, 99%, 22%, 1);
  --secondary: hsla(0, 0%, 16%, 1);
-  --secondary-foreground: oklch(0.985 0 0);
+  --secondary-foreground: hsla(0, 0%, 95%, 1);
+  --secondary-hover: hsla(0, 0%, 25%, 1);
+  --secondary-pressing: hsla(0, 0%, 40%, 1);
+  --tertiary: hsla(207, 99%, 22%, 1);
+  --tertiary-foreground: hsla(207, 100%, 90%, 1);
+  --tertiary-hover: hsla(207, 80%, 17%, 1);
+  --tertiary-pressing: hsla(207, 80%, 14%, 1);
  --muted: hsla(0, 0%, 25%, 1);
  --muted-foreground: hsla(0, 0%, 62%, 1);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  --disabled-foreground: hsla(0, 0%, 40%, 1);
+  --accent: hsla(0, 0%, 16%, 1);
+  --accent-foreground: hsla(0, 0%, 62%, 1);
+  --destructive: hsla(0, 79%, 54%, 1);
+  --destructive-foreground: hsla(0, 0%, 100%, 1);
+  --destructive-hover: hsla(0, 60%, 40%, 1);
+  --destructive-pressing: hsla(0, 53%, 27%, 1);
+  --destructive-accent: hsla(0, 79%, 54%, 0.24);
+  --destructive-accent-foreground: hsla(0, 78%, 95%, 1);
+  --success-accent: hsla(162, 66%, 29%, 0.24);
+  --success-accent-foreground: hsla(162, 84%, 89%, 1);
  --border: hsla(0, 0%, 15%, 1);
+  --border-input: hsla(0, 0%, 25%, 1);
+  --border-darker: hsla(0, 0%, 11%, 1);
  --input: hsla(0, 0%, 16%, 1);
  --ring: hsla(207, 100%, 50%, 1);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --canvas: hsla(0, 0%, 9%, 1);
+  --overlay: hsla(0, 0%, 9%, 0.7);
+  --overlay-soft: hsla(0, 0%, 9%, 0.4);
  --selection: hsla(207, 99%, 22%, 1);
  --selection-foreground: hsla(207, 100%, 90%, 1);
+  --selection-muted-foreground: hsla(0, 0%, 16%, 1);
+  --inset: hsla(0, 0%, 25%, 1);
 }

@layer base {
@@ -146,7 +146,7 @@
 }

 .z-button-variant-default {
-  @apply bg-primary text-foreground hover:bg-primary/80;
+  @apply bg-primary dark:text-foreground text-background hover:bg-primary/80;
 }

 .z-button-variant-outline {