How to fix Dictionary look up text color in Dark mode?
After searching the Internet and experimenting I was able to produce a solution. You have to create a DefaultStyle.css
file and put it in Contents
subdirectory for each dictionary you want to fix. The dictionaries are located at ~/Library/Dictionaries
or at /System/Library/Assets/com_apple_MobileAsset_DictionaryServices_dictionaryOSX/
folders. You can easily open them in Finder by pressing Cmd+Shift+G and pasting the folder path. Here's the DefaultStyle.css
contents:
@charset "UTF-8";
@namespace d url(http://www.apple.com/DTDs/DictionaryService-1.0.rng);
@media (prefers-dark-interface)
{
html {
-apple-color-filter: apple-invert-lightness();
}
a {
-apple-color-filter: none;
color: -webkit-link;
}
img {
filter: invert(100%);
}
html.apple_client-panel body div {
color: text;
}
html.apple_client-panel body div.L1 {
color: -apple-system-label;
}
}
It uses @media (prefers-dark-interface)
selector to apply this CSS only in dark mode. The html.apple_client-panel
is the selector for a popup window that appears when you use the Define/Look Up feature. After applying the fix the Dictionary looks good and is readable again: