[Hackathon] feat(frontend): theme system with 8 presets, animations, and easter eggs#5084
Open
MelihErduran wants to merge 2 commits into
Open
[Hackathon] feat(frontend): theme system with 8 presets, animations, and easter eggs#5084MelihErduran wants to merge 2 commits into
MelihErduran wants to merge 2 commits into
Conversation
Adds a runtime theme system (CSS custom properties + service-applied) that retints the whole frontend — dashboard, sidebar, workspace canvas, operator boxes, links, modals, forms, and Monaco — across 8 presets: Light, Dark, Sepia, Solarized Dark, Gruvbox, Synthwave, Forest, Cyberpunk. Theme is persisted via /api/user/config with a localStorage fallback for pre-auth paint; first paint honors prefers-color-scheme. JointJS doesn't honor CSS for paper background or grid dots, so the workflow editor subscribes to ThemeService and calls paper.drawBackground + paper.drawGrid on every theme change. Operator boxes / links / ports are themed via CSS overrides on JointJS-generated SVG (no JointUIService changes needed). Monaco follows along via global monaco.editor.setTheme. Also adds an opt-in motion + sound layer: canvas confetti on workflow success (colors sampled from the active theme), WebAudio-synthesized success/fail chimes, edge draw-in animation, operator settle animation, shake on failure, and a Konami code easter egg that locks Synthwave for 4.5s. Animations respect prefers-reduced-motion; sound defaults off. Bundled bin/texera fix: stop now port-sweeps known ports (1234/4200/3001/ 8080-9096) so a leaked y-websocket child from a prior start can't lock out the next start with EADDRINUSE. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
feature
frontend
MelihErduran
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Texera is a place people spend hours — building workflows, watching them run, iterating on UDFs. But it looks the same to every user, every session, every time of day. A grad student debugging a pipeline at 2 a.m. gets the same flat-white surface as someone demoing in a brightly lit lecture hall. There's no dark mode for dark-mode-OS users, no warm palette for long sessions, and nothing about the tool that feels like it's yours.
Submitted to the dkNet-AI Apache Texera Agent Hackathon under the brief "make using Texera enjoyable instead of it being just a tool." The goal isn't customization for its own sake — it's giving long-time users something that responds to them, and giving new users a moment of "oh, this is fun" the first time they finish a workflow run.
What you get
8 themes, picked from a submenu under the user-icon avatar: Light, Dark, Sepia, Solarized Dark, Gruvbox, Synthwave, Forest, Cyberpunk. Every surface follows along — dashboard, sidebar, workspace canvas, operator boxes, links, modals, forms, and the Monaco code editor. Themes persist per-account; first-paint honors your OS's
prefers-color-schemeso dark-mode users no longer get flashed with light.Workflow run feedback. When an execution completes, confetti bursts from the screen center in colors sampled from your active theme. When it fails, the viewport briefly shakes. Optional WebAudio chimes (off by default) play an ascending major triad on success and a descending tritone on failure. New operators scale in with a small overshoot when dropped; new links draw themselves in along their path.
Screen.Recording.2026-05-15.at.6.09.25.PM.1.mov
Screen.Recording.2026-05-15.at.6.10.12.PM.1.mov
Easter egg. Type
↑ ↑ ↓ ↓ ← → ← → B Aanywhere in the app. The Konami code locks the UI to Synthwave for ~4.5 seconds with three confetti volleys and the success chord, then quietly restores your previous theme.Screen.Recording.2026-05-15.at.6.15.15.PM.1.mov
Preferences submenu. Same user-icon dropdown, next to Theme — toggles for Animations and Sound effects. Both opt-in/out preferences persist per-account the same way the theme does. Users with
prefers-reduced-motionget animations off by default.How to use it
That's it. Nothing else needs configuring; logged-in users have their choice synced across browsers via the existing
/api/user/configendpoint, anonymous users get localStorage.Test plan
What's also in this PR (small)
bin/texera stopnow sweeps known ports (1234/4200/3001/8080–9096) before exiting. Without it, an orphanedy-websocketfrom a prior run could survivestopand lock out the nextstartwithEADDRINUSE. One-liner-fix-shaped, but it shows up the moment anyone runs the theme branch through the launcher.