Switch to blue and yellow light theme

README.md

@@ -1,8 +1,8 @@
 ---
 title: Image Generator for HTML Games
 emoji: 🎮
-colorFrom: indigo
-colorTo: green
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
 sdk_version: 6.14.0
 app_file: app.py

app.py

@@ -2387,22 +2387,23 @@ def check_hf_token() -> str:
 
 APP_CSS = """
 :root {
-  --canvas: #070a12;
-  --surface: #0d1320;
-  --surface-raised: #111a2b;
-  --border: #25324a;
-  --border-bright: #344766;
-  --text: #f4f7fb;
-  --muted: #9aa8bd;
-  --accent: #72f2cf;
-  --accent-strong: #42dbb5;
-  --violet: #a89bff;
+  --canvas: #f7f9fe;
+  --surface: #ffffff;
+  --surface-raised: #f1f5ff;
+  --border: #d9e2f2;
+  --border-bright: #b9c9e8;
+  --text: #15233d;
+  --muted: #66758c;
+  --accent: #ffd447;
+  --accent-strong: #efb900;
+  --blue: #2457d6;
+  --blue-deep: #173b8f;
 }
 
 .gradio-container {
   background:
-    radial-gradient(circle at 8% 0%, rgba(82, 65, 170, .22), transparent 31rem),
-    radial-gradient(circle at 92% 12%, rgba(26, 173, 145, .12), transparent 26rem),
+    radial-gradient(circle at 8% 0%, rgba(36, 87, 214, .10), transparent 31rem),
+    radial-gradient(circle at 92% 10%, rgba(255, 212, 71, .18), transparent 25rem),
     var(--canvas) !important;
   color: var(--text) !important;
   max-width: none !important;
@@ -2416,10 +2417,10 @@ APP_CSS = """
   overflow: hidden;
   padding: 34px 38px;
   margin-bottom: 22px;
-  border: 1px solid var(--border-bright);
+  border: 1px solid #315ec3;
   border-radius: 24px;
-  background: linear-gradient(135deg, rgba(20, 30, 51, .96), rgba(11, 17, 29, .95));
-  box-shadow: 0 22px 60px rgba(0, 0, 0, .25);
+  background: linear-gradient(135deg, #173b8f, #2457d6);
+  box-shadow: 0 22px 60px rgba(32, 74, 172, .18);
 }
 
 .hero::after {
@@ -2430,11 +2431,11 @@ APP_CSS = """
   width: 320px;
   height: 320px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(114, 242, 207, .18), transparent 66%);
+  background: radial-gradient(circle, rgba(255, 221, 100, .30), transparent 66%);
 }
 
 .eyebrow {
-  color: var(--accent);
+  color: #ffe17c !important;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .16em;
@@ -2450,69 +2451,81 @@ APP_CSS = """
   letter-spacing: -.045em;
 }
 
-.hero p { max-width: 760px; margin: 0; color: #b9c5d7; font-size: 17px; line-height: 1.6; }
+.hero h1 { color: #fff !important; }
+.hero p { max-width: 760px; margin: 0; color: #dce6ff !important; font-size: 17px; line-height: 1.6; }
 .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
 .hero-chips span {
   padding: 7px 11px;
-  border: 1px solid #30415d;
+  border: 1px solid rgba(255, 225, 124, .52);
   border-radius: 999px;
-  background: rgba(8, 13, 23, .65);
-  color: #cfdaea;
+  background: rgba(16, 48, 124, .56);
+  color: #fff1b6 !important;
   font-size: 12px;
   font-weight: 700;
 }
 
 .step-heading { margin: 28px 0 12px; }
-.step-heading span { color: var(--accent); font: 800 12px/1 sans-serif; letter-spacing: .14em; text-transform: uppercase; }
-.step-heading h2 { margin: 7px 0 3px; color: var(--text); font-size: 24px; letter-spacing: -.025em; }
-.step-heading p { margin: 0; color: var(--muted); font-size: 14px; }
+.step-heading span { color: var(--blue) !important; font: 800 12px/1 sans-serif; letter-spacing: .14em; text-transform: uppercase; }
+.step-heading h2 { margin: 7px 0 3px; color: var(--text) !important; font-size: 24px; letter-spacing: -.025em; }
+.step-heading p { margin: 0; color: var(--muted) !important; font-size: 14px; }
 
-.panel {
+.studio-panel {
   border: 1px solid var(--border) !important;
   border-radius: 18px !important;
-  background: linear-gradient(180deg, rgba(17, 26, 43, .92), rgba(12, 18, 31, .96)) !important;
-  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
+  background: var(--surface) !important;
+  box-shadow: 0 12px 36px rgba(39, 72, 133, .09);
   padding: 18px !important;
 }
 
-.gradio-container label, .gradio-container .label-wrap { color: #dce5f2 !important; font-weight: 700 !important; }
+.studio-panel .form,
+.studio-panel .block {
+  background: transparent !important;
+}
+
+.studio-panel .form { border: 0 !important; }
+.studio-panel .label-wrap,
+.studio-panel .label-wrap span,
+.studio-panel label span { color: var(--text) !important; }
+.studio-panel .info { color: var(--muted) !important; }
+
+.gradio-container label, .gradio-container .label-wrap { color: var(--text) !important; font-weight: 700 !important; }
 .gradio-container .info { color: var(--muted) !important; }
 .gradio-container textarea,
 .gradio-container input,
 .gradio-container select,
 .gradio-container [role="listbox"] {
   color: var(--text) !important;
-  background: #090f1b !important;
+  background: #f8faff !important;
   border-color: var(--border) !important;
 }
 .gradio-container textarea:focus,
-.gradio-container input:focus { border-color: var(--accent-strong) !important; box-shadow: 0 0 0 2px rgba(66, 219, 181, .12) !important; }
+.gradio-container input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(36, 87, 214, .12) !important; }
 
 #generate-button {
   min-height: 52px;
   border: 0 !important;
   border-radius: 12px !important;
-  background: linear-gradient(135deg, var(--accent), #91f6a9) !important;
-  color: #06110e !important;
+  background: linear-gradient(135deg, #ffda58, #ffc928) !important;
+  color: #17315f !important;
   font-weight: 850 !important;
-  box-shadow: 0 10px 28px rgba(66, 219, 181, .18);
+  box-shadow: 0 10px 28px rgba(226, 169, 0, .20);
 }
 #generate-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
-.secondary-action { border-color: var(--border-bright) !important; background: #151f31 !important; color: #e7eef8 !important; }
-.status-card { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(114, 242, 207, .06); }
-.status-card p { margin: 0; color: #c9d6e6; }
+.secondary-action { border-color: #b8c9ed !important; background: #eef3ff !important; color: var(--blue-deep) !important; }
+.status-card { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--blue); border-radius: 8px; background: #eef4ff; }
+.status-card p { margin: 0; color: #385070 !important; }
 .gallery-panel .grid-wrap { background: transparent !important; }
 .preview-panel iframe { border: 1px solid var(--border-bright) !important; border-radius: 12px !important; }
 .diagnostics { margin-top: 20px; border-color: var(--border) !important; background: var(--surface) !important; }
 .pipeline-note { color: var(--muted); font-size: 13px; }
-.footer-note { margin-top: 28px; color: #718096; text-align: center; font-size: 12px; }
+.footer-note { margin-top: 28px; color: #75849a !important; text-align: center; font-size: 12px; }
 
 @media (max-width: 780px) {
   .app-shell { padding: 14px 14px 42px; }
   .hero { padding: 26px 22px; border-radius: 18px; }
   .hero h1 { font-size: 38px; }
   .hero p { font-size: 15px; }
-  .panel { padding: 13px !important; }
+  .studio-panel { padding: 13px !important; }
 }
 """
 
@@ -2539,7 +2552,7 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
             '<p>Paste the game first, then define the assets and shared art direction.</p></div>'
         )
         with gr.Row(equal_height=False):
-            with gr.Column(scale=3, elem_classes=["panel"]):
+            with gr.Column(scale=3, elem_classes=["studio-panel"]):
                 html_input = gr.Textbox(
                     label="Original HTML game code",
                     lines=22,
@@ -2547,7 +2560,7 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
                     value=STARTER_HTML,
                     info="Use GAME_ASSETS.<role> or sprite_<role>.png for deterministic embedding.",
                 )
-            with gr.Column(scale=2, elem_classes=["panel"]):
+            with gr.Column(scale=2, elem_classes=["studio-panel"]):
                 roles = gr.Textbox(
                     label="Assets to create",
                     lines=8,
@@ -2597,9 +2610,9 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
             '<p>Check subject, perspective, style, and transparency before approving an asset.</p></div>'
         )
         with gr.Row(equal_height=False):
-            with gr.Column(scale=3, elem_classes=["panel", "gallery-panel"]):
+            with gr.Column(scale=3, elem_classes=["studio-panel", "gallery-panel"]):
                 gallery = gr.Gallery(label="Generated assets", columns=2, height=420)
-            with gr.Column(scale=2, elem_classes=["panel"]):
+            with gr.Column(scale=2, elem_classes=["studio-panel"]):
                 selected_role = gr.Dropdown(
                     label="Asset to regenerate",
                     choices=[],
@@ -2619,9 +2632,9 @@ with gr.Blocks(title="Image Generator for HTML Games") as demo:
             '<div class="step-heading"><span>Step 03</span><h2>Play and export</h2>'
             '<p>Test the integrated game, then copy the rewritten HTML when it looks right.</p></div>'
         )
-        with gr.Column(elem_classes=["panel", "preview-panel"]):
+        with gr.Column(elem_classes=["studio-panel", "preview-panel"]):
             preview = gr.HTML("")
-        with gr.Column(elem_classes=["panel"]):
+        with gr.Column(elem_classes=["studio-panel"]):
             output_code = gr.Code(
                 label="Rewritten HTML with embedded images",
                 language="html",