Tune it. Preview it. Ship it.

Import "@proyecto-viviana/ui/theme.css" in your global stylesheet, then paste the block below after it. These rules override the --color-* design tokens the components read, so the whole library adopts your theme. The light block only lists tokens that differ from your dark theme, matching how /ui ships its scheme override.

/* Viviana theme — generated by the Theme Studio (proyecto-viviana). */
/* Import "@proyecto-viviana/ui/theme.css" in your global stylesheet, then paste the block below after it. These rules override the --color-* design tokens the components read, so the whole library adopts your theme. The light block only lists tokens that differ from your dark theme, matching how /ui ships its scheme override. */

:root {
  --color-grey-50: #ffffff;
  --color-grey-100: #e0e0e0;
  --color-grey-200: #c0c0c0;
  --color-grey-300: #a0a0a0;
  --color-grey-400: #606060;
  --color-grey-500: #404040;
  --color-grey-600: #1a1a1a;
  --color-grey-700: #111111;
  --color-grey-800: #0a0a0a;
  --color-grey-900: #000000;
  --color-blue-50: #eff5ff;
  --color-blue-100: #cdf4ff;
  --color-blue-200: #9ddcff;
  --color-blue-300: #61b4ff;
  --color-blue-400: #6d6dff;
  --color-blue-500: #8327ff;
  --color-blue-600: #7900ff;
  --color-blue-700: #6900ff;
  --color-blue-800: #5c00ff;
  --color-blue-900: #07061e;
  --color-pink-50: #fff4f4;
  --color-pink-100: #ffe2e6;
  --color-pink-200: #ffc3cf;
  --color-pink-300: #ff94a7;
  --color-pink-400: #ff657c;
  --color-pink-500: #f32847;
  --color-pink-600: #c71130;
  --color-pink-700: #a31024;
  --color-pink-800: #7e121b;
  --color-pink-900: #110404;
  --color-bg-100: #404040;
  --color-bg-200: #252525;
  --color-bg-300: #1a1a1a;
  --color-bg-400: #111111;
  --color-bg-light: #515151;
  --color-primary: #4ca3ff;
  --color-primary-50: #080c26;
  --color-primary-100: #cdf4ff;
  --color-primary-200: #9ddcff;
  --color-primary-300: #61b4ff;
  --color-primary-400: #6d6dff;
  --color-primary-500: #8052ff;
  --color-primary-600: #7f00ff;
  --color-primary-700: #6900ff;
  --color-primary-800: #5c00ff;
  --color-primary-900: #07061e;
  --color-accent: #888dff;
  --color-accent-50: #0c0e1a;
  --color-accent-100: #e0f2ff;
  --color-accent-200: #c1ddff;
  --color-accent-300: #9bc0ff;
  --color-accent-400: #899bff;
  --color-accent-500: #8a89ff;
  --color-accent-600: #7d61ff;
  --color-accent-700: #6036d7;
  --color-accent-800: #4b23a9;
  --color-accent-900: #080814;
  --color-accent-highlight: #9bc0ff;
  --color-success-100: #e5fff3;
  --color-success-200: #102a18;
  --color-success-300: #1a3a25;
  --color-success-400: #c2ffc8;
  --color-success-500: #5bc96e;
  --color-success-600: #238636;
  --color-success-700: #9fefaa;
  --color-success-800: #c2ffc8;
  --color-success-900: #e5fff3;
  --color-warning-100: #fffbe5;
  --color-warning-200: #2a2010;
  --color-warning-300: #3a2c18;
  --color-warning-400: #ffdd87;
  --color-warning-500: #e5c462;
  --color-warning-600: #966a13;
  --color-warning-700: #ffea9f;
  --color-warning-800: #fff3c2;
  --color-warning-900: #fffbe5;
  --color-danger-100: #ffe5e5;
  --color-danger-200: #2a1010;
  --color-danger-300: #401818;
  --color-danger-400: #ff8787;
  --color-danger-500: #e56767;
  --color-danger-600: #da3633;
  --color-danger-700: #ffa8a8;
  --color-danger-800: #ffc7c7;
  --color-danger-900: #ffe5e5;
  --color-cards-bg: #373737;
  --color-cards-bg-load: #484848;
  --color-correct: #83f1a7;
  --color-incorrect: #e74c3c;
  --color-canvas-bg: #000000;
  --color-background: #000000;
  --color-surface: #0a0a0a;
  --color-surface-elevated: #111111;
  --color-bg-blue-deep: #07061e;
  --color-bg-blue-dark: #110235;
  --color-bg-blue-mid: #190051;
  --color-bg-blue-light: #26006b;
  --color-text: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #606060;
  --color-text-dim: #4f6d85;
  --color-text-disabled: #404040;
  --color-border: #1a1a1a;
  --color-border-muted: #141414;
  --color-divider: #141414;
  --color-success: #3fb950;
  --color-success-dim: #238636;
  --color-warning: #d29922;
  --color-warning-dim: #966a13;
  --color-danger: #f85149;
  --color-danger-dim: #da3633;
  --color-primary-dim: #142861;
  --color-accent-dim: #232c46;
  --color-header-bg: #181818;
  --color-primary-glow: rgba(97, 180, 255, 0.6);
  --color-accent-glow: rgba(155, 192, 255, 0.6);
  --color-fusion-glow: rgba(180, 140, 230, 0.7);
  --color-success-bg: rgba(63, 185, 80, 0.1);
  --color-warning-bg: rgba(210, 153, 34, 0.1);
  --color-danger-bg: rgba(248, 81, 73, 0.1);
}

[data-color-scheme="light"] {
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e5e5e5;
  --color-grey-300: #d4d4d4;
  --color-grey-400: #a3a3a3;
  --color-grey-500: #737373;
  --color-grey-600: #525252;
  --color-grey-700: #404040;
  --color-grey-800: #262626;
  --color-grey-900: #171717;
  --color-blue-100: #d4f0ff;
  --color-blue-200: #9ed7ff;
  --color-blue-300: #52c0ff;
  --color-blue-400: #4ca3ff;
  --color-blue-500: #2c88ff;
  --color-blue-600: #0a69ec;
  --color-blue-700: #104dc7;
  --color-blue-800: #0c3399;
  --color-blue-900: #071d64;
  --color-pink-100: #fff1f1;
  --color-pink-200: #ffc3c7;
  --color-pink-300: #ff8585;
  --color-pink-400: #f94658;
  --color-pink-500: #e8000e;
  --color-pink-600: #b60000;
  --color-pink-700: #9b0001;
  --color-pink-800: #780006;
  --color-pink-900: #570007;
  --color-bg-100: #7096a8;
  --color-bg-200: #a8c5d4;
  --color-bg-300: #c8dce6;
  --color-bg-400: #dbe8ef;
  --color-bg-light: #ffffff;
  --color-primary-50: #eff5ff;
  --color-primary-100: #040d31;
  --color-primary-200: #0b1759;
  --color-primary-300: #0e2789;
  --color-primary-400: #1235bb;
  --color-primary-500: #2b34eb;
  --color-primary-600: #2d41ff;
  --color-primary-700: #2096ff;
  --color-primary-800: #7bc7ff;
  --color-primary-900: #071d64;
  --color-accent: #7564ff;
  --color-accent-50: #f3f5ff;
  --color-accent-100: #0b1121;
  --color-accent-200: #18203c;
  --color-accent-300: #25345e;
  --color-accent-400: #334781;
  --color-accent-500: #4354a0;
  --color-accent-600: #4d63b8;
  --color-accent-700: #749ee6;
  --color-accent-800: #a6c6f4;
  --color-accent-900: #1a2545;
  --color-accent-highlight: #25345e;
  --color-success-200: #c2ffc8;
  --color-success-300: #9fefaa;
  --color-success-400: #1a7f37;
  --color-success-600: #116329;
  --color-success-700: #3d7a5f;
  --color-success-800: #2a5741;
  --color-success-900: #1a3529;
  --color-warning-200: #fff3c2;
  --color-warning-300: #ffea9f;
  --color-warning-400: #7d5200;
  --color-warning-600: #654200;
  --color-warning-700: #7a6d42;
  --color-warning-800: #574d2f;
  --color-warning-900: #352f1c;
  --color-danger-200: #ffc7c7;
  --color-danger-300: #ffa8a8;
  --color-danger-400: #cf222e;
  --color-danger-600: #a40e26;
  --color-danger-700: #7a4242;
  --color-danger-800: #572f2f;
  --color-danger-900: #351c1c;
  --color-cards-bg: #ecf2f5;
  --color-cards-bg-load: #dfeaef;
  --color-correct: #1a7f37;
  --color-incorrect: #cf222e;
  --color-canvas-bg: #404040;
  --color-background: #f2f7fa;
  --color-surface: #ffffff;
  --color-surface-elevated: #e6f0f5;
  --color-bg-blue-deep: #d4f0ff;
  --color-bg-blue-dark: #9ed7ff;
  --color-bg-blue-mid: #52c0ff;
  --color-bg-blue-light: #4ca3ff;
  --color-text: #1a3040;
  --color-text-secondary: #405d70;
  --color-text-muted: #7096a8;
  --color-text-disabled: #a8c5d4;
  --color-border: #c8dce6;
  --color-border-muted: #dbe8ef;
  --color-divider: #dbe8ef;
  --color-success: #5bc96e;
  --color-success-dim: #559d87;
  --color-warning: #e5c462;
  --color-warning-dim: #9d8d55;
  --color-danger: #e56767;
  --color-danger-dim: #9d5555;
  --color-primary-dim: #9ed7ff;
  --color-accent-dim: #bcd5f7;
  --color-header-bg: #d0e4ed;
  --color-primary-glow: rgba(76, 163, 255, 0.4);
  --color-accent-glow: rgba(129, 164, 216, 0.4);
  --color-fusion-glow: rgba(170, 130, 180, 0.5);
  --color-warning-bg: rgba(210, 153, 34, 0.15);
}