In der linkki Dokumentation zum Thema "Styling" wird beschrieben, wie man das linkki Theme einbindet. Das Einbinden des F10 Themes funktioniert analog. Der Name des Themes wird dabei als Konstante F10ProductTheme.F10_PRODUCT_THEME zur Verfügung gestellt.

Defaultmäßig wird ein dunkles Blau (hsl(206,100%,30%) / rgb(0,87,153) / #005799) als Primärfarbe gesetzt, was für die Musteranwendungen verwendet werden soll. In Kundenprojekten muss diese Farbe allerdings oft angepasst werden.

Dafür muss in dem Applikationsprojekt ein eigenes Theme angelegt werden, das das F10 Theme erweitert. Dafür stellt die linkki Dokumentation eine Anleitung in dem Kapitel "Styling" im Abschnitt "Customizing the linkki theme" bereit. Anstatt "linkki" muss "f10-product" in theme.json als Parent deklariert werden.

In der styles.css kann dann die Primärfarbe angepasst werden. Die primäre Farbe der Applikation wird über die drei CSS Properties festgelegt:

Daraus werden die weiteren Farbabstufungen (z.b. die der primären Textfarbe --lumo-primary-text-color) abgeleitet und berechnet. Da die weiteren Größen berechnet werden, müssen diese in der Regel nicht angepasst werden.

Insgesamt stehen folgende Konstanten zur Verfügung: