Suggestion: Make night mode toggleable in the card type editor

Anki Suggestions
1

As the title says. Would make designing for both modes a bit more straightforward.

2

That would be nice. I don’t know if that involves much change in to code. Just to rephrase you point little bit: the idea of having a button in card template editor to toogle the preview windows to a nightmode preview, so not changing the whole Anki IU.

That woud prevent restariing Anki each time for the sole purpose of changing the nightmode on and off in order too see the styling. That scenario would be more useful for the users who do review almost exclusively on mobile versions with nightmode on rather than in the desktop. Just my thought.

1 Like
3

Thanks for the suggestion, I’ll look into it.

4

Come to think of it, maybe likewise make the .mobile class toggleable, though that would need an added warning how other factors (different rendering engines, resolution, apps’ own CSS, …) may cause unexpected differences.

5

a built-in solution sounds useful.

 

the reddit user /u/yumenogotoshi has posted an add-on (that’s not on ankiweb) that toggles the nightmode in webviews based on a tag, see

source code available at: https://gist.github.com/hikaru-y/737e60d5ff58a124ffe7e2a78a385831

in response to a reddit questions of mine here.

in the reviewer you can toggle and reload the webview with my updated version of Tag Toggler (Fork for 2.1)

3 Likes
6

am i not able to access this or it’s just disabled?

Annotation 2020-06-20 194732
Annotation 2020-06-20 1947321920×1080 106 KB

7

I can access it. I guess it depends on the region and you are in a" US sanctioned region". Here is the code:

from typing import Optional, Any
import anki
import aqt

TARGET_TAG = 'disable_night_mode'
TMP_NORMAL_CLASS = 'tmp_normal_mode'
night_mode_classes = "'nightMode', 'night_mode'"
ADD_NM = f'document.body.classList.add({night_mode_classes});'
REMOVE_NM = f'document.body.classList.remove({night_mode_classes});'
ON_SHOWN = '''
<script>
    onShownHook.push(() => {{
        {operation}
    }});
</script>
'''


def get_normal_mode_window_color():
    ''' Based on: aqt.webview.AnkiWebView._getWindowColor() '''
    qcolor: aqt.qt.QColor
    if anki.utils.isMac:
        # standard palette does not return correct window color on macOS
        qcolor = aqt.qt.QColor('#ececec')
    else:
        qcolor = aqt.mw.web.style().standardPalette().color(
            aqt.qt.QPalette.Window)
    return qcolor.name()


EDITOR_TMP_NORMAL_MODE_STYLE = f'''
.{TMP_NORMAL_CLASS},
.{TMP_NORMAL_CLASS} body,
.{TMP_NORMAL_CLASS} #topbutsOuter {{
    background-color: {get_normal_mode_window_color()};
}}
'''


def toggle_editor_night_mode(tags_text, editor):
    js: str
    if TARGET_TAG in tags_text.split():
        js = REMOVE_NM
        js += f'document.documentElement.classList.add("{TMP_NORMAL_CLASS}");'
    else:
        js = ADD_NM
        js += f'document.documentElement.classList.remove("{TMP_NORMAL_CLASS}");'

    editor.web.eval(js)


def on_editor_did_init(editor: aqt.editor.Editor):
    editor.tags.textChanged.connect(
        lambda text: toggle_editor_night_mode(text, editor))


def on_webview_will_set_content(
        web_content: aqt.webview.WebContent, context: Optional[Any]):
    if isinstance(context, aqt.editor.Editor):
        web_content.head += f'<style>{EDITOR_TMP_NORMAL_MODE_STYLE}</style>'


def on_card_will_show(text: str, card: anki.cards.Card, kind: str):
    js_to_append: str
    if TARGET_TAG in card.note().tags:
        js_to_append = ON_SHOWN.format(operation=REMOVE_NM)
    else:
        js_to_append = ON_SHOWN.format(operation=ADD_NM)

    return text + js_to_append


if aqt.mw.pm.night_mode():
    aqt.gui_hooks.editor_did_init.append(on_editor_did_init)
    aqt.gui_hooks.webview_will_set_content.append(on_webview_will_set_content)
    aqt.gui_hooks.card_will_show.append(on_card_will_show)
2 Likes
8

Added to