How to change color / styles in tabs-component in Vaadin-application - vaadin

Question

In my Vaadin application (Vaadin 23.2.0) I use tabs to group my content. The main colours of my application are white, grey and some accents in red. Accordingly, I would like to style my selected tabs in red.
I have already managed the following:
Unselected tabs are displayed in black.
Selected tabs are displayed in red.
Now Vaadin has a transition between clicking on the tab and the selection of the tab. By default, this transition is kept in Vaadin blue, which of course does not fit my theme. And I can't manage to style this transition. I would like to either style it dark red (to make the transition from dark red to my already used lighter red #DE323C) or omit it completely.
How does this work in Vaadin?
For styling the tabs I have used the following CSS snippets so far:
vaadin-tab[selected] {
colour: #DE323C;
}
vaadin-tab[selected]::before, vaadin-tab[selected]::after {
background-color: #DE323C;
}
I did some more tests with ::before and ::after, but Vaadin is very unimpressed.
Here is a simplified version of my Java code:
package ch.abacus.apihub.views.list;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.TabsVariant;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
#PageTitle("Test")
#Route(value = "test", layout = MainLayout.class)
public class TestView extends Div {
private final Tab tab1;
private final Tab tab2;
private final Tab tab3;
private final VerticalLayout content;
public TestView() {
// Create Tabs
tab1 = new Tab("This is tab 1");
tab2 = new Tab("This is tab 2");
tab3 = new Tab("This is tab 3");
// Event-Listener for clicking tabs
Tabs tabs = new Tabs(tab1, tab2, tab3);
tabs.addSelectedChangeListener(event ->
setContent(event.getSelectedTab())
);
// Tabs use available space
tabs.addThemeVariants(TabsVariant.LUMO_EQUAL_WIDTH_TABS);
// Create VerticalLayout for Tabs
content = new VerticalLayout();
content.setSpacing(false);
setContent(tabs.getSelectedTab());
// Add Tabs to created VerticalLayout
add(tabs, content);
}
private void setContent(Tab tab) {
content.removeAll();
if (tab.equals(tab1)) {
Paragraph tab1Paragraph = new Paragraph("Test tab 1");
content.add(tab1Paragraph);
} else if (tab.equals(tab2)) {
Paragraph tab2Paragraph = new Paragraph("Test tab 2");
content.add(tab2Paragraph);
} else if (tab.equals(tab3)) {
Paragraph tab3Paragraph = new Paragraph("Test tab 3");
content.add(tab3Paragraph);
}
}
}

Answer 1

You should create a file called vaadin-tab.css in frontend/themes//components
Inside that you can style all styles of a component
For example:
:host {
color: var(--lumo-primary-text-color);
font-weight: 400;
}
:host([selected]) {
color: black;
background-color: var(--tosca-selection-nonfocus);
transition: 0.6s color;
}
:host([selected].focused) {
color: black;
background-color: #8fc8d5;
transition: 0.6s color;
}
:host([selected])::before, :host([selected])::after {
display: none;
}
Learn more about styling components:
https://vaadin.com/docs/latest/styling/custom-theme/styling-components

Answer 2

Thank you very much for your answers.
The typo only crept in on Stackoverflow. It is not present in my CSS.
I placed the CSS code in the styles.css file.
I have now created a separate style sheet for the tabs. It probably wouldn't have been necessary, but I find it quite good that all the style things for the tabs can then be found in one place.
I was able to solve the problem by copying the default styles of the tabs from the #shadow-root of the tabs and overwriting them. My vaadin-tab.css now looks like this:
:host { /* Styling tab not focused etc. */
box-sizing: border-box;
padding: 0.5rem 0.75rem;
font-size : 16px;
line-height: 1;
font-weight: 500;
opacity: 1;
color: #282828;
transition: 0.15s color, 0.2s transform;
flex-shrink: 0;
display: flex;
align-items: center;
position: relative;
transform-origin: 50% 100%;
outline: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
min-width: var(--lumo-size-m);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-transform : UPPERCASE;
letter-spacing : 1px;
}
:host(:hover), :host([focus-ring]) { /* Styling tab hovered */
color: #B11D24; /* darker red */
}
:host([selected]) { /* Styling tab selected */
color: #DE323C;
transition: 0.6s color;
}
:host([active]:not([selected])) { /* relevant for transition */
color: #DE323C;
transition-duration: 0.1s;
}
:host::before, :host::after { /* Styling color line below text of tab */
content: '';
position: absolute;
display: var(--_lumo-tab-marker-display, block);
bottom: 0;
left: 50%;
width: var(--lumo-size-s);
height: 2px;
background-color: #282828;
border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
transform: translateX(-50%) scale(0);
transform-origin: 50% 100%;
transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
will-change: transform;
}
:host([selected])::before, :host([selected])::after { /* Styling color line below text of tab selected */
background-color: #DE323C;
}
Probably some CSS configurations could be removed, but I am quite satisfied: When hovering over it, the tabs are displayed in dark red and when clicking on a tab, the transition to my lighter red takes place. The Vaadin blue has now completely disappeared.