@vaadin/vaadin-themable-mixin

What is @vaadin/vaadin-themable-mixin?

@vaadin/vaadin-themable-mixin is a mixin for creating themable web components. It allows developers to define custom styles and themes for their components, making it easier to maintain a consistent look and feel across applications.

What are @vaadin/vaadin-themable-mixin's main functionalities?

Custom CSS Properties

This feature allows developers to define custom CSS properties that can be used to style components. The code sample demonstrates how to create a custom property for the background color of a component.

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

class MyComponent extends ThemableMixin(HTMLElement) {
  static get is() { return 'my-component'; }

  static get styles() {
    return [
      css`
        :host {
          --my-component-background-color: white;
          background-color: var(--my-component-background-color);
        }
      `
    ];
  }
}
customElements.define(MyComponent.is, MyComponent);

Theme Variations

This feature allows components to support different theme variations. The code sample shows how to apply different styles when a 'dark' theme is applied to the component.

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

class MyComponent extends ThemableMixin(HTMLElement) {
  static get is() { return 'my-component'; }

  static get styles() {
    return [
      css`
        :host([theme~="dark"]) {
          background-color: black;
          color: white;
        }
      `
    ];
  }
}
customElements.define(MyComponent.is, MyComponent);

Other packages similar to @vaadin/vaadin-themable-mixin

lit-element

LitElement is a base class for creating fast, lightweight web components with Lit. It provides a simple way to define custom elements and manage their styles. Compared to @vaadin/vaadin-themable-mixin, LitElement offers a more comprehensive solution for building web components, including templating and reactive properties, but it also supports theming through CSS custom properties.

styled-components

Styled-components is a library for React and React Native that allows developers to use component-level styles in their applications. It uses tagged template literals to style components. While it is not specifically for web components, it offers a similar approach to theming and styling as @vaadin/vaadin-themable-mixin, but within the React ecosystem.

README

vaadin-themable-mixin

A mixin to enable customization of Shadow DOM used by Vaadin components.

Documentation ↗

License

Apache License 2.0