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

Forms and dialogs not adapting to dark mode #129

Open
gabbsmo opened this issue Apr 19, 2024 · 0 comments
Open

Forms and dialogs not adapting to dark mode #129

gabbsmo opened this issue Apr 19, 2024 · 0 comments

Comments

@gabbsmo
Copy link

gabbsmo commented Apr 19, 2024

Describe the bug
Some styles are not adapting in a good way when enabling the Teams Dark theme.

To Reproduce
Test in Pattern Lab:

  • Text input
  • Radio buttons
  • Checkboxes
  • Dialogs/Sidebars
  • Searchbox

Expected behavior
Look and feel should be more similar to the dark theme in New Teams. Though I realize it cannot match 100% until htwoo moves to Fluent 2.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Edge
  • Version: 123

Additional context
Added the following CSS to my project which was a huge improvement

.hoo-input-text,
.hoo-input-search .hoo-icon,
.hoo-dlg,
.hoo-checkbox + label:before,
.hoo-radio:checked + label:before, .hoo-radio:not(:checked) + label:before {
    background: var(--bodyBackground);
    color: var(--bodyText);
}

.hoo-input-search .hoo-icon {
    fill: var(--bodyText);
}

.hoo-input-text::placeholder {
    color: var(--neutralSecondary);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant