Colour of tags unreadable

[Gueazy]

macOS Mojave Anki 2.1.8

List of add-ons :

Thx

[magoedde]

I have the same issue when Night Mode is the only enabled Add-On.

On Anki 2.1.8 and Mac OS Mojave 10.14.2.

Thanks

[krassowski]

Thank you for the details. So it seems that it happens specifically on Mac OS. I guess there might have been a Mac-specific change in Anki 2.1.8 - I will look into that.

It might help if you could provide your Qt version from "Help → About".

[magoedde]

Version 2.1.8 (71e0c880) Qt 5.12.0 PyQt 5.11.3

[Z1839]

I also have the same issue

[fem57]

I also have the same issue.

[keeprock]

Same thing. Sierra 10.12.6

Version 2.1.9 (ae67c976) Qt 5.12.1 PyQt 5.11.3

I guess there might have been a Mac-specific change in Anki 2.1.8 - I will look into that. Looking forward to. Thanks!

[fem57]

My friend uses windows and he has the same issue.

Here is my Qt 5.12.0 PyQt 5.11.3 Mojave Version 2.1.8 (71e0c880)

[Gueazy]

It's the same in 2.1.9 :

Version 2.1.9 (ae67c976) Qt 5.12.1 PyQt 5.11.3

[krassowski]

Thank you all for reporting the details - this is really helpful. I will try to investigate the issue this weekend.

In the meantime, may I suggest you a workaround by manually overwriting text color of the tags entry box or by forcing black background color. It may or may not work, but please try and let me know of the result - it would help pinpointing the culprit:

use menu bar: Tools → Add-ons → select Night Mode → click on "View Files", find stylers.py file and replace color value in completer (default #eee) with black OR replace background-color:black; with background-color:black!important;. Look for these lines:

https://github.com/krassowski/Anki-Night-Mode/blob/c7bdbf6bd0790de32c00c2d46c0922a734d191ae/night_mode/stylers.py#L680-L685

Remember to restart Anki to see the results! Please, remember to let me know if the workaround (and which one) works for you.

Thank you again, and apologies for the delay - this was a busy month for me.

[Z1839]

The work around helped. Thanks!

[krassowski]

@Z1839 I am glad that it helped. Which one did you use (color or background-color)?

[magoedde]

The background color change did not work, but changing the color of the text to black did work, though it does not keep with the rest of the dark theme. This is what I changed and how it looks:

[Z1839]

I used color. However, I have the same issue in the browser when trying to add tags. The text can't be seen.

[Gueazy]

For the text its ok but all the tag on top (when we use a tag already used) do not appear (sorry for my english i'm french !)

[Z1839]

Any idea on how to fix the tag text in the browser when I click “add tags”

[keeprock]

I have two Mac systems available to me. Yesterday, I've noticed that on my Macbook with El Capitan, tags are just fine (I will reply later with more details about config).

At the same time, Sierra messing it all up on a desktop.

If that can help you in any way. Thanks for provided work-around!

[keeprock]

Alright, I figure this out. Got same problems @Gueazy experienced and fixed them. @krassowski

MAKE A BACKUP BEFORE EDITING.

You need to edit stylers.py.

First, look for this:

editor.tags.completer.popup().setStyleSheet(self.completer)

And change it to this:

editor.tags.completer.popup().setStyleSheet(self.popup)

Later in a code, add new definition - popup. Right after completer. All color properties are already set properly. No need to worry about it.

    @css
    def completer(self):
        return """
            background-color:black !important;
            border-color:#444;
            color:black;
        """

    @css
    def popup(self):
        return """
            background-color:black;
            border-color:#444;
            color:#eee;
        """

Reload Anki and take a look:

Before: After:

Profit! 💰💰💰 Sit back and enjoy your SRS 🏖

[Z1839]

Thank you. Will this fix the issue in the browser “add tags” menu?

[Z1839]

Hey man, i'm confused on the second step. You say to add - popup after completer, but then show a bunch of code after without explaining what it's for. Do i need to add this code too?

[keeprock]

@Z1839

Do i need to add this code too?

Of course you do! Add everything starting from @css def popup(self) till the end. It should look like in my code. We are supplying this sucker editor.tags.completer.popup().setStyleSheet(self.popup) with a new function called popup. You'd better have it on, in order to make it all work.

This code is showing you WHERE to put def popup(self). Right after def completer

@css
    def completer(self):
        return """
            background-color:black !important;
            border-color:#444;
            color:black;
        """

    @css
    def popup(self):
        return """
            background-color:black;
            border-color:#444;
            color:#eee;
        """

What in a hell def popup do? Well, if you take a closer look at two functions def completer and def popup, you may notice they basically kinda look like twin brothers. Almost the same. Except, that color and background-color properties are different.

Why do we even need that? Those functions are CSS styles definitions. What they do is that they apply some styling with CSS to certain elements of Anki UI.

editor.tags.completer.popup().setStyleSheet(self.completer) was before. This line tell compiler to color tags in autocomplete tags POPUP in certain color.

We change it to editor.tags.completer.popup().setStyleSheet(self.popup) because, as it turns out, we need separate styling for POPUP if you want to have NORMAL color on both tags input and POPUP.

Basically, all my code is doing:

• Creating new function with CSS styling definition
• Applying that styling to autocompete tag popup
• That's it

Hope it helps.

[keeprock]

Thank you. Will this fix the issue in the browser “add tags” menu?

Idk. I was not concern with fixing that. You may try to do it yourself - I've showed you a way.

[Z1839]

Thank you. I want to make sure I got it right because things show up a bit different for me. I have:

@css def completer(self): return """ background-color:black; border-color:#444; color:#black; """

that I changed to: @css def popup(self): return """ background-color:black; border-color:#444; color:#black; """

[Z1839]

Also, I'm still having an issue with my tags in the browser: https://imgur.com/y6OQNGQ

[keeprock]

Thank you. I want to make sure I got it right because things show up a bit different for me. I have:

@css def completer(self): return """ background-color:black; border-color:#444; color:#black; """

that I changed to: @css def popup(self): return """ background-color:black; border-color:#444; color:#black; """

You welcome!

Almost right, buddy. Just look at my file for reference - stylers.py.zip

You should have BOTH def completer and def popup in your code.

@css def completer(self): return """ background-color:black !important; border-color:#444; color:black; """ AND @css def popup(self): return """ background-color:black; border-color:#444; color:#eee; """

[keeprock]

Also, I'm still having an issue with my tags in the browser: https://imgur.com/y6OQNGQ

I don't have any issues, so I can't help you with that. It's a maintainer job to do that.

[Frankwang03]

perfect. thanks makeagreatdish. :) i followed your instructions and the first time it didn't work for me, but i replaced your "background-color:black;" with "background-color:black !important;" in the popup(self) and then it worked. haha have a nice day.

[krassowski]

Hi there! I was digging through the changeset of Anki trying to find out the potential culprit. This commit stands out: https://github.com/dae/anki/commit/0769bf7ac923aa566436fba9c3492246797ea31b; it mentiones a QT bug and uses a workaround which sets the background color of a QT widget to #eee (the same as the color we have for text in tag completer).

Another, recent change also mentiones a MacOS bug and hardcodes background to #eee as well https://github.com/dae/anki/commit/ac53a0852ecebeec48c5d6eb6132f2a7f2aeaa01, but it appears too recent (you were reporting the bug since 2.1.8 and this commit appears to be 2.1.10).

As I cannot afford to get a Mac now*, would you be able to test if the following changes fix the issue?

Old code:

    @css
    def completer(self):
        return """
            background-color:black;
            border-color:#444;
            color:#eee;
        """

    @css
    def qt_mid_buttons(self):
        return f"""
        QLineEdit
        {{
            {self.completer}
        }}
        """

New code (please replace the lines above with these below; spaces matter!):

    @css
    def completer(self):
        return """
            background-color:black!important;
            border-color:#444;
            color:#eee;
        """

    @css
    def qt_mid_buttons(self):
        return f"""
        QLineEdit, QCompleter, QTreeWidget
        {{
            {self.completer}
        }}
        """

If this does not work, I would be willing to disable the styling of the tag box for MacOS (with a result similar to the changes sugested by @makeagreatdish).

*Fun fact: Mac users generate most the bug reports in each of my open source, non-for profit repositories. I wonder if it is because the system has more bugs, the users are more active or because it is relatively less popular among developers, thus we do not know the quirks of it. Likely all of the three.

[krassowski]

Also, does any of you remember if 2.1.7 worked for you?

[Frankwang03]

Version 2.1.11 (3cf770c7) Qt 5.12.1 PyQt 5.11.3

@krassowski nope. didn't work. i just switched over from 2.0, so not sure about 2.1.7. haha, it does sound annoying to troubleshoot a thing you don't have. you're right... the reason is probably all three.

[teedoff087]

I have been able to work around this bug by force enabling window-level Dark Mode for Anki on my Mac OS 10.14.5 Mojave system. First I quit Anki, then I paste this command in Terminal:

defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no

When Anki is restarted, the entire app including title bar have Dark Mode enabled and the tags box no longer displays a white background.

This obviously won't work on non-Mojave (or later) systems that don't have native OS level dark mode enabled. I have not yet encountered any bugs doing this. It overall just looks better.

[keirwilliams-old]

@teedoff087 This completely fixes the issue! Maybe this needs to be a changed in Anki itself to support the system dark mode? @krassowski, maybe you could let @dae know?

[krassowski]

I am happy that this solves the problem! I will include this in the README file and on the add-on page to inform other Mac OS users. @keirwilliams I do not have means to test any potential changes to Anki in this respect, but I will be happy to review and merge pull-requests if the changes were to be included in the add-ons code.

[Z1839]

Thank you! This fixed my issue with the browser. However, in the card editor my tag entry background is still all black, so i'm getting black on black text. Could this be from the changes I made to the code in the addon, as recommended above?

[teedoff087]

Yes, it could be. I didn't make any changes to the add-on source code on my installation.

[keirwilliams-old]

@krassowski I should note this does seem to mess with the styling of some UI elements if you disable Night Mode. It's kind of an all in for dark mode solution. Might be worth adding a comment about this to the note you added in https://github.com/krassowski/Anki-Night-Mode/commit/66ec1b95009068650bc7c4cff28bfb16092eb44c.

[M1r22]

@krassowski Hey! I use nightmode on Catalina OS and on the add card window everything was still white so I ran this line: defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no sadly now I have this and I found no way to revert the changes. If I uninstall the addon I still have parts of anki in black. Any chance you can help me out? Regardless, thank you so much for your contribution. Cheers

edit: I'm on the lastest uptdate: === 2.3.1 - January 17, 2020

[teedoff087]

@krassowski Hey! I use nightmode on Catalina OS and on the add card window everything was still white so I ran this line: defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no sadly now I have this and I found no way to revert the changes. If I uninstall the addon I still have parts of anki in black. Any chance you can help me out? Regardless, thank you so much for your contribution. Cheers

edit: I'm on the lastest uptdate: === 2.3.1 - January 17, 2020

Close Anki and run this command: defaults delete net.ankiweb.dtop NSRequiresAquaSystemAppearance

This will remove that preference key. When you relaunch Anki, the behavior should revert to how it was before you entered the original Terminal command.

[M1r22]

@krassowski Hey! I use nightmode on Catalina OS and on the add card window everything was still white so I ran this line: defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no sadly now I have this and I found no way to revert the changes. If I uninstall the addon I still have parts of anki in black. Any chance you can help me out? Regardless, thank you so much for your contribution. Cheers edit: I'm on the lastest uptdate: === 2.3.1 - January 17, 2020

Close Anki and run this command: defaults delete net.ankiweb.dtop NSRequiresAquaSystemAppearance

This will remove that preference key. When you relaunch Anki, the behavior should revert to how it was before you entered the original Terminal command.

It worked! Thank you for your reply. Any idea how to fix the add cards window that behaves like night mode is disabled? I checked on "choose what to style" and and the "Add Cards" is rightly enabled.

[teedoff087]

@krassowski Hey! I use nightmode on Catalina OS and on the add card window everything was still white so I ran this line: defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no sadly now I have this and I found no way to revert the changes. If I uninstall the addon I still have parts of anki in black. Any chance you can help me out? Regardless, thank you so much for your contribution. Cheers edit: I'm on the lastest uptdate: === 2.3.1 - January 17, 2020

Close Anki and run this command: defaults delete net.ankiweb.dtop NSRequiresAquaSystemAppearance This will remove that preference key. When you relaunch Anki, the behavior should revert to how it was before you entered the original Terminal command.

It worked! Thank you for your reply. Any idea how to fix the add cards window that behaves like night mode is disabled? I checked on "choose what to style" and and the "Add Cards" is rightly enabled.

I don't have a solution for that. I've learned to deal with it. I think it looks better like that than it does for the main window to be dark mode and the add window solid white. My guess is an add-on (perhaps a few together) are causing the add window fields to behave like that. It happens on my system too. I tried disabling Frozen Fields and a few others and I couldn't resolve it. Let me know if you discover if an add-on is causing the problem and we can put in an issue with the add-on developer.

[M1r22]

@krassowski Hey! I use nightmode on Catalina OS and on the add card window everything was still white so I ran this line: defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance -bool no sadly now I have this and I found no way to revert the changes. If I uninstall the addon I still have parts of anki in black. Any chance you can help me out? Regardless, thank you so much for your contribution. Cheers edit: I'm on the lastest uptdate: === 2.3.1 - January 17, 2020

Close Anki and run this command: defaults delete net.ankiweb.dtop NSRequiresAquaSystemAppearance This will remove that preference key. When you relaunch Anki, the behavior should revert to how it was before you entered the original Terminal command.

It worked! Thank you for your reply. Any idea how to fix the add cards window that behaves like night mode is disabled? I checked on "choose what to style" and and the "Add Cards" is rightly enabled.

I don't have a solution for that. I've learned to deal with it. I think it looks better like that than it does for the main window to be dark mode and the add window solid white. My guess is an add-on (perhaps a few together) are causing the add window fields to behave like that. It happens on my system too. I tried disabling Frozen Fields and a few others and I couldn't resolve it. Let me know if you discover if an add-on is causing the problem and we can put in an issue with the add-on developer.

Sounds good, I'll look into it. I'll keep you posted if I find anything. Cheers mate

edit: I disabled every addon except night mode but no luck

[Kosezu]

I know this works (defaults write net.ankiweb.dtop NSRequiresAquaSystemAppearance false ) for regular Anki.

What can I type into terminal to get it working with the Alternate Anki install?