Anki in Dark Mode shows text highlighted in white, and some of the code is in white letters.

[trevorrobertsjr]

Problem description

Please describe the issue concisely in here. In case of an error: Walk us through the steps you took to get there. What happened? What did you expect to happen?

When using the plugin for Go code with Anki in Dark Mode, the formatted code had a white background and some of the text was white. I had to change to Light Mode

Checklist

Please replace the space inside the brackets with an x if the following items apply:

• [ X] I've restarted Anki to see if it helps
• [ X] I've verified that I use the latest version of the add-on by redownloading it from AnkiWeb
• [ X] I've verified that I use the latest version of Anki by checking at https://apps.ankiweb.net#download
• [ X] I've tried to disable other add-ons to see if there are any interactions present
• [ X] My issue disappears when I hold shift while starting Anki.
• [ X] I've checked if anyone else reported this problem before by looking through the issue reports. I also checked to see if there is a section about known issues in the add-on description, documentation, or README.

Information about your Anki set-up

Please fill out the section corresponding with your Anki version: 23.12.1

If you are using Anki 2.1

Please open Anki, go to Help → About, click on "Copy Debug Info", and paste the result between the backticks below (if the button does not appear you are using an older version of Anki 2.1 and will need to update first):

Anki 23.12.1 (1a1d4d54)  
Python 3.9.15 Qt 6.5.3 PyQt 6.5.3
Platform: macOS-14.2.1-arm64-arm-64bit

If you are using Anki 2.0

Please open Anki, go to Help → About, find the two lines starting with Version: and Qt, and copy-paste them between the backticks below:

Please fill in details about your operating system (Windows/macOS/Linux, which version):

• OS: macOS
• version: 14.2.1

Please open Anki, go to Tools → Add-ons, take a screenshot of your installed add-ons, and paste it below:

Error message (if any)

If you've received an error message, please copy and paste it between the backticks below:

[eljamm]

@trevorrobertsjr

What style do you currently have? You can check it by going to: Tools > Add-ons > Syntax Highlighting NG > config

My guess is that this extensions hard-codes the colors into the HTML, so if the code is generated for a light style, it will stay that way even if you switch Anki to dark mode.

To test this, you can change the code style to a dark version, like "monokai" or "github-dark", and try to generate a new code block.

PS: You need to reload Anki after changing the style, else the extensions will continue to use the old one until the next time you restart.

[cav71]

Mmm yes, it is harcoded and generated when the highlighted code is inserted. I'm not familiar with the environemnt, maybe there's a css I can leverage.

[eljamm]

The old plugin had the option in the GUI to make the highlighting change dynamically from a css file:

I found that this behavior is still switchable in the python code:

https://github.com/cav71/syntax-highlighting-ng/blob/82e96fb02d6bb5a29c4a7eb409fa7ddc8bba0240/src/syntax_highlighting_ng/config.py#L34

The easiest workaround would be to manually change it by going to Tools > Add-ons > Syntax Highlighting NG > View Files > config.py:

default_conf = {
    "linenos": True,  # show numbers by default
    "centerfragments": False,  # Use <center> when generating code fragments
+   "cssclasses": True,  # Use css classes instead of colors directly in html
-   "cssclasses": False,  # Use css classes instead of colors directly in html
    "defaultlangperdeck": True,  # Default to last used language per deck
    "deckdefaultlang": {},  # Map to store the default language per deck
    "lang": "Python",
}  # default language is Python

Then, you have two choices:

• Either you add the css directly to your card type style, as is described in the docs
• Or you add @import url(_styles_for_syntax_highlighting.css); inside your card type style and then you create a css file inside of your media folder: collection.media/_styles_for_syntax_highlighting.css, which contains the css highlighting.

However, I think the most ideal solution would be to either add an option to toggle it directly in the config, or to restore the old config GUI.

[cav71]

Hi, the menu should still there:

Do you think it should be set to True by default?

[eljamm]

Oh, that's cool. I didn't know that. In my opinion, it should stay off by default. Less advanced users expect the plugin to work out of the gate, without changing files and card types. However, we should also make it easier for both beginners and advanced users if they wish to change it.

That's why I think it would be better if we add a brief section about how to configure and use the plugin. All of this information already exists in the documentation, so we just have to add it to the plugin page.

[Edamijueda]

I face this same issue. Following the conversation here, I was able to set style to either "monokai" or "github-dark". But other styles like: Pastie, colorful, etc did not work. Thanks guys.