This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
Colors for DtButtons with visited links are overridden with default colors in dark mode #1202
Labels
bug
A broken behaviour that was working previously
Bug Report
Expected Behavior
In dark mode, e.g. as in a
dt-context-dialog
, the dark theme should be applied to all buttons, no matter if it is a<a dt-button variant="...">
or a<button dt-button variant="...">
and no matter the link state.Current Behavior
When the link is set using
routerLink
, this is working as expected. But when usinghref
instead, the colors are overridden by default colors when the link is a visited link.Possible Solution
The reason seems to be the "visited"-state of the link provided in the
href
-attribute. Make sure this does not override styles set by a certain theme, e.g. dark theme in my case.Steps to Reproduce
href
-attribute, e.g.<a dt-button href="google.com">
, in a dark-mode-contextStackblitz example
Context (Environment)
I encountered this when using buttons in a
dt-context-dialog
that where created in a parent component and used in the dialog's content usingng-content
like shown in the Stackblitz example. I had already visited the link (no external link but one configured for Angular Routing within the app but added to the buttons using a custom directive which changes thehref
-attribute using theRenderer2
).The buttons where always displayed with default colors and I tried to explicitly set
dtTheme:":dark"
which did not work. Removing thehref
-attribute and values such asasdf
"fixed" the coloring. @ffriedl89 found out that the problem actually occurred when the link was a visited link.Used Versions:
Attachments
This screenshot (taken from the Stackblitz example) shows the problem: With
routerLink
both, the secondary as well as the primary button have the expected colors. Withhref
the colors go back to default. The problem seems not occur withbutton
-elements.The text was updated successfully, but these errors were encountered: