Theming & Styling
Relevant source files
The following files were used as context for generating this wiki page:
Theming and styling within the WIREDUP project encompasses both the NexTerm Rust-based terminal user interface (TUI) and the web-based landing page. The system is designed to provide a cohesive visual experience through customizable themes in the terminal and modern, responsive CSS frameworks for the web interface. In the Rust terminal, styling is primarily handled via the ratatui and crossterm crates, allowing for granular control over colors, modifiers, and layouts.
Sources: rust-terminal/src/ui/tui.rs:1-20, public/index.html:10-50, rust-terminal/README.md:10-20
Terminal UI Styling Architecture
The NexTerm terminal utilizes a structured styling system defined within its Rust core. Styling is applied to various UI components such as tabs, command input areas, status bars, and the main output console. The architecture relies on ratatui's styling primitives (Color, Modifier, Style) to define the visual attributes of these components.
Core Styling Components
The TerminalUI struct manages the visual state of the terminal, including active tabs and the visibility of specific panels like the "Auto-wire" dashboard. Styling is applied during the draw_ui phase of the rendering loop.
The diagram above shows the flow of configuration data into the UI rendering logic, where specific widgets receive style attributes.
Sources: rust-terminal/src/ui/tui.rs:100-150, rust-terminal/src/utils/config.rs:10-25
Styling Primitives in Rust
The terminal UI uses specific colors to denote different functional areas or statuses:
- Active Selection: Yellow (
Color::Yellow) and Bold (Modifier::BOLD) are used for highlighted tabs. - Command Input: Green (
Color::Green) is used for the command input block to indicate readiness. - Auto-Wiring Panel: Cyan (
Color::Cyan) and Bold are used for headers, with specific statuses shown in Green. - General Output: Gray (
Color::Gray) is used for standard command output to maintain readability.
Sources: rust-terminal/src/ui/tui.rs:145-215, rust-terminal/Cargo.toml:45-55
Web Interface Styling
The web interface (deployed via Cloudflare Pages) uses a different styling stack focused on modern web standards. It utilizes a CSS-in-HTML approach with a focus on responsive design and visual depth.
Visual Identity
The web landing page employs a linear gradient background (linear-gradient(135deg, #667eea 0%, #764ba2 100%)) to create a professional, "AI-centric" atmosphere. It uses the Segoe UI font stack for clarity across operating systems.
Component Styling
| Component | Style Attributes | Purpose |
|---|---|---|
| Container | Max-width: 1200px, Margin: auto | Centers content on large screens |
| Stat Card | Glassmorphism (rgba white, backdrop-filter: blur) | Displays system statistics with depth |
| Primary Button | Background: #fff, Color: #667eea, Border-radius: 50px | Highlighted call-to-action (GitHub) |
| Tech Badge | Background: rgba(255,255,255,0.2) | Highlights the technology stack items |
Sources: public/index.html:15-100
The class diagram represents the high-level relationship between the two styling subsystems under a unified brand identity.
Sources: public/index.html:10-50, rust-terminal/src/ui/tui.rs:10-30
Configuration-Driven Themes
NexTerm supports persistent theme selection through a TOML configuration file. The default theme is "dracula", a popular dark theme for developers.
Configuration Fields
The Config struct in rust-terminal/src/utils/config.rs contains several fields that directly impact the styling and layout of the terminal:
theme: A string identifying the active color scheme.font_size: Determines the text scale (default: 14).show_status_bar: A boolean toggle for the visual footer.
Sources: rust-terminal/src/utils/config.rs:10-30
Config Structure Snippet
#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Config {
pub shell: String,
pub editor: String,
pub theme: String,
pub ai_enabled: bool,
pub autowire_enabled: bool,
pub font_size: u16,
pub show_status_bar: bool,
}
Sources: rust-terminal/src/utils/config.rs:10-18
Dynamic UI Updates
The terminal UI includes dynamic styling updates based on system state, specifically the "Auto-Wiring" status.
This sequence shows how the UI dynamically shifts its layout and styling based on internal logic and user interaction.
Sources: rust-terminal/src/ui/tui.rs:250-280, rust-terminal/src/main.rs:100-150
Summary
Theming and Styling in WIREDUP are split between a robust, configuration-driven TUI in Rust and a modern, responsive landing page. NexTerm relies on the ratatui ecosystem to provide a high-performance terminal experience with modular themes, while the web interface uses CSS3 features like backdrop filters and gradients to present the project's capabilities. Both systems prioritize a "dark-mode" aesthetic, utilizing deep purples, cyans, and greens to represent the AI-driven nature of the software.
Sources: rust-terminal/README.md:15-30, public/index.html:250-265