question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@text-color-inverse should be dark in the dark mode theme

See original GitHub issue
  • [x ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently the @text-color-inverse is mapped to be white in the dark mode style file (see below):

https://github.com/ant-design/ant-design/blob/1c8a88b2d7631129d0c6707e85fd451dd50b9a3e/components/style/themes/dark.less#L169

In the dark mode, the inverse should be black and not white.


In other words, currently @text-color-inverse is mapped to be white in both default and dark mode styles, which is incorrect. Below is the default style where it is also mapped as white: https://github.com/ant-design/ant-design/blob/1c8a88b2d7631129d0c6707e85fd451dd50b9a3e/components/style/themes/default.less#L55

What does the proposed API look like?

Please correct the dark mode style file to have @text-color-inverse map to black correctly

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
KrishnaPGcommented, Mar 1, 2021

Thank you @jaylonez

@text-color-inverse: @white - @text-color; would work to map it to the opposite of @text-color.

Would this equation @white - @text-color work correctly for both dark style and light styles ? It seems it does, but want to confirm.

In the light style, @text-color-inverse is correctly defined as white, so it seems the intention is to have it to be opposite of @text-color. Hence semantically it would not seem appropriate to leave it as @text-color-inverse: @white in the dark style when creating a new variable.

Did a quick search in the code where the inverse is being used, and these are some of the additional buggy scenarios (not sure if they are related to text-inverse directly, though, but needs fixing in general):

image

image

image

image

0reactions
KrishnaPGcommented, Mar 2, 2021

Understood. Thank you @zombieJ

Read more comments on GitHub >

github_iconTop Results From Across the Web

Browse in Dark mode or Dark theme - Google Chrome Help
When you browse in Dark mode or Dark theme in Chrome, your homepage, toolbar, settings, and some other pages will be dark. Android...
Read more >
Quick and Easy Dark Mode with CSS Custom Properties
On a Mac they are located under System Preferences > General > Appearance. Next steps. Right now, users of the website will get...
Read more >
Dark theme - Android Developers
Dark theme is available in Android 10 (API level 29) and higher. It has many benefits: Can reduce power usage by a significant...
Read more >
Use Dark Mode on your Mac - Apple Support
These Apple apps have special Dark Mode settings or features: Mail can use a light background for email messages while Dark Mode is...
Read more >
Dark Mode in Outlook - Microsoft Support
In Outlook for Microsoft 365, the black color theme includes dark mode, which provides a black background (instead of white) for the message...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found