Open nrmiller opened 4 years ago
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.
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.
maybe also relevant: https://github.com/glutanimate/syntax-highlighting/issues/8
I can’t get style with CSS working. Can somebody help me?
Sent with GitHawk
@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.
@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
@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.
@ijgnd thank you for this info. Maybe I will try this method.
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 */
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:
Checklist
Please replace the space inside the brackets with an x if the following items apply: