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

Fixed scrollbars in a dark theme to be accessible

Browse Source
This commit is contained in:
Aleh Khantsevich
2024-05-02 20:38:00 +02:00
parent 9982ba2fec
commit d96df469a4
6 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
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,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';
// }

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

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

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

@@ -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>

9
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;
@@ -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();");
}
}

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

@@ -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/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" />