Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mat-slide-toggle using incorrect text color in dark-theme #18701

Closed
hfournier opened this issue Mar 4, 2020 · 3 comments
Closed

mat-slide-toggle using incorrect text color in dark-theme #18701

hfournier opened this issue Mar 4, 2020 · 3 comments
Assignees
Labels
area: material/slide-toggle P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@hfournier
Copy link

Reproduction

Steps to reproduce:

  1. Add mat-slide-toggle to menu in dark-theme
<mat-menu #userMenu="matMenu">
  <button mat-menu-item (click)="logout()">Logout</button>
  <mat-slide-toggle
     [(ngModel)]="darktheme"
     (change)="changeTheme($event)">Dark Theme
  </mat-slide-toggle>
</mat-menu>

Expected Behavior

What behavior were you expecting to see?
Expect mat-slide-toggle text to be white in dark-theme

Actual Behavior

What behavior did you actually see?
mat-slide-toggle text is black in dark-theme

image

Environment

  • Angular: 9.0.4
  • CDK/Material: 9.0.1
  • Browser(s): Firefox, Edge (chromium)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows
@crisbeto crisbeto self-assigned this Mar 6, 2020
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Mar 6, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 6, 2020
… with a dark theme

The slide toggle doesn't define its text color, but inherits it from the closest theme root element. The problem is that if the element is moved out to something like an overlay, the color may be inherited from the `body` which won't be correct. These changes explicitly set the `color`.

Fixes angular#18701.
mmalerba pushed a commit that referenced this issue Apr 7, 2020
… with a dark theme

The slide toggle doesn't define its text color, but inherits it from the closest theme root element. The problem is that if the element is moved out to something like an overlay, the color may be inherited from the `body` which won't be correct. These changes explicitly set the `color`.

Fixes #18701.
@SvenBudak
Copy link

Looks also totally strange in my app after update:
image

it is not using dark- theme anymore. dialog etc are working correct with dark mode. but not mat-menu also <a> tags are not working anymore in mat-menu. (last entry is a tag with mat-menu-item attribute)

@amysorto
Copy link
Contributor

amysorto commented Nov 4, 2022

When I tested this using the MDC based slide-toggle and menu components which are coming soon in v15, the text color is correct

@amysorto amysorto closed this as completed Nov 4, 2022
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 5, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/slide-toggle P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
6 participants
@crisbeto @SvenBudak @amysorto @hfournier @andrewseguin and others