From d96df469a4d15779c020d9c9b07b42a35b9ecc9e Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Thu, 2 May 2024 20:38:00 +0200
Subject: [PATCH] Fixed scrollbars in a dark theme to be accessible

---
 Wino.Mail/JS/Quill/full.html              | 21 ++++++++++-----------
 Wino.Mail/JS/Quill/global.css             |  4 ++++
 Wino.Mail/JS/Quill/reader.html            | 11 +++++++++--
 Wino.Mail/Views/ComposePage.xaml.cs       |  9 +++++----
 Wino.Mail/Views/MailRenderingPage.xaml.cs |  6 ++----
 Wino.Mail/Wino.Mail.csproj                |  1 +
 6 files changed, 31 insertions(+), 21 deletions(-)
 create mode 100644 Wino.Mail/JS/Quill/global.css
diff --git a/Wino.Mail/JS/Quill/full.html b/Wino.Mail/JS/Quill/full.html
index 7aa371b9..e1c7db72 100644
--- a/Wino.Mail/JS/Quill/full.html
+++ b/Wino.Mail/JS/Quill/full.html
@@ -5,14 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="language" content="english">
     <meta name="viewport" content="width=device-width">
-
     <link rel="stylesheet" href="https://app.example/katex.min.css" />
-
     <link rel="stylesheet" href="https://app.example/monokai-sublime.min.css" />
-
     <link rel="stylesheet" href="https://app.example/quill.snow.css" />
+    <link rel="stylesheet" href="https://app.example/global.css" />
 
-    <style>
+     <style>
         body >
         /* #standalone-container {
             margin: 50px auto;
@@ -30,6 +28,7 @@
     </style>
 </head>
 <body>
+    <meta name="color-scheme" content="dark light">
     <div id="standalone-container">
         <!-- remove display none to enable toolbar -->
         <div id="toolbar-container" style="display: none;">
@@ -242,22 +241,22 @@
             return quill.getText();
         }
 
-        function SetLightEditor()
-        {
+        function SetLightEditor(){
+            document.documentElement.setAttribute('data-theme', 'light');
             DarkReader.disable();
         }
 
-        function SetDarkEditor()
-        {
+        function SetDarkEditor(){
+            document.documentElement.setAttribute('data-theme', 'dark');
             DarkReader.enable();
         }
 
-        // function ShowToolbar() {
-        //     document.getElementById('editor-container').style.display = 'block';
+                // function ShowToolbar() {
+                //     document.getElementById('editor-container').style.display = 'block';
         //     quill.focus();
         // }
 
-        // function HideToolbar() {
+                // function HideToolbar() {
         //     document.getElementById('editor-container').style.display = 'none';
         // }
 
diff --git a/Wino.Mail/JS/Quill/global.css b/Wino.Mail/JS/Quill/global.css
new file mode 100644
index 00000000..c20569f5
--- /dev/null
+++ b/Wino.Mail/JS/Quill/global.css
@@ -0,0 +1,4 @@
+* {
+    scrollbar-color: auto !important;
+    scrollbar-width: thin !important;
+}
diff --git a/Wino.Mail/JS/Quill/reader.html b/Wino.Mail/JS/Quill/reader.html
index 30adca81..cd7e6f79 100644
--- a/Wino.Mail/JS/Quill/reader.html
+++ b/Wino.Mail/JS/Quill/reader.html
@@ -19,12 +19,19 @@
                 containerDiv.style.fontSize = size;
             }
 
-            function ChangePrefferedTheme(theme) {
-                document.documentElement.setAttribute('data-theme', theme);
+            function SetLightEditor() {
+                document.documentElement.setAttribute('data-theme', 'light');
+                DarkReader.disable();
+            }
+
+            function SetDarkEditor() {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                DarkReader.enable();
             }
         </script>
 
         <link rel="stylesheet" href="https://app.reader/reader.css" />
+        <link rel="stylesheet" href="https://app.reader/global.css" />
 
         <div id="readerDiv">
         </div>
diff --git a/Wino.Mail/Views/ComposePage.xaml.cs b/Wino.Mail/Views/ComposePage.xaml.cs
index 84cffd23..1591cbec 100644
--- a/Wino.Mail/Views/ComposePage.xaml.cs
+++ b/Wino.Mail/Views/ComposePage.xaml.cs
@@ -1,7 +1,6 @@
 ﻿using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
-using System.Diagnostics;
 using System.Linq;
 using System.Reactive.Linq;
 using System.Threading;
@@ -21,9 +20,9 @@ using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Media.Animation;
 using Windows.UI.Xaml.Navigation;
-using Wino.Core.Domain.Interfaces;
 using Wino.Core.Domain.Entities;
 using Wino.Core.Domain.Enums;
+using Wino.Core.Domain.Interfaces;
 using Wino.Core.Messages.Mails;
 using Wino.Core.Messages.Shell;
 using Wino.Extensions;
@@ -261,11 +260,13 @@ namespace Wino.Views
 
             if (IsComposerDarkMode)
             {
-                await InvokeScriptSafeAsync("DarkReader.enable();");
+                Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Dark;
+                await InvokeScriptSafeAsync("SetDarkEditor();");
             }
             else
             {
-                await InvokeScriptSafeAsync("DarkReader.disable();");
+                Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Light;
+                await InvokeScriptSafeAsync("SetLightEditor();");
             }
         }
 
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml.cs b/Wino.Mail/Views/MailRenderingPage.xaml.cs
index 8d16e1d6..3cde6c20 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml.cs
+++ b/Wino.Mail/Views/MailRenderingPage.xaml.cs
@@ -233,15 +233,13 @@ namespace Wino.Views
             {
                 Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Dark;
 
-                await InvokeScriptSafeAsync("ChangePrefferedTheme('dark')");
-                await InvokeScriptSafeAsync("DarkReader.enable();");
+                await InvokeScriptSafeAsync("SetDarkEditor();");
             }
             else
             {
                 Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Light;
 
-                await InvokeScriptSafeAsync("ChangePrefferedTheme('light')");
-                await InvokeScriptSafeAsync("DarkReader.disable();");
+                await InvokeScriptSafeAsync("SetLightEditor();");
             }
         }
 
diff --git a/Wino.Mail/Wino.Mail.csproj b/Wino.Mail/Wino.Mail.csproj
index 0a174eba..9a3dd94c 100644
--- a/Wino.Mail/Wino.Mail.csproj
+++ b/Wino.Mail/Wino.Mail.csproj
@@ -755,6 +755,7 @@
     <Content Include="BackgroundImages\Snowflake.jpg" />
     <Content Include="JS\Quill\darkreader.js" />
     <Content Include="JS\Quill\full.html" />
+    <Content Include="JS\Quill\global.css" />
     <Content Include="JS\Quill\highlight.min.js" />
     <Content Include="JS\Quill\image-resize.min.js" />
     <Content Include="JS\Quill\katex.min.css" />
