Merge pull request #1251 from hikaru-y/fix-toggle-night-mode

Fix toggle night mode in clayout

qt/aqt/clayout.py

@@ -344,6 +344,10 @@ class CardLayout(QDialog):
 
     def on_night_mode_action_toggled(self) -> None:
         self.night_mode_is_enabled = not self.night_mode_is_enabled
+        force = json.dumps(self.night_mode_is_enabled)
+        self.preview_web.eval(
+            f"document.documentElement.classList.toggle('night-mode', {force});"
+        )
         self.on_preview_toggled()
 
     def on_mobile_class_action_toggled(self) -> None:

qt/aqt/data/web/css/reviewer.scss

@@ -8,6 +8,7 @@ hr {
 body {
     margin: 20px;
     overflow-wrap: break-word;
+    background-color: var(--window-bg);
 }
 
 // explicit nightMode definition required

qt/aqt/theme.py

@@ -35,6 +35,7 @@ class ThemeManager:
     _icon_cache_dark: Dict[str, QIcon] = {}
     _icon_size = 128
     _dark_mode_available: Optional[bool] = None
+    default_palette: Optional[QPalette] = None
 
     # Qt applies a gradient to the buttons in dark mode
     # from about #505050 to #606060.
@@ -133,6 +134,7 @@ class ThemeManager:
         return QColor(self.color(colors))
 
     def apply_style(self, app: QApplication) -> None:
+        self.default_palette = app.style().standardPalette()
         self._apply_palette(app)
         self._apply_style(app)
 

qt/aqt/webview.py

@@ -215,7 +215,10 @@ class AnkiWebView(QWebEngineView):
         QWebEngineView.__init__(self, parent=parent)
         self.set_title(title)
         self._page = AnkiWebPage(self._onBridgeCmd)
-        self._page.setBackgroundColor(self._getWindowColor())  # reduce flicker
+        # reduce flicker
+        self._page.setBackgroundColor(
+            self.get_window_bg_color(theme_manager.night_mode)
+        )
 
         # in new code, use .set_bridge_command() instead of setting this directly
         self.onBridgeCmd: Callable[[str], Any] = self.defaultOnBridgeCmd
@@ -388,16 +391,17 @@ class AnkiWebView(QWebEngineView):
         else:
             return 3
 
-    def _getWindowColor(self) -> QColor:
-        if theme_manager.night_mode:
-            return theme_manager.qcolor(colors.WINDOW_BG)
-        if isMac:
+    def get_window_bg_color(self, night_mode: bool) -> QColor:
+        if night_mode:
+            return QColor(colors.WINDOW_BG[1])
+        elif isMac:
             # standard palette does not return correct window color on macOS
             return QColor("#ececec")
-        return self.style().standardPalette().color(QPalette.Window)
+        else:
+            return theme_manager.default_palette.color(QPalette.Window)
 
     def standard_css(self) -> str:
-        palette = self.style().standardPalette()
+        palette = theme_manager.default_palette
         color_hl = palette.color(QPalette.Highlight).name()
 
         if isWin:
@@ -437,7 +441,10 @@ div[contenteditable="true"]:focus {
             }
 
         zoom = self.zoomFactor()
-        background = self._getWindowColor().name()
+
+        window_bg_day = self.get_window_bg_color(False).name()
+        window_bg_night = self.get_window_bg_color(True).name()
+        body_bg = window_bg_night if theme_manager.night_mode else window_bg_day
 
         if is_rtl(anki.lang.currentLang):
             lang_dir = "rtl"
@@ -445,11 +452,11 @@ div[contenteditable="true"]:focus {
             lang_dir = "ltr"
 
         return f"""
-body {{ zoom: {zoom}; background: {background}; direction: {lang_dir}; }}
+body {{ zoom: {zoom}; background-color: {body_bg}; direction: {lang_dir}; }}
 html {{ {font} }}
 {button_style}
-:root {{ --window-bg: {background} }}
-:root[class*=night-mode] {{ --window-bg: {background} }}
+:root {{ --window-bg: {window_bg_day} }}
+:root[class*=night-mode] {{ --window-bg: {window_bg_night} }}
 """
 
     def stdHtml(