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 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,20 @@
return quill.getText();
}
function SetLightEditor()
{
function SetLightEditor(){
DarkReader.disable();
}
function SetDarkEditor()
{
function SetDarkEditor(){
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';
// }

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>
<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">
<script src="https://app.reader/darkreader.js"></script>
<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">
<script src="https://app.reader/darkreader.js"></script>
<script>
function RenderHTML(htmlString) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.innerHTML = htmlString;
}
<script>
function RenderHTML(htmlString) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.innerHTML = htmlString;
}
function ChangeFontFamily(fontFamily) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontFamily = fontFamily;
}
function ChangeFontFamily(fontFamily) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontFamily = fontFamily;
}
function ChangeFontSize(size) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontSize = size;
}
function ChangeFontSize(size) {
var containerDiv = document.getElementById("readerDiv");
containerDiv.style.fontSize = size;
}
function ChangePrefferedTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
}
</script>
function SetLightEditor() {
document.documentElement.setAttribute('data-theme', 'light');
DarkReader.disable();
}
<link rel="stylesheet" href="https://app.reader/reader.css" />
function SetDarkEditor() {
document.documentElement.setAttribute('data-theme', 'dark');
DarkReader.enable();
}
</script>
<div id="readerDiv">
</div>
</body>
<link rel="stylesheet" href="https://app.reader/reader.css" />
<div id="readerDiv">
</div>
<link rel="stylesheet" href="https://app.reader/global.css" />
</body>
</html>

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

@@ -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;
@@ -57,6 +56,7 @@ namespace Wino.Views
InitializeComponent();
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)
@@ -261,11 +261,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();");
}
}

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

@@ -42,7 +42,7 @@ namespace Wino.Views
InitializeComponent();
Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation");
NavigationCacheMode = NavigationCacheMode.Enabled;
}
@@ -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();");
}
}

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

@@ -31,6 +31,7 @@ namespace Wino.Views.Settings
this.InitializeComponent();
// Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "00FFFFFF");
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation");
}
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="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" />