diff --git a/img/wiregui.svg b/img/wiregui.svg
new file mode 100644
index 0000000..af4b8b5
--- /dev/null
+++ b/img/wiregui.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/wiregui/main.py b/wiregui/main.py
index bb3d8fb..267a150 100644
--- a/wiregui/main.py
+++ b/wiregui/main.py
@@ -7,6 +7,9 @@ from wiregui.config import get_settings
from wiregui.db import init_db
from wiregui.log_config import setup_logging
+# Serve static assets (logo, images)
+app.add_static_files("/img", "img")
+
# Mount REST API
app.include_router(api_router, prefix="/api")
@@ -89,6 +92,7 @@ def main() -> None:
host=settings.host,
port=settings.port,
title="WireGUI",
+ favicon="img/wiregui.svg",
storage_secret=settings.secret_key,
reload=True,
)
diff --git a/wiregui/pages/layout.py b/wiregui/pages/layout.py
index 7075c85..ff128c7 100644
--- a/wiregui/pages/layout.py
+++ b/wiregui/pages/layout.py
@@ -64,6 +64,7 @@ def layout(title: str = "WireGUI"):
with ui.header().classes("items-center justify-between"):
with ui.row().classes("items-center"):
ui.button(icon="menu", on_click=lambda: drawer.toggle()).props("flat color=white")
+ ui.image("/img/wiregui.svg").classes("w-8 h-8")
ui.label("WireGUI").classes("text-h6")
with ui.row().classes("items-center"):
if role == "admin":
diff --git a/wiregui/pages/login.py b/wiregui/pages/login.py
index 2a2919e..708bbc6 100644
--- a/wiregui/pages/login.py
+++ b/wiregui/pages/login.py
@@ -62,6 +62,7 @@ async def login_page():
ui.navigate.to("/")
with ui.column().classes("absolute-center items-center"):
+ ui.image("/img/wiregui.svg").classes("w-20 h-20")
ui.label("WireGUI").classes("text-h4 text-bold")
ui.label("Sign in to your account").classes("text-subtitle1 q-mb-md")
diff --git a/wiregui/pages/style.py b/wiregui/pages/style.py
index fde5eb4..3fa3c3a 100644
--- a/wiregui/pages/style.py
+++ b/wiregui/pages/style.py
@@ -2,19 +2,65 @@
from nicegui import ui
+# Logo palette
+_NAVY = "#0E2747"
+_BLUE = "#3598C3"
+_TEAL = "#5AA6B9"
+_TEAL_LIGHT = "#7AC7D6"
+_MID_BLUE = "#325F7B"
+
def apply_style():
- """Add Manrope font and global CSS overrides. Call once per page."""
+ """Add Manrope font, logo-based color theme, and global CSS overrides. Call once per page."""
ui.add_head_html(
''
''
''
)
- ui.add_css("""
- body, input, button, select, textarea {
+ ui.add_css(f"""
+ body, input, button, select, textarea {{
font-family: 'Manrope', sans-serif !important;
- }
- code, .font-mono, .q-table__container .monospace {
+ }}
+ code, .font-mono, .q-table__container .monospace {{
font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
- }
+ }}
+
+ /* ---- Light theme colors ---- */
+ :root {{
+ --q-primary: {_BLUE};
+ --q-secondary: {_TEAL};
+ --q-accent: {_TEAL_LIGHT};
+ --q-dark: {_NAVY};
+ --q-positive: #21BA45;
+ --q-negative: #C10015;
+ --q-info: {_MID_BLUE};
+ --q-warning: #F2C037;
+ }}
+
+ /* Header bar */
+ .q-header {{
+ background: linear-gradient(135deg, {_NAVY} 0%, {_MID_BLUE} 100%) !important;
+ }}
+
+ /* Left drawer */
+ .q-drawer {{
+ border-right-color: {_TEAL}33 !important;
+ }}
+
+ /* ---- Dark theme overrides ---- */
+ body.body--dark {{
+ --q-primary: {_TEAL};
+ --q-secondary: {_BLUE};
+ --q-accent: {_TEAL_LIGHT};
+ --q-dark: {_NAVY};
+ --q-info: {_TEAL_LIGHT};
+ }}
+
+ body.body--dark .q-header {{
+ background: linear-gradient(135deg, {_NAVY} 0%, #1a3a5c 100%) !important;
+ }}
+
+ body.body--dark .q-drawer {{
+ border-right-color: {_MID_BLUE}44 !important;
+ }}
""")
\ No newline at end of file