Vaadin’s got some serious styling chops, and it’s time we dive into the good stuff. If you’ve been using Vaadin for a while, you’ve probably noticed how easy it is to create decent-looking UIs right out of the box. But let’s face it, sometimes you want your app to stand out from the crowd. That’s where custom CSS and theming come into play.

First things first, let’s talk about Vaadin’s built-in theming system. It’s based on Lumo, which is pretty neat. You get a bunch of pre-defined CSS custom properties that you can tweak to your heart’s content. Want to change the primary color of your entire app? It’s as easy as:

html {
  --lumo-primary-color: #ff69b4;
}

Boom! Hot pink buttons for everyone. But that’s just scratching the surface.

Now, if you’re feeling a bit more adventurous, you can create your own theme. Start by creating a new directory in your project’s frontend folder called “themes”. Inside that, make another folder with your theme name. Let’s call it “my-awesome-theme”. In there, create a styles.css file. This is where the magic happens.

You can import Lumo if you want to build on top of it:

@import url('./lumo-theme.css');

/* Your custom styles go here */

Or, if you’re feeling particularly rebellious, start from scratch. Just remember, with great power comes great responsibility. And a lot of CSS debugging.

Now, let’s say you want to style a specific component. Vaadin uses Shadow DOM, which is great for encapsulation but can be a bit tricky when you’re trying to style things. Here’s a pro tip: use the ::part() selector. It’s like a secret passage into the Shadow DOM.

vaadin-button::part(label) {
  text-transform: uppercase;
  font-weight: bold;
}

This will make all your button labels shouting uppercase. Very assertive.

But what if you want to go even deeper? Time to talk about CSS custom properties. These are like variables for your styles, and Vaadin components expose a bunch of them. For example, to change the background color of all text fields:

vaadin-text-field {
  --vaadin-text-field-default-width: 15em;
  --lumo-contrast-10pct: #e6f7ff;
}

Now your text fields are wider and have a subtle blue background. Fancy!

Let’s get a bit more advanced. Say you’re building a dashboard and you want to create a custom card component. You could start with a vaadin-board-row and style it to look like a card:

.dashboard-card {
  background-color: var(--lumo-base-color);
  border-radius: var(--lumo-border-radius);
  box-shadow: var(--lumo-box-shadow-s);
  padding: var(--lumo-space-m);
  transition: box-shadow 0.3s ease-in-out;
}

.dashboard-card:hover {
  box-shadow: var(--lumo-box-shadow-l);
}

In your Java code, you’d use it like this:

BoardRow card = new BoardRow();
card.addClassName("dashboard-card");
card.add(new Span("Your card content here"));

Now you’ve got a slick, hoverable card component that fits right in with the rest of your Vaadin app.

But what if you’re working on a larger project and you want to keep your styles organized? Enter CSS Modules. Vaadin 14 and up support them out of the box. Create a file named my-view.module.css in your frontend folder:

.specialButton {
  background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
  border: 0;
  color: white;
  height: 48px;
  padding: 0 30px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
}

Then in your Java code:

@CssModule("./my-view.module.css")
public class MyView extends VerticalLayout {
    public MyView() {
        Button button = new Button("Click me!");
        button.addClassName("specialButton");
        add(button);
    }
}

Voila! A gorgeous gradient button that’s scoped to your view.

Now, let’s talk about responsive design. Vaadin’s got your back with the @media queries. You can use them in your theme to adjust styles based on screen size:

.my-component {
  font-size: 16px;
}

@media (max-width: 600px) {
  .my-component {
    font-size: 14px;
  }
}

This will make your component’s text a bit smaller on mobile devices. Neat, huh?

But wait, there’s more! What if you want to create different color schemes for your app? Light mode, dark mode, maybe even a funky disco mode? You can use CSS custom properties for that too:

html {
  --background-color: white;
  --text-color: black;
}

html[theme~="dark"] {
  --background-color: #1e1e1e;
  --text-color: #ffffff;
}

html[theme~="disco"] {
  --background-color: #ff00ff;
  --text-color: #00ffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

In your Java code, you can switch themes like this:

ThemeList themeList = UI.getCurrent().getElement().getThemeList();

// Switch to dark mode
themeList.add("dark");

// Switch to disco mode (party time!)
themeList.remove("dark");
themeList.add("disco");

Now your users can switch between themes faster than a chameleon on a disco ball.

Let’s not forget about animations. CSS animations can really bring your UI to life. Here’s a simple example of a pulsing effect you could add to a notification badge:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.notification-badge {
  animation: pulse 2s infinite;
}

Apply this class to any element you want to pulse, and bam! Instant attention-grabber.

Now, I know what you’re thinking. “This is all great, but what about performance?” Good question! When you’re going wild with custom styles, it’s easy to get carried away. Here are a few tips to keep your app running smooth:

1. Use CSS Grid and Flexbox for layouts instead of JavaScript-based layouting.
2. Be careful with box-shadows and other GPU-intensive properties.
3. Use will-change for elements you know will animate, but use it sparingly.
4. Consider using CSS containment to isolate parts of your page.

Here’s an example of using CSS Grid for a dashboard layout:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--lumo-space-m);
}

This will create a responsive grid of cards that adjusts based on screen size. No JavaScript required!

Lastly, let’s talk about accessibility. It’s crucial to make sure your custom styles don’t interfere with accessibility features. Always test your app with a screen reader, and make sure your color contrast ratios meet WCAG standards. Vaadin’s default theme is pretty good with this, but when you’re customizing, it’s on you to maintain that standard.

Here’s a tip: use the prefers-reduced-motion media query to respect your users’ motion sensitivity settings:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

This will disable all animations and transitions for users who have requested reduced motion in their system settings. It’s a small touch that can make a big difference for some of your users.

And there you have it! You’re now armed with the knowledge to take your Vaadin UI from “meh” to “marvelous”. Remember, with great styling power comes great responsibility. Use these techniques wisely, and your users will thank you with their oohs and aahs. Now go forth and make the web a more beautiful place, one Vaadin app at a time!