From a5b2dc6fefaa8b2f0184049526eb491aa667ce9a Mon Sep 17 00:00:00 2001
From: LucasDLTG <lucas.deletang.legravier@gmail.com>
Date: Wed, 29 Apr 2026 21:05:16 +0200
Subject: [PATCH] fix: transtion for background

---
 README.md                           |  2 +-
 src/components/chat/ModelSelect.tsx |  2 +-
 src/globals.css                     | 16 +++++++++++++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index aee74ff..80a4e78 100644
--- a/README.md
+++ b/README.md
@@ -144,4 +144,4 @@ git tag -d v1.0.0; git push origin :refs/tags/v1.0.0; git tag -a v1.0.0 -m "Rele
 - Token refresh
 - No error when streaming with too large model
 - Translations
-- qtop models during geenration
+- stop models during geenration
diff --git a/src/components/chat/ModelSelect.tsx b/src/components/chat/ModelSelect.tsx
index 151441d..b0fbc6b 100644
--- a/src/components/chat/ModelSelect.tsx
+++ b/src/components/chat/ModelSelect.tsx
@@ -31,7 +31,7 @@ export default function ModelSelect({
       {/* Trigger */}
       <button
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-2 bg-secondary border border-muted rounded-lg px-3 py-2 text-sm text-primary transition-fast"
+        className="flex items-center gap-2 bg-secondary border border-muted rounded-lg px-3 py-2 text-sm text-primary transition-theme"
       >
         <span>{selectedModel || 'Select model'}</span>
 
diff --git a/src/globals.css b/src/globals.css
index 0d0241d..d3a1f82 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -24,7 +24,7 @@ body {
   --footer-height: 70px;
 
   --bg-primary: #000000;
-  --bg-secondary: oklch(27.4% 0.006 286.033);
+  --bg-secondary: #27272a;
 
   --text-primary: #ffffff;
   --text-secondary: #bbbbbb;
@@ -109,9 +109,23 @@ body {
    TRANSITIONS
 ========================= */
 
+@property --bg-secondary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --bg-primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
 @layer utilities {
   .transition-theme {
     transition:
+      --bg-secondary 500ms ease,
+      --bg-primary 500ms ease,
       color 500ms ease,
       background-color 500ms ease,
       border-color 500ms ease;