From e8b795ba69842f63c117a29e10921d379b923dd6 Mon Sep 17 00:00:00 2001
From: Hikaru Y <47855854+hikaru-y@users.noreply.github.com>
Date: Sun, 5 Dec 2021 07:20:42 +0900
Subject: [PATCH] Fix custom CSS not being applied to scrollbars in night mode
 (#1525)

---
 qt/aqt/data/web/css/webview.scss   | 2 +-
 sass/base.scss                     | 2 +-
 sass/scrollbar.scss                | 6 +++---
 ts/components/ButtonToolbar.svelte | 6 ------
 ts/editable/editable-base.scss     | 8 ++++----
 ts/editor/RichTextInput.svelte     | 1 +
 6 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/qt/aqt/data/web/css/webview.scss b/qt/aqt/data/web/css/webview.scss
index d6b85081c..ee0f9cd4b 100644
--- a/qt/aqt/data/web/css/webview.scss
+++ b/qt/aqt/data/web/css/webview.scss
@@ -33,6 +33,6 @@ h1 {
     margin-bottom: 0.2em;
 }
 
-.nightMode {
+.night-mode {
     @include scrollbar.night-mode;
 }
diff --git a/sass/base.scss b/sass/base.scss
index e6de55a92..372e88712 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -41,7 +41,7 @@ body {
     overscroll-behavior: none;
 }
 
-.nightMode {
+.night-mode {
     @include scrollbar.night-mode;
 }
 
diff --git a/sass/scrollbar.scss b/sass/scrollbar.scss
index 6b7c0ac26..e448be308 100644
--- a/sass/scrollbar.scss
+++ b/sass/scrollbar.scss
@@ -5,7 +5,7 @@
 @use "fusion-vars";
 
 @mixin night-mode {
-    &::-webkit-scrollbar {
+    ::-webkit-scrollbar {
         background-color: var(--window-bg);
 
         &:horizontal {
@@ -17,7 +17,7 @@
         }
     }
 
-    &::-webkit-scrollbar-thumb {
+    ::-webkit-scrollbar-thumb {
         background: fusion-vars.$button-hover-bg;
         border-radius: 8px;
 
@@ -30,7 +30,7 @@
         }
     }
 
-    &::-webkit-scrollbar-corner {
+    ::-webkit-scrollbar-corner {
         background-color: var(--window-bg);
     }
 }
diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index b6b29b78e..ce0ffec27 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -110,12 +110,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use "sass/scrollbar";
-
-    .nightMode {
-        @include scrollbar.night-mode;
-    }
-
     .button-toolbar {
         flex-wrap: var(--buttons-wrap);
         padding-left: 0.15rem;
diff --git a/ts/editable/editable-base.scss b/ts/editable/editable-base.scss
index b47d0cfb7..ac31a51ea 100644
--- a/ts/editable/editable-base.scss
+++ b/ts/editable/editable-base.scss
@@ -2,10 +2,6 @@
 
 * {
     max-width: 100%;
-
-    :host(.nightMode) & {
-        @include scrollbar.night-mode;
-    }
 }
 
 p {
@@ -21,3 +17,7 @@ p {
 [hidden] {
     display: none;
 }
+
+:host(.night-mode) {
+    @include scrollbar.night-mode;
+}
diff --git a/ts/editor/RichTextInput.svelte b/ts/editor/RichTextInput.svelte
index b183c0b3a..75e001e8c 100644
--- a/ts/editor/RichTextInput.svelte
+++ b/ts/editor/RichTextInput.svelte
@@ -245,6 +245,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 >
     <div
         class:hidden
+        class:night-mode={$pageTheme.isDark}
         use:attachShadow
         use:attachStyles
         use:attachContentEditable={{ stylesDidLoad }}