Theming System (OLED Dark)
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Theming System in Messenger Unleashed is a core architectural component designed to provide deep visual customization of the Facebook Messenger interface. By leveraging Electron's ability to inject CSS and execute JavaScript within a BrowserWindow, the system overrides default styles to offer specialized modes such as OLED Dark, which optimizes power consumption and visual comfort on OLED displays by replacing standard dark grays with true black (#000).
The system is designed for hot-swapping, allowing users to switch between over 17 built-in themes and experimental visual modes without requiring a full application reload. It serves as the foundation for other visual enhancements like Glassmorphism and Modern Look overlays.
Sources: CLAUDE.md:14-17, src/main/themes.ts:7-27, themes.css:1-25
Architecture and Implementation
Theme Extraction and Injection
The architecture relies on a centralized themes.css file which contains CSS blocks delimited by specific comment markers (e.g., /* oled */). The main process uses regular expressions to extract these slices at runtime.
The getThemeCSS function matches the requested theme ID against the comment markers in the source file. If a match is found, the content is injected into the renderer process using a unique cssKey named 'theme' to ensure that subsequent theme applications cleanly replace previous ones.
Sources: src/main/themes.ts:34-45, CLAUDE.md:52-55, AGENTS.md:18-19
OLED Dark Specification
The OLED Dark theme specifically targets the high-level containers of the Messenger interface to enforce a pure black background.
| Selector | Applied Property | Purpose |
|---|---|---|
html, body | background-color: #000 !important | Root container background |
div[role="main"] | background-color: #000 !important | Main chat window |
div[aria-label="Chats"] | background-color: #000 !important | Sidebar conversation list |
div[aria-label="Messages"] | background-color: #000 !important | Message thread background |
::-webkit-scrollbar-track | background: #000 | Scrollbar track consistency |
Sources: themes.css:1-25
Data Flow: Theme Selection
When a user selects a theme via the application menu or the settings modal, the application coordinates between the UI, the persistent store, and the theme engine.
The applyTheme function in src/main/index.ts triggers this sequence, ensuring that the visual change is immediate and the configuration is saved for future sessions.
Sources: src/main/index.ts:601-608, src/main/themes.ts:47-58, src/preload/settings-modal.ts:250-258
Theme Options and Varieties
The system supports several categories of themes, ranging from color schemes to structural layout changes.
Built-in Color Themes
Built-in themes are defined in the THEME_OPTIONS array and correspond to sections in themes.css.
- Standard Themes: OLED Dark, Nord, Dracula, Solarized Dark, High Contrast.
- Vibrant/Accent Themes: Crimson, Electric Blue, Ultraviolet, Hot Magenta, Cyber Teal, Acid Lime.
- Structural Themes: Compact Mode (reduces padding and avatar sizes).
Sources: src/main/themes.ts:7-27, themes.css:91-118
Experimental & Modern Visual Modes
In addition to standard CSS injection, the main process handles complex visual modes that involve specialized logic or multiple CSS keys.
| Feature | Function | Description |
|---|---|---|
| Modern Look | applyModernLook() | Adds glassmorphism floating panels and Indiana-style glows. |
| Floating Glass | applyFloatingGlass() | A premium UI override using specific backdrop filters and blur effects. |
| Android Bubbles | applyAndroidBubbles() | Specialized bubble shapes mimicking the Android Messenger app. |
| System Sync | applySystemTheme() | Automatically toggles between Default (Light) and OLED (Dark) based on OS settings. |
Sources: src/main/index.ts:1099-1262, src/main/themes.ts:60-84
Component Summary Table
| Component | File Path | Responsibility |
|---|---|---|
| Theme Engine | src/main/themes.ts | Regex extraction of CSS and injection logic. |
| CSS Definitions | themes.css | Raw CSS rules for all themes (OLED, Nord, etc.). |
| Theme Controller | src/main/index.ts | IPC handling, menu updates, and state coordination. |
| Selection UI | src/preload/settings-modal.ts | Rendering the theme selection interface in the settings modal. |
| Persistence | electron-store | Saving the user's preferred theme ID. |
Sources: src/main/themes.ts:1-5, src/main/index.ts:1-25, CLAUDE.md:20-25
Conclusion
The Theming System (OLED Dark) is a robust implementation of runtime UI modification. By isolating theme definitions in a single CSS file and managing injection via the Electron main process, the project achieves a high degree of customizability without the performance overhead of traditional skinning engines. The OLED Dark theme, in particular, demonstrates the system's utility in providing functional, hardware-optimized visual states for end-users.