Theme issue for Vaadin 12

Flow
1

Hi,

I have shared-style.html like:

<dom-module id="maintfield" theme-for="vaadin-text-field">
	<template>
		<style>
			:host([required]
) [part="input-field"]
 {
				border: 1px solid;
				background-color: #F2E8B6
			}
		</style>
	</template>
</dom-module>

However, the background-color of the created TextField behaved wield. When focused, the color was OK. When losing focus, it became default color. The color just jumped back and forth. However, the same code behaved normally in Vaadin 11. I don’t know why?

Best regards,
Joey

2

Hello, this is actually caused by how theme modules are loaded.
I have reported the issue here: https://github.com/vaadin/vaadin-themable-mixin/issues/38

Until we get it fixed, please use the workaround like this to increase CSS specificity:

<dom-module id="maintfield" theme-for="vaadin-text-field">
	<template>
		<style>
			:host([required]
) [part="input-field"]
,
			:host([required]
[invalid]
) [part="input-field"]
 {
				border: 1px solid;
				background-color: #F2E8B6
			}
		</style>
	</template>
</dom-module>

You can also use !important if you are absolutely sure that it doesn’t expected to be overridden.

3

Thanks a lot. Similar issue also happens to vaadin-button. My custom style looks like:

<dom-module id="toolbar" theme-for="vaadin-button">
	<template>
		<style>
			:host {
				background-color: #D6E4F1;
				cursor: pointer;
			}

			:host([hidden]
) {
				display: none !important;
			}
		</style>
	</template>
</dom-module>

However, the background-color and cursor don’t behave as expected, while Vaadin 11 works. Any alternatives?

Best regards,
Joey

4

In general, when building custom theme on top of Lumo or Material, we recommend using theme attribute like this:

<dom-module id="toolbar" theme-for="vaadin-button">
	<template>
		<style>
			:host([theme="toolbar"]
) {
				background-color: #D6E4F1;
				cursor: pointer;
			}
		</style>
	</template>
</dom-module>

Then, you can use your custom theme explicitly:

<vaadin-button theme="toolbar">Toolbar button</vaadin-button>

This enables you to keep the Lumo (Material) default appearance untouched, in case you ever need it later.

5

Thanks a lot. Would that be also applied to other vaadin components such as vaadin-text-field, vaadin-password-field, vaadin-combo-box, etc.?

6

Yes, in general it would be better to create custom themes using theme attribute for all Vaadin components, both to ensure CSS specificity and to make development easier.

7

Thanks a lot.