How to fix Dictionary look up text color in Dark mode

colorcssdark modedictionarylook-up

In macOS Mojave dark mode, the Dictionary app became unusable because of coloring issues: in application itself some of the text is white on white, and in definition popup that appears if you right click a word and select Look Up (or use force touch or three-finger press) the text is black on a dark grey background:

screenshot of the problem

How can it be fixed?

Best Answer

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:

screenshot of the fixed problem

Related Question