When hovering on tabs link the link is not visible completely.

Working on it.

I was able to replicate this issue in Drupal9.5 with Gin version 8.x-3.x-dev. I have raised a MR to fix it.

I'm unable to reproduce this. Also the local tasks look different than they should? Do you use any customization? If yes, check if they override the default behavior.

If that's not the case we'll need more information how to reproduce like e.g. on which Drupal version and if there are specific modules involved in this.

@saschaeggi I was able to reproduce this issue in Drupal9.5 and installing theme version 8.x-3.x-dev through composer. I have raised a MR to fix it.

I can confirm that I have the same issue when I am in dark mode in my browser.

@swatidhurandhar, @phjou I tried to reproduce this issue, but I'm not able to reproduce this on my local. Can you please provide detailed steps to reproduce this issue?

Oh I see why you're not able to reproduce.

It is working fine is you have just a couple tabs. But the style is changing when you have a lot of them.
- Just a couple tabs, there is a line under
- When you have a lot of them, the tabs will be wrapped into a rectangle.

I also have two nested levels of tabs, not sure if it has an impact on this issue.

Hi All,

To replicate, i follow the steps in drupal 10.2.1:

Steps to reproduce

1. Install the theme set as an administration theme.
2. Go to the /admin/appearance/settings/gin
3. Go to theme settings and Appearance and enable the dark mode
4. Hover on the above themes (tab links)
5. You will see that links are not visible completely.

This issue replicate based on screen size.

For reference:

I tried the steps mentioned in #21 and was not able to reproduce the issue. This needs more research/info when this happens.

@ahsannazir You do not have enough items in your secondary tabs to reproduce the issue.

I never reproduce on the default /admin/appearance/settings/gin with that little items.

You need to be in more or less desktop and with tabs that are not horizontal.

That's the code I have when I am on desktop but not horizontal:

.gin--dark-mode .tabs-wrapper:not(.is-horizontal) .tabs__tab {
  background-color: var(--gin-bg-item-hover);
  border-color: #8e929c;
}
.tabs__link:hover {
color: var(--color-text);
}

When everything goes right and I have the right color, the tabs are in horizontal mode:

.is-horizontal .tabs__link:hover, .claro-details__summary:hover, .action-link:hover {
  color: var(--gin-color-primary-hover);
}

Well, I applied MR!318 which is created by @saschaeggi,

issue resolved after applied MR,

For reference

let's wait for maintainer review.

The hover effect was coming from claro css.

.tabs__link:hover {
color: var(--color-text);
}

So updated MR to override tabs__link directly

After applying MR !318, issue is resolved.

For reference:-
After MR

RTBC ++

I'm still unable to reproduce this. Can somebody provide steps how to reproduce this?

Also the after MR looks wrong as it doesn't have the correct background color.

Closing as I can't reproduce this and no steps have been provided to reproduce this.