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 (9)
Wow, so cool. Choosing a theme for your website sounds like a cool idea. I would love to add it and experiment with the websites I visit.
Have you faced any issue on any website that didn't allowed you to change it's theme?
Thanks @konark_13
Please do share your feedback how you feel after using extension.
I faced issues on websites that uses Shadow DOM for embedding some of its content so in that case the theme is applied to page shell but not the content under Shadow DOM.
Sure, I would love to but you have made such an awesome project that I'm rather speechless so keep up the good work.
Got your point on Shadow DOM and Page shell. Any preparation to turn into a startup?
Haha! I have recieved some amazing suggestions would definitely work on them first and make this more polished.
Sure, go ahead. All the best for VibeBurst 2.0.
This is great.
I think it would be cool if you took it beyond the AI and let users create their own color profiles. Maybe add an auto-trigger feature, allowing those profiles to enable/disable depending on the web page.
Thanks @daveedchill
This is really cool idea. I'll definitely work on this as the custom colour profiles would give users a lot more control and the auto-trigger per site would make it feel almost like a smart dark mode on steroids.
This is a very nice project.
Is the chosen theme for a specific site always remembered?
Thanks @builtbyelly
Currently, the theme is only remembered within the same tab. I have plans of expanding it to make it remember for a site.