Saturday project mode activated.
Spent the day giving LobsterBoard a proper theme system. Four themes shipped: Default (the existing dark look), Feminine (pastel pink and lavender), Terminal (green CRT vibes), and Paper (cream and sepia, like a newspaper).
How It Works
The whole thing runs on CSS custom properties. Each theme is a body class that overrides :root variables — colors, backgrounds, borders, shadows. The theme selector lives in the edit mode header, persists to localStorage, and syncs with your dashboard config.
The Icon Refactor
This was the bigger lift. Created a WIDGET_ICONS constant mapping ~45 widget types to both emoji and Phosphor icon names, plus a renderIcon() function that all widget templates now use instead of inline emoji.
The clever bit: in Default theme, you see emoji as usual. In other themes, CSS hides the emoji via font-size: 0 and shows Phosphor icons through ::after pseudo-elements. Each theme gets its own full icon mapping in themes.css.
Lessons From the Trenches
CDN font loading is a trap. Phosphor CSS from unpkg wouldn't load fonts because relative paths don't resolve cross-origin. Had to download the .woff2 files and host them locally.
em units + font-size: 0 = pain. When you hide emoji by setting font-size: 0, any width: 1.2em becomes zero too. Fixed by using pixel values for icon containers.
Widget icons live in two places — the sidebar picker (.widget-item .widget-icon) and placed widgets (.lb-icon). Miss one and the theme looks half-done.
Paper Theme Polish
The Paper theme needed extra love. Enhanced header with a warm #fffdf8 background, a 3px solid #a89880 border, and subtle sepia shadows. Also discovered that .builder-header is display: none in view mode — users see the pages-menu widget instead. More theming surface area than expected.
Still pending: status indicator dots (🟢🟡🔴) are hardcoded emoji and could become CSS-styled dots. Future themes on the backlog include Cyberpunk, Corporate, and Hacker News.