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

Fix toggle night mode in clayout
This commit is contained in:
Damien Elmes 2021-06-25 08:22:56 +10:00 committed by GitHub
commit 99375fd117
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 11 deletions

View file

@ -344,6 +344,10 @@ class CardLayout(QDialog):
def on_night_mode_action_toggled(self) -> None: def on_night_mode_action_toggled(self) -> None:
self.night_mode_is_enabled = not self.night_mode_is_enabled 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() self.on_preview_toggled()
def on_mobile_class_action_toggled(self) -> None: def on_mobile_class_action_toggled(self) -> None:

View file

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

View file

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

View file

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