javier/Wino-Mail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #177 from Tiktack/fix-dark-scrollbar-webview

Browse Source 
Fixed scrollbars in a dark theme to be accessible
This commit is contained in:
Burak Kaan Köse
2024-05-03 16:55:05 +02:00
committed by GitHub
parent 8edbe1aa2c 668b385a10
commit bed8d71f7e
7 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Wino.Mail/JS/Quill/full.html
View File

@@ -5,14 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="language" content="english"> <meta name="language" content="english">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://app.example/katex.min.css" /> <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/monokai-sublime.min.css" />
<link rel="stylesheet" href="https://app.example/quill.snow.css" /> <link rel="stylesheet" href="https://app.example/quill.snow.css" />
<link rel="stylesheet" href="https://app.example/global.css" />
<style> <style>
body > body >
/* #standalone-container { /* #standalone-container {
margin: 50px auto; margin: 50px auto;
@@ -30,6 +28,7 @@
</style> </style>
</head> </head>
<body> <body>
<meta name="color-scheme" content="dark light">
<div id="standalone-container"> <div id="standalone-container">
<!-- remove display none to enable toolbar --> <!-- remove display none to enable toolbar -->
<div id="toolbar-container" style="display: none;"> <div id="toolbar-container" style="display: none;">
@@ -242,22 +241,20 @@
return quill.getText(); return quill.getText();
} }
function SetLightEditor() function SetLightEditor(){
{
DarkReader.disable(); DarkReader.disable();
} }
function SetDarkEditor() function SetDarkEditor(){
{
DarkReader.enable(); DarkReader.enable();
} }
// function ShowToolbar() { // function ShowToolbar() {
// document.getElementById('editor-container').style.display = 'block'; // document.getElementById('editor-container').style.display = 'block';
// quill.focus(); // quill.focus();
// } // }
// function HideToolbar() { // function HideToolbar() {
// document.getElementById('editor-container').style.display = 'none'; // document.getElementById('editor-container').style.display = 'none';
// } // }

4
Wino.Mail/JS/Quill/global.css Normal file
View File

@@ -0,0 +1,4 @@
* {
scrollbar-color: auto !important;
scrollbar-width: thin !important;
}

54
Wino.Mail/JS/Quill/reader.html
View File

@@ -1,32 +1,38 @@
<html> <html>
<body style="padding-left:12px; padding-right:12px; padding-top:8px; padding-bottom: 8px; margin: 0px; border-radius: 8px;"> <body style="padding-left:12px; padding-right:12px; padding-top:8px; padding-bottom: 8px; margin: 0px; border-radius: 8px;">
<meta name="color-scheme" content="dark light"> <meta name="color-scheme" content="dark light">
<script src="https://app.reader/darkreader.js"></script> <script src="https://app.reader/darkreader.js"></script>
<script> <script>
function RenderHTML(htmlString) { function RenderHTML(htmlString) {
var containerDiv = document.getElementById("readerDiv"); var containerDiv = document.getElementById("readerDiv");
containerDiv.innerHTML = htmlString; containerDiv.innerHTML = htmlString;
} }
function ChangeFontFamily(fontFamily) { function ChangeFontFamily(fontFamily) {
var containerDiv = document.getElementById("readerDiv"); var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontFamily = fontFamily; containerDiv.style.fontFamily = fontFamily;
} }
function ChangeFontSize(size) { function ChangeFontSize(size) {
var containerDiv = document.getElementById("readerDiv"); var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontSize = size; containerDiv.style.fontSize = size;
} }
function ChangePrefferedTheme(theme) { function SetLightEditor() {
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', 'light');
} DarkReader.disable();
</script> }
<link rel="stylesheet" href="https://app.reader/reader.css" /> function SetDarkEditor() {
document.documentElement.setAttribute('data-theme', 'dark');
DarkReader.enable();
}
</script>
<div id="readerDiv"> <link rel="stylesheet" href="https://app.reader/reader.css" />
</div> <div id="readerDiv">
</body> </div>
<link rel="stylesheet" href="https://app.reader/global.css" />
</body>
</html> </html>

10
Wino.Mail/Views/ComposePage.xaml.cs
View File

@@ -1,7 +1,6 @@
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Collections.ObjectModel; using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq; using System.Linq;
using System.Reactive.Linq; using System.Reactive.Linq;
using System.Threading; using System.Threading;
@@ -21,9 +20,9 @@ using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation; using Windows.UI.Xaml.Navigation;
using Wino.Core.Domain.Interfaces;
using Wino.Core.Domain.Entities; using Wino.Core.Domain.Entities;
using Wino.Core.Domain.Enums; using Wino.Core.Domain.Enums;
using Wino.Core.Domain.Interfaces;
using Wino.Core.Messages.Mails; using Wino.Core.Messages.Mails;
using Wino.Core.Messages.Shell; using Wino.Core.Messages.Shell;
using Wino.Extensions; using Wino.Extensions;
@@ -57,6 +56,7 @@ namespace Wino.Views
InitializeComponent(); InitializeComponent();
Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF"); Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation");
} }
private static async void OnIsComposerDarkModeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args) private static async void OnIsComposerDarkModeChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
@@ -261,11 +261,13 @@ namespace Wino.Views
if (IsComposerDarkMode) if (IsComposerDarkMode)
{ {
await InvokeScriptSafeAsync("DarkReader.enable();"); Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Dark;
await InvokeScriptSafeAsync("SetDarkEditor();");
} }
else else
{ {
await InvokeScriptSafeAsync("DarkReader.disable();"); Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Light;
await InvokeScriptSafeAsync("SetLightEditor();");
} }
} }

8
Wino.Mail/Views/MailRenderingPage.xaml.cs
View File

@@ -42,7 +42,7 @@ namespace Wino.Views
InitializeComponent(); InitializeComponent();
Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF"); Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation");
NavigationCacheMode = NavigationCacheMode.Enabled; NavigationCacheMode = NavigationCacheMode.Enabled;
} }
@@ -233,15 +233,13 @@ namespace Wino.Views
{ {
Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Dark; Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Dark;
await InvokeScriptSafeAsync("ChangePrefferedTheme('dark')"); await InvokeScriptSafeAsync("SetDarkEditor();");
await InvokeScriptSafeAsync("DarkReader.enable();");
} }
else else
{ {
Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Light; Chromium.CoreWebView2.Profile.PreferredColorScheme = CoreWebView2PreferredColorScheme.Light;
await InvokeScriptSafeAsync("ChangePrefferedTheme('light')"); await InvokeScriptSafeAsync("SetLightEditor();");
await InvokeScriptSafeAsync("DarkReader.disable();");
} }
} }

1
Wino.Mail/Views/Settings/SignatureManagementPage.xaml.cs
View File

@@ -31,6 +31,7 @@ namespace Wino.Views.Settings
this.InitializeComponent(); this.InitializeComponent();
// Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF"); // Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation");
} }
protected override void OnNavigatedFrom(NavigationEventArgs e) protected override void OnNavigatedFrom(NavigationEventArgs e)

1
Wino.Mail/Wino.Mail.csproj
View File

@@ -755,6 +755,7 @@
<Content Include="BackgroundImages\Snowflake.jpg" /> <Content Include="BackgroundImages\Snowflake.jpg" />
<Content Include="JS\Quill\darkreader.js" /> <Content Include="JS\Quill\darkreader.js" />
<Content Include="JS\Quill\full.html" /> <Content Include="JS\Quill\full.html" />
<Content Include="JS\Quill\global.css" />
<Content Include="JS\Quill\highlight.min.js" /> <Content Include="JS\Quill\highlight.min.js" />
<Content Include="JS\Quill\image-resize.min.js" /> <Content Include="JS\Quill\image-resize.min.js" />
<Content Include="JS\Quill\katex.min.css" /> <Content Include="JS\Quill\katex.min.css" />