Theming & Custom Styles
Relevant source files
The following files were used as context for generating this wiki page:
Theming in Warpgate is built upon a hybrid architecture utilizing Svelte stores for state management, Sass (SCSS) for modular styling, and Bootstrap 5 as the foundational UI framework. The system supports dynamic theme switching between light and dark modes, including an "auto" mode that respects system-level color scheme preferences.
The visual identity is driven by specific typography—primarily the Poppins and Work Sans fonts—and a customized color palette defined through Sass variables that override Bootstrap defaults to provide a high-contrast, professional interface for both the Admin and Gateway portals.
Theme Management Architecture
The core logic for theme orchestration resides in the web frontend's theme module. It manages the application of styles via dynamic CSS injection and persists user preferences in local storage.
Theme State and Orchestration
The system tracks theme state using two primary Svelte stores:
currentTheme: Stores the user's preference (light,dark, orauto).currentThemeFile: Stores the currently active resolved theme (lightordark).
When a theme is selected, the setCurrentTheme function updates the store and localStorage. If auto is selected, the system utilizes a matchMedia listener to detect and react to OS-level changes in the prefers-color-scheme.
Sources: warpgate-web/src/theme/index.ts:5-43
Style Implementation and Sass Framework
Warpgate extends Bootstrap 5 using a modular Sass structure. The configuration is split between common variables, theme-specific overrides (e.g., dark mode variants), and component-level mixins.
CSS Variable System
The project makes extensive use of CSS variables (custom properties) to ensure components remain theme-aware without requiring specific class overrides for every element. Key overrides include:
- Links: Custom underline offsets and colors using
--wg-link-underline-color. - List Groups: Reusable variables for padding, borders, and active states.
- Buttons: A custom
button-variantmixin that calculates hover and active shades based on color contrast.
Sources: warpgate-web/src/theme/_theme.scss:3-132, warpgate-web/src/theme/vars.dark.scss:64-70
Dark Mode Configuration
Dark mode utilizes a specific palette with a deep background (#14141a) and muted text (#c1c9e4). It overrides standard Bootstrap color maps for primary, secondary, and alert states.
| Variable | Value | Description |
|---|---|---|
$body-bg | #14141a | Main background for dark mode |
$primary | #449fbe | Blue accent color used for primary actions |
$input-bg | #1c1c24 | Background for form controls |
$code-color | #84f1fe | Syntax highlighting color for code blocks |
Sources: warpgate-web/src/theme/vars.dark.scss:3-60
Dynamic Component Branding
Branding elements, such as the Warpgate logo, are rendered as inline SVGs and colorized dynamically based on the active theme store.
Brand Recoloring Logic
The Brand.svelte component subscribes to the currentThemeFile store. When the theme changes, it iterates through the SVG paths and applies a calculated RGB gradient to the fill property.
Specialized Terminal Theming
The TerminalRecordingPlayer implements a dedicated terminal color scheme to ensure readability of SSH session replays. This theme is independent of the main UI theme to maintain technical accuracy of the recorded session.
Terminal Color Palette
The terminal uses a 16-color ANSI palette mapped to specific hex codes, featuring a dark grey background (#262626) and a vibrant orange cursor (#fc531d).
| Color Category | Hex Range / Examples |
|---|---|
| Foreground | #ffcb83 |
| Standard ANSI | Black: #000000, Red: #c13900, Green: #a4a900 |
| Bright ANSI | Bright Blue: #ffbe55, Bright White: #fafaff |
Sources: warpgate-web/src/admin/player/TerminalRecordingPlayer.svelte:28-56
Integration with UI Frameworks
The application utilizes several Svelte-based UI libraries that are integrated into the theming system:
- Sveltestrap: Provides Bootstrap 5 components. Warpgate uses custom ports (e.g.,
Badge.svelte) to ensure propertext-bg-{color}classes are applied for Bootstrap 5 compatibility. - Fontsource: Manages the loading of Poppins (headings) and Work Sans (body text).
- Xterm.js: The terminal emulator used for session recordings, which receives the custom theme object during initialization.
Sources: warpgate-web/package.json:42-100, warpgate-web/src/theme/_theme.scss:68-73, warpgate-web/src/common/sveltestrap-s5-ports/Badge.svelte:44-55
Summary of Theming Significance
Theming in Warpgate serves as more than just a visual layer; it is an integrated system that ensures consistency across varied protocols (SSH, HTTP, Database) and UI states. By combining Sass variable hierarchies with Svelte's reactive stores, the project maintains a lightweight yet robust styling engine capable of handling high-contrast technical data and session replays.