Night Mode decides unstyled text color leading to poor contrast.

[nrmiller]

Problem description

It would appear that this add-on isn't compatible with Night Mode. The Night Mode add-on is deciding the text color for unstyled text. Since Syntax-Highlighting creates a background HTML element and gives it a white color, the net result is that unstyled text (which is made white by Night Mode) has little contrast over the background element.

As I see it, it looks like there may be two viable solutions:

1. The HTML should be styled according to dark/light mode (I'm not sure if HTML can be changed dynamically when toggling Night Mode).
2. The unstyled text should be given a color style of black so that it's color is not dictated by the Nigh Mode add-on, allowing it to retain good contrast.

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
• [ ] I've tried to disable other add-ons to see if there are any interactions present
• [ ] 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.

Anki 2.1.15 (442df9d6) Python 3.6.7 Qt 5.12.1 PyQt 5.11.3
Platform: Mac 10.14.3
Flags: frz=True ao=True sv=1

Add-ons:

Color Confirmation
Syntax Highlighting for Code
Night Mode
Zoom 21
Progress Bar
Mini Format Pack
True Retention by Card Maturity
Review Heatmap

• OS:macOS Mojave
• version: 10.14.3

[nrmiller]

Adding image to demonstrate the issue. The above image was styled by using the editor options. The below image is how it renders naturally. Night Mode was enabled. I've highlighted the text so that the text color can be seen in both cases.

[ijgnd]

I'm just a happy user of this add-on.

You could try to style with CSS as described under "Use CSS classes" on https://ankiweb.net/shared/info/1463041493. The css that is linked from this description works well for me in night mode (i.e. dark background and bright fonts for the code).

Setting up CSS is not that easy. So I think the current default settings are good.

[ijgnd]

maybe also relevant: https://github.com/glutanimate/syntax-highlighting/issues/8

[fugohan]

I can’t get style with CSS working. Can somebody help me?

_{Sent with GitHawk}

[ijgnd]

@fugohan : It's hard to help (virtually impossible?) unless you say if you have performed the steps from the add-on description. You could also show screenshots etc. to make sure you didn't inadvertently make some mistake.

You could also have a look at my fork at https://ankiweb.net/shared/info/1972239816 which should be easier to setup with css.

[fugohan]

@ijgnd Thank you for your answer. Now I have fixed my problem and want to write my solution. I wanted to use the night mode addon to learn my anki cards. But if you look at my next picture you can see that the line numbering has a grey background and white text color.

My next picture shows all addons I have installed.

I have tried to use CSS classes and to changes this settings in any way I could. But after I uninstalled this addon and reinstalled it, it worked with this settings.

To use CSS I have copied a theme that I downloaded from here to the style section of the card.

What I have realized is that my card in the editor looks so.

But if I learn my cards it looks the way I expect.

Hope I could help somebody and sorry for my bad english

[ijgnd]

@fugohan : That's a great guide. Thanks for sharing. It's not highlighted in the editor because you still miss Customize Editor Stylesheet. Then you would have to create a cssfile in your media folder that also contains the css styles.

[fugohan]

@ijgnd thank you for this info. Maybe I will try this method.

[jackwilkinson255]

Heres most of the darcula theme from pycharm if anyone is interested:

.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #629755; font-style: italic } /* Comment */
.highlight .err {color: #FF0000 } /* Error */
.highlight .k { color: #CC7832} /* Keyword */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #CC7832 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .o { color: #A9B7C6 } /* Operator */
.highlight .cm { color: #629755; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #629755 } /* Comment.Preproc */
.highlight .c1 { color: #808080} /* Comment.Single */
.highlight .cs { color: #629755; font-style: italic } /* Comment.Special */
.highlight .gh { color: #A9B7C6; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #A9B7C6} /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .nb { color: #8888C6 } /* Name.Builtin */
.highlight .nc { color: #A9B7C6} /* Name.Class */
.highlight .nd { color: #BBB529 } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .nf { color: #FFC66D } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .m { color: #6897BB } /* Literal.Number */
.highlight .mf { color: #6897BB } /* Literal.Number.Float */
.highlight .mh { color: #6897BB } /* Literal.Number.Hex */
.highlight .mi { color: #6897BB } /* Literal.Number.Integer */
.highlight .mo { color: #6897BB } /* Literal.Number.Oct */
.highlight .w { color: #A9B7C6 } /* Text.Whitespace */
.highlight .s { color: #629755 } /* Literal.String */
.highlight .sb { color: #A9B7C6 } /* Literal.String.Backtick */
.highlight .sc { color: #A9B7C6 } /* Literal.String.Char */
.highlight .sd { color: #629755; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #6A8759 } /* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #A9B7C6 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #94558D } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #6A8759 } /* Literal.String.Single */
.highlight .ss { color: #6A8759 } /* Literal.String.Symbol */
.highlight .bp { color: #94558D } /* Name.Builtin.Pseudo */
.highlight .il { color: #6897BB } /* Literal.Number.Integer.Long */