| """Gradio theme for the futuristic car cockpit.""" | |
| from __future__ import annotations | |
| from pathlib import Path | |
| import gradio as gr | |
| _UI_DIR = Path(__file__).resolve().parent | |
| def load_cockpit_css() -> str: | |
| return (_UI_DIR / "cockpit.css").read_text(encoding="utf-8") | |
| def build_cockpit_theme() -> gr.themes.Base: | |
| return ( | |
| gr.themes.Base( | |
| primary_hue=gr.themes.colors.cyan, | |
| secondary_hue=gr.themes.colors.orange, | |
| neutral_hue=gr.themes.colors.zinc, | |
| font=[gr.themes.GoogleFont("Exo 2"), "ui-sans-serif", "system-ui", "sans-serif"], | |
| font_mono=[ | |
| gr.themes.GoogleFont("Share Tech Mono"), | |
| "ui-monospace", | |
| "monospace", | |
| ], | |
| ) | |
| .set( | |
| body_background_fill="#0a0e14", | |
| body_background_fill_dark="#0a0e14", | |
| body_text_color="#e0e6ed", | |
| body_text_color_dark="#e0e6ed", | |
| body_text_color_subdued="#8b9cb3", | |
| body_text_color_subdued_dark="#8b9cb3", | |
| background_fill_primary="#111820", | |
| background_fill_primary_dark="#111820", | |
| background_fill_secondary="#0d1219", | |
| background_fill_secondary_dark="#0d1219", | |
| block_background_fill="rgba(17, 24, 32, 0.92)", | |
| block_background_fill_dark="rgba(17, 24, 32, 0.92)", | |
| block_border_color="rgba(0, 212, 255, 0.28)", | |
| block_border_color_dark="rgba(0, 212, 255, 0.28)", | |
| block_label_text_color="#00d4ff", | |
| block_label_text_color_dark="#00d4ff", | |
| block_title_text_color="#00d4ff", | |
| block_title_text_color_dark="#00d4ff", | |
| input_background_fill="#0a0e14", | |
| input_background_fill_dark="#0a0e14", | |
| input_border_color="rgba(0, 212, 255, 0.35)", | |
| input_border_color_dark="rgba(0, 212, 255, 0.35)", | |
| button_primary_background_fill="#007a99", | |
| button_primary_background_fill_dark="#007a99", | |
| button_primary_background_fill_hover="#00a8cc", | |
| button_primary_background_fill_hover_dark="#00a8cc", | |
| button_primary_text_color="#ffffff", | |
| button_primary_text_color_dark="#ffffff", | |
| button_secondary_background_fill="#1a2330", | |
| button_secondary_background_fill_dark="#1a2330", | |
| button_secondary_background_fill_hover="#243040", | |
| button_secondary_background_fill_hover_dark="#243040", | |
| button_secondary_text_color="#00d4ff", | |
| button_secondary_text_color_dark="#00d4ff", | |
| border_color_primary="rgba(0, 212, 255, 0.35)", | |
| border_color_primary_dark="rgba(0, 212, 255, 0.35)", | |
| color_accent="#00d4ff", | |
| color_accent_soft="rgba(0, 212, 255, 0.15)", | |
| shadow_spread="4px", | |
| block_radius="10px", | |
| container_radius="12px", | |
| button_large_radius="8px", | |
| ) | |
| ) | |