This is a submission for the DEV Weekend Challenge: Community
The Community
You know that feeling when you've been staring at GitHub for 6 hours straight and everything just looks... the same? Every site, same vibe, same boring UI. Dark mode if you're lucky. Maybe someone made a theme extension for that one specific site. Cool.
But what if you could just throw a whole aesthetic onto any site? Like, cyberpunk GitHub at 2am because why not. Glassmorphism on your docs. Brutalist Hacker News — which honestly already looks like that anyway.
Yeah, that's what I built.
What I Built
VibeBurst is a Chrome extension. You click it, pick a theme, and AI restyles the entire page with custom CSS. Not some generic stylesheet that breaks everything — it actually reads the page and generates CSS that makes sense for that specific site.
The four themes:
- ⚡ Cyberpunk — dark backgrounds, neon cyan and magenta glows, monospace fonts
- 🔮 Glassmorphism — frosted glass aesthetic, soft purple and teal, airy and light
- 🧱 Brutalist — maximum contrast, pure black and white, bold red accents, zero ornamentation
- 🌅 Retro Wave — warm 80s sunset gradients, neon pink and sky blue, synthwave nostalgia
Hit Regenerate to get a fresh take. Hit Reset to go back to normal. That's it.
Demo
Here's is simple demo and screenshots of how this works on different websites.
Same View in different views:
Code
Github repository link - https://github.com/Jasmin2895/VibeBurst
How I Built It
Stack: Plasmo + TypeScript + React for the extension, Groq API with llama-3.3-70b-versatile for generating CSS. Nothing fancy.
The AI part was honestly the easy bit. The hard part? Making the CSS not destroy the page.
Early versions were a mess. * selector wrecks everything. Touch width/height and the layout's gone. Bad contrast and you can't read anything. Took a lot of trial and error — ended up building a sanitizeCSS function to strip out anything that could break layouts before injecting.
Then there's the fact that most sites barely use semantic HTML. It's all divs and class names. Targeting header or nav does almost nothing on sites like Google. So I had to scan the site's actual stylesheets, find every class setting a background-color, and catch the JS-injected ones too.
Biggest thing that clicked: don't let the AI pick colors for class selectors. Let it style body, h1, button — the semantic stuff. Then grab the body background-color and apply it to all site-specific classes programmatically. That's when things finally stopped looking patchy.
No JS touched. Page works the same. Just looks different.
Weekend project that taught me CSS specificity is painful and theming the web is harder than it should be. 😅
It was an overall great learning experience. Thanks Dev Team for organising this short weekend challenge! 👩💻
Top comments (0)