VibeSwitch

VibeSwitch landing screen – users can instantly choose a vibe and transform the mood of the interface.
Pastel theme showcasing soft colors and a calm aesthetic design
Nature theme with green tones and subtle animated elements to create a peaceful, refreshing atmosphere.
Dark theme focused on minimal design and low-light comfort for a calm and focused experience.
Cozy theme showcasing soft colors for a cozy, relaxing vibe.

Inspiration

Design is deeply emotional. Colors, fonts, and layouts can instantly influence how we feel, yet most websites and applications use static themes that don’t adapt to a user’s emotional state. We were inspired by the idea that design should respond to emotion, not just functionality. This led us to build a mood-based theme generator that transforms feelings into visually appealing themes, making digital experiences more personal and expressive.

What it does

VibeSwitch is a mood-based theme generator that allows users to select how they feel and instantly transforms the website’s visual theme to match that emotion. Based on the chosen mood, the application dynamically updates background colors, typography, and overall aesthetics, creating a personalized and emotionally engaging user experience. The goal is to make digital design feel more human, expressive, and responsive to emotions.

How we built it

The project was built entirely using HTML, CSS, and JavaScript, focusing on clean design and smooth user interaction. Users select a mood, and the application dynamically updates the background colors, typography, and visual elements to reflect that emotion. JavaScript handles mood selection and theme switching, while CSS manages aesthetic consistency and visual transitions. The entire project runs on the browser, making it lightweight, fast, and easy to access.

Challenges we ran into

One of the main challenges was ensuring that theme changes felt smooth and emotionally accurate without overwhelming the user. Balancing aesthetics with usability required multiple iterations and testing. Coordinating changes across different components while working as a team also required careful version control and clear role management.

Accomplishments that we're proud of

Successfully built a fully functional, emotion-driven theme generator using only HTML, CSS, and JavaScript Designed visually distinct themes that effectively represent different moods Achieved smooth theme transitions while maintaining usability and clarity Collaborated efficiently as a team using GitHub for version control Delivered a clean, minimal, and aesthetically pleasing user interface within a limited time frame

What we learned

Through this project, we learned how design choices affect user emotions, and how small visual changes can create meaningful experiences. We also improved our understanding of DOM manipulation, CSS styling strategies, and collaborative development using GitHub. Working as a team helped us learn task distribution, version control, and effective communication under time constraints.

What's next for VibeSwitch

Adding more mood options with deeper customization Allowing users to fine-tune colors, fonts, and layouts Introducing save and export options for generated themes Enhancing animations and micro-interactions for richer emotional expression Expanding VibeSwitch into a reusable tool for designers and developers