Night mode status in Card

[krmanik]

Pull Request template

Purpose / Description

While developing card we may need to know AnkiDroid night mode status so we can switch css class property according to night mode status.

Fixes

Fixes Link to the issues.

Approach

Return the value isInNightMode()

How Has This Been Tested?

Tested on emulator

1. Add to front/back side of card

var isNightMode = AnkiDroidJS.ankiIsInNightMode();
console.log(isNightMode);

Learning (optional, can help others)

Checklist

Please, go through these checks before submitting the PR.

• [ x ] You have not changed whitespace unnecessarily (it makes diffs hard to read)
• [ x ] You have a descriptive commit message with a short title (first line, max 50 chars).
• [ x ] Your code follows the style of the project (e.g. never omit braces in if statements)
• [ x ] You have commented your code, particularly in hard-to-understand areas
• [ x ] You have performed a self-review of your own code

[krmanik]

[mikehardy]

LGTM @infinyte7

[david-allison]

LGTM

[Arthur-Milchior]

LGTM

I would have expected javascript to look whether the css class nightMode or night_mode is set in the card content. Because that is a property JS can easily access, that exists in anki (and I assume in IOS since I can't imagine DAE's adding something in anki and not in IOS)
But I've certainly got no objection here

[mikehardy]

True - as I hit the approve button myself I also thought "can Javascript inspect the CSS classess? I think it can" which would make any consumers of this API more cross platform as we already have the CSS in sync between desktop and AnkiDroid, but likewise I have no problem with this, in general I think exposing any of the AbstractFlashcardViewer state to the WebView is fine, so javascript authors are on a level playing field with regard to constructing a viewing experience

[krmanik]

I have found one solution that may not need this.
In style.css

.card {
  --text-color1: black;
}

.card.night_mode {
  --text-color1: white;
}

.title {
   color: var(--text-color1);
}

Now turning on night mode automatically change the text color. But in my anki deck xiehanzi, the stroke color, outline color should be updated in JavaScript. So following are steps for that.

.card {
--stroke-color: #555;
}

.card.night_mode {
--stroke-color: #fff;
}

.stroke {
   color: var(--stroke-color);
}

Now in JavaScript (Front/Back side of card)

 <!-- include this as empty -->

<div class = "stroke"></div>

<script>

var stroke_color = getComputedStyle(document.querySelector(".stroke")).color;

console.log(stroke_color);

</script>

Above may be work on AnkiDesktop and AnkiMobile also.