This article is part of the series: 'Towards Vaadin Developer Certification,' which aims to explain the fundamentals of Vaadin while I study for this certification. The topics covered here are an integral part of the 'Vaadin Developer' Certification. While Vaadin offers built-in themes like Lumo, customizing themes is often necessary to align the application’s appearance with branding requirements. This article delves into creating custom themes and styling components using CSS. 1. Creating a Custom Theme 1. Creating a Custom Theme A custom theme allows overriding Lumo styles or defining entirely new ones. The recommended approach is extending Lumo instead of starting from scratch. Steps to create a custom theme: Steps to create a custom theme: Create a folder: Create a folder: Inside this folder, define theme.json: Inside this folder, define theme.json: theme.json Create a styles.css file inside my-theme: Create a styles.css file inside my-theme: Finally, apply the custom theme in Java: 2. Organizing CSS Files for Maintainability 2. Organizing CSS Files for Maintainability Vaadin allows importing stylesheets within styles.css: styles.css This keeps styles modular and easier to maintain. 3. Packaging Custom Themes as JAR Files 3. Packaging Custom Themes as JAR Files Themes can be distributed as dependencies by packaging them into a JAR file. The project consuming this theme needs to reference it via @Theme("your-theme"). @Theme("your-theme") Conclusion Conclusion Customizing Vaadin themes allows developers to tailor UI appearance while leveraging Lumo’s structure. By organizing stylesheets and packaging themes efficiently, applications remain maintainable and scalable. Disclaimer Disclaimer This content is drawn from studies and notes related to the Vaadin 24 certification. For deeper details, please consult the official documentation and learning materials for Vaadin certification. AI tools assisted in the structuring of this content; however, the writing and original content are solely done by the author. Authors Authors Paulo B. A. is an 'Oracle Certified Java Developer' and 'Spring Certified Professional' with a deep passion for Vaadin Flow. He crafts UIs with Vaadin and strives to make it the leading frontend framework for full-stack Java developers worldwide. He loves teaching, sharing knowledge, and creating content. While he enjoys learning theory through certifications, he always advocates for a practical approach. Linkedin.com/in/pbalves
X.com/p_b_alves
Mastodon.social/@pbalves Linkedin.com/in/pbalves X.com/p_b_alves Mastodon.social/@pbalves Staff Writer: Fábio A. P. is a technology enthusiast, self-taught writer, and scholar of society's relationship with technology. Passionate about sharing insights, he provides reliable perspectives on how technology shapes our lives. With clear and precise writing, Fábio simplifies complex topics, empowering readers to navigate the digital age with confidence. Staff Writer: Staff Writer: Medium.com/@fabioape Medium.com/@fabioape

Make Your Vaadin App Smarter, Prettier, and Faster With These Advanced Styling Hacks

Lumo Who? Build Your Own Theme in Vaadin and Rule the UI

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Beyond the Basics: Scroller and FormLayout in Vaadin Flow

0–100 in Django: Starting an app the right way

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: OpenAI is Sam Altman; Sam Altman is OpenAI (11/30/2023)

The Noonification: Panda Power (11/28/2023)

The Noonification: Feature Optimization for Price Prediction (11/26/2023)

Beyond the Basics: Scroller and FormLayout in Vaadin Flow

0–100 in Django: Starting an app the right way

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: OpenAI is Sam Altman; Sam Altman is OpenAI (11/30/2023)

The Noonification: Panda Power (11/28/2023)

The Noonification: Feature Optimization for Price Prediction (11/26/2023)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps