🐞 - [v4] `Hint` with appearance `dark` doesn't adapt to dark mode

[hakimio]

Code Example URL

https://taiga-ui.dev/directives/hint/API?tuiHintAppearance=dark&darkMode=true

Description

In v3 hint with mode on onDark would correctly change background color when application is switched to dark mode:

Unfortunately this does not happen in v4:

---

As as sidenote, if you try to type in the demo input in dark mode, input text is not visible.

Taiga UI version

4.7.0

Browser Used

Chrome

OS Used

Windows

[waterplea]

You want it to be dark? It is meant to be white by design. If it was dark in v3 it is a bug

[hakimio]

Yes, I do. It looks out of place in dark mode when everything else is dark and tooltip is light. As a middle ground it could follow the same design like the new card component: dark grey background in dark mode.

EDIT: for reference check out Angular Material tooltip in dark mode: https://v6.material.angular.io/components/tooltip/examples

[waterplea]

Yes, it probably should use elevated variable. There's a bit of redesign coming for tooltips, adding different behavior on mobile devices, I'll keep this in mind.

[waterplea]

I don't see the switch to dark mode for that link but latest Angular Material does exactly what we do :)

[hakimio]

You can switch the theme to dark. Here is how the tooltip looks for me in dark mode:

[hakimio]

Ok, sorry. I was looking at the old version of Angular Material. Still I prefer the old behavior.

[waterplea]

Anyway, I'll close this in favor of https://github.com/taiga-family/taiga-ui/issues/8946 since we will be updating tooltips to the spec that we require and you can always provide your own appearance using TUI_HINT_OPTIONS. For example add 'my-dark' as appearance and then add this to global styles:

[tuiTheme='dark'] [data-appearance='my-dark'] {
    color: var(--tui-text-primary);
    background: var(--tui-background-elevation-3);
}