Add theme toggle support to all WebView2-based image panels

Co-authored-by: emako <24737061+emako@users.noreply.github.com>

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/Lottie/LottieImagePanel.cs

@@ -35,6 +35,10 @@ public class LottieImagePanel : SvgImagePanel
         ObjectForScripting ??= new ScriptHandler(path);
 
         _homePage = _resources["/lottie2html.html"];
+        
+        // Update WebView2 background color based on current theme
+        UpdateWebViewBackgroundColor();
+        
         NavigateToUri(new Uri("file://quicklook/"));
     }
 

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/Svg/SvgImagePanel.cs

@@ -18,6 +18,7 @@
 using Microsoft.Web.WebView2.Core;
 using Microsoft.Web.WebView2.Wpf;
 using QuickLook.Common.Helpers;
+using QuickLook.Common.Plugin;
 using QuickLook.Plugin.HtmlViewer;
 using System;
 using System.Collections.Generic;
@@ -29,17 +30,36 @@ using System.Reflection;
 using System.Runtime.InteropServices;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
 
 namespace QuickLook.Plugin.ImageViewer.Webview.Svg;
 
-public class SvgImagePanel : WebpagePanel, IWebImagePanel
+public partial class SvgImagePanel : UserControl, IWebImagePanel
 {
     protected const string _resourcePrefix = "QuickLook.Plugin.ImageViewer.Resources.";
     protected internal static readonly Dictionary<string, byte[]> _resources = [];
     protected byte[] _homePage;
+    protected WebView2 _webView;
+    protected Uri _currentUri;
+    protected string _primaryPath;
+    protected string _fallbackPath;
+    private ContextObject _contextObject;
 
     private object _objectForScripting;
 
+    public string FallbackPath
+    {
+        get => _fallbackPath;
+        set => _fallbackPath = value;
+    }
+
+    public ContextObject ContextObject
+    {
+        get => _contextObject;
+        set => _contextObject = value;
+    }
+
     public object ObjectForScripting
     {
         get => _objectForScripting;
@@ -60,7 +80,21 @@ public class SvgImagePanel : WebpagePanel, IWebImagePanel
         InitializeResources();
     }
 
-    protected override void InitializeComponent()
+    public SvgImagePanel()
+    {
+        InitializeComponent();
+
+        // Clear merged dictionaries from design time
+        Resources.MergedDictionaries.Clear();
+
+        // Initialize WebView2
+        InitializeWebView();
+
+        // Wire up the theme toggle button
+        buttonBackgroundColour.Click += OnBackgroundColourOnClick;
+    }
+
+    protected void InitializeWebView()
     {
         _webView = new WebView2()
         {
@@ -71,7 +105,53 @@ public class SvgImagePanel : WebpagePanel, IWebImagePanel
             DefaultBackgroundColor = Color.Transparent,
         };
         _webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;
-        Content = _webView;
+        
+        // Add WebView2 to the Grid at the first position (behind the button)
+        var grid = (Grid)Content;
+        grid.Children.Insert(0, _webView);
+    }
+
+    private void OnBackgroundColourOnClick(object sender, RoutedEventArgs e)
+    {
+        if (ContextObject == null) return;
+
+        // Toggle the theme
+        var newTheme = ContextObject.Theme == Themes.Dark ? Themes.Light : Themes.Dark;
+        ContextObject.Theme = newTheme;
+
+        // Save the theme preference
+        SettingHelper.Set("LastTheme", (int)newTheme, "QuickLook.Plugin.ImageViewer");
+
+        // Update WebView2 background color
+        UpdateWebViewBackgroundColor();
+    }
+
+    protected void UpdateWebViewBackgroundColor()
+    {
+        if (_webView == null) return;
+
+        var isDark = ContextObject?.Theme == Themes.Dark;
+        _webView.DefaultBackgroundColor = isDark 
+            ? Color.FromArgb(255, 32, 32, 32) 
+            : Color.White;
+    }
+
+    public void NavigateToUri(Uri uri)
+    {
+        if (_webView == null)
+            return;
+
+        _webView.Source = uri;
+        _currentUri = _webView.Source;
+    }
+
+    protected virtual void WebView_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
+    {
+        if (e.IsSuccess)
+        {
+            _webView.CoreWebView2.AddWebResourceRequestedFilter("*", CoreWebView2WebResourceContext.All);
+            _webView.CoreWebView2.WebResourceRequested += WebView_WebResourceRequested;
+        }
     }
 
     protected static void InitializeResources()
@@ -102,10 +182,14 @@ public class SvgImagePanel : WebpagePanel, IWebImagePanel
         ObjectForScripting ??= new ScriptHandler(path);
 
         _homePage = _resources["/svg2html.html"];
+        
+        // Update WebView2 background color based on current theme
+        UpdateWebViewBackgroundColor();
+        
         NavigateToUri(new Uri("file://quicklook/"));
     }
 
-    protected override void WebView_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args)
+    protected virtual void WebView_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args)
     {
         Debug.WriteLine($"[{args.Request.Method}] {args.Request.Uri}");
 
@@ -186,7 +270,13 @@ public class SvgImagePanel : WebpagePanel, IWebImagePanel
         return reader.ReadToEnd();
     }
 
-    public new static class MimeTypes
+    public void Dispose()
+    {
+        _webView?.Dispose();
+        _webView = null;
+    }
+
+    public static class MimeTypes
     {
         public static string GetContentTypeHeader(string extension = null)
             => $"Content-Type: {WebpagePanel.MimeTypes.GetMimeType(extension)}";

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/Svg/SvgImagePanel.xaml

@@ -0,0 +1,32 @@
+<UserControl x:Class="QuickLook.Plugin.ImageViewer.Webview.Svg.SvgImagePanel"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             x:Name="svgImagePanel"
+             d:DesignHeight="300"
+             d:DesignWidth="300"
+             mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--  only for design  -->
+                <ResourceDictionary Source="/QuickLook.Common;component/Styles/MainWindowStyles.xaml" />
+                <ResourceDictionary Source="/QuickLook.Common;component/Styles/MainWindowStyles.Dark.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid>
+        <!-- WebView2 will be added here programmatically -->
+        <StackPanel Margin="0,8,8,0"
+                    HorizontalAlignment="Right"
+                    VerticalAlignment="Top"
+                    Orientation="Horizontal">
+            <Button x:Name="buttonBackgroundColour"
+                    Width="24"
+                    Height="24"
+                    Content="&#xEF1F;"
+                    Style="{StaticResource CaptionButtonStyle}" />
+        </StackPanel>
+    </Grid>
+</UserControl>

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/Svga/SvgaImagePanel.cs

@@ -34,6 +34,10 @@ public class SvgaImagePanel(IWebMetaProvider metaWeb) : SvgImagePanel()
         ObjectForScripting ??= new ScriptHandler(path, _metaWeb);
 
         _homePage = _resources["/svga2html.html"];
+        
+        // Update WebView2 background color based on current theme
+        UpdateWebViewBackgroundColor();
+        
         NavigateToUri(new Uri("file://quicklook/"));
     }
 }

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/Tgs/TgsImagePanel.cs

@@ -35,6 +35,10 @@ public class TgsImagePanel : SvgImagePanel
         ObjectForScripting ??= new TgsScriptHandler(path);
 
         _homePage = _resources["/lottie2html.html"];
+        
+        // Update WebView2 background color based on current theme
+        UpdateWebViewBackgroundColor();
+        
         NavigateToUri(new Uri("file://quicklook/"));
     }
 

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Webview/WebHandler.cs

@@ -102,10 +102,10 @@ internal static class WebHandler
 
             ipWeb = ext switch
             {
-                ".svg" => new SvgImagePanel(),
-                ".svga" => new SvgaImagePanel(metaWeb),
-                ".lottie" or ".json" => new LottieImagePanel(),
-                ".tgs" => new TgsImagePanel(),
+                ".svg" => new SvgImagePanel() { ContextObject = context },
+                ".svga" => new SvgaImagePanel(metaWeb) { ContextObject = context },
+                ".lottie" or ".json" => new LottieImagePanel() { ContextObject = context },
+                ".tgs" => new TgsImagePanel() { ContextObject = context },
                 _ => throw new NotSupportedException($"Unsupported file type: {ext}")
             };
 

QuickLook.Plugin/QuickLook.Plugin.TextViewer/Syntax/Dark/Svelte.xshd

@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<SyntaxDefinition name="Svelte" extensions=".svelte" xmlns="http://icsharpcode.net/sharpdevelop/syntaxdefinition/2008">
-	<Color name="Comment" foreground="#6A9955" />
-	<Color name="Tag" foreground="#569CD6" exampleText="div" />
-	<Color name="Attribute" foreground="#9CDCFE" exampleText="on:click" />
-	<Color name="String" foreground="#CE9178" exampleText="&quot;text&quot;" />
-	<Color name="Directive" foreground="#DCDCAA" exampleText="bind:" />
-	<Color name="Keyword" foreground="#C586C0" exampleText="import" />
-	<Color name="Script" foreground="#D4D4D4" />
-	<Color name="Style" foreground="#4EC9B0" />
-
-	<RuleSet name="Html">
-		<Span color="Comment" begin="&lt;!--" end="--&gt;" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-
-		<!-- Tags -->
-		<Span color="Tag" begin="&lt;" end="&gt;">
-			<RuleSet>
-				<Keywords color="Tag">
-					<Word>script</Word>
-					<Word>style</Word>
-					<Word>div</Word>
-					<Word>span</Word>
-					<Word>input</Word>
-					<Word>button</Word>
-					<Word>section</Word>
-					<Word>article</Word>
-					<Word>header</Word>
-					<Word>footer</Word>
-					<Word>main</Word>
-					<Word>nav</Word>
-					<Word>aside</Word>
-					<Word>p</Word>
-					<Word>h1</Word>
-					<Word>h2</Word>
-					<Word>h3</Word>
-					<Word>ul</Word>
-					<Word>li</Word>
-					<Word>a</Word>
-					<Word>img</Word>
-				</Keywords>
-				<Keywords color="Directive">
-					<Word>bind:</Word>
-					<Word>on:</Word>
-					<Word>use:</Word>
-					<Word>transition:</Word>
-					<Word>in:</Word>
-					<Word>out:</Word>
-					<Word>animate:</Word>
-					<Word>class:</Word>
-					<Word>style:</Word>
-				</Keywords>
-				<Keywords color="Attribute">
-					<Word>export</Word>
-					<Word>let</Word>
-					<Word>const</Word>
-				</Keywords>
-			</RuleSet>
-		</Span>
-	</RuleSet>
-
-	<RuleSet name="JavaScript">
-		<Span color="Comment" begin="//" end="\n" />
-		<Span color="Comment" begin="/\*" end="\*/" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-		<Keywords color="Keyword">
-			<Word>import</Word>
-			<Word>export</Word>
-			<Word>default</Word>
-			<Word>return</Word>
-			<Word>const</Word>
-			<Word>let</Word>
-			<Word>var</Word>
-			<Word>if</Word>
-			<Word>else</Word>
-			<Word>for</Word>
-			<Word>while</Word>
-			<Word>function</Word>
-			<Word>async</Word>
-			<Word>await</Word>
-			<Word>new</Word>
-			<Word>this</Word>
-			<Word>true</Word>
-			<Word>false</Word>
-			<Word>null</Word>
-			<Word>undefined</Word>
-			<Word>each</Word>
-			<Word>if</Word>
-			<Word>else</Word>
-			<Word>await</Word>
-			<Word>then</Word>
-			<Word>catch</Word>
-		</Keywords>
-	</RuleSet>
-
-	<RuleSet name="CSS">
-		<Span color="Comment" begin="/\*" end="\*/" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-	</RuleSet>
-
-	<RuleSet name="MainRuleSet">
-		<Import ruleSet="Html" />
-		<Import ruleSet="JavaScript" />
-		<Import ruleSet="CSS" />
-	</RuleSet>
-
-	<RuleSet>
-		<Import ruleSet="MainRuleSet" />
-	</RuleSet>
-</SyntaxDefinition>

QuickLook.Plugin/QuickLook.Plugin.TextViewer/Syntax/Light/Svelte.xshd

@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<SyntaxDefinition name="Svelte" extensions=".svelte" xmlns="http://icsharpcode.net/sharpdevelop/syntaxdefinition/2008">
-	<Color name="Comment" foreground="#008000" />
-	<Color name="Tag" foreground="#800000" exampleText="div" />
-	<Color name="Attribute" foreground="#0000FF" exampleText="on:click" />
-	<Color name="String" foreground="#A31515" exampleText="&quot;text&quot;" />
-	<Color name="Directive" foreground="#B000B0" exampleText="bind:" />
-	<Color name="Keyword" foreground="#000080" exampleText="import" />
-	<Color name="Script" foreground="#333333" />
-	<Color name="Style" foreground="#0055A5" />
-
-	<RuleSet name="Html">
-		<Span color="Comment" begin="&lt;!--" end="--&gt;" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-
-		<!-- Tags -->
-		<Span color="Tag" begin="&lt;" end="&gt;">
-			<RuleSet>
-				<Keywords color="Tag">
-					<Word>script</Word>
-					<Word>style</Word>
-					<Word>div</Word>
-					<Word>span</Word>
-					<Word>input</Word>
-					<Word>button</Word>
-					<Word>section</Word>
-					<Word>article</Word>
-					<Word>header</Word>
-					<Word>footer</Word>
-					<Word>main</Word>
-					<Word>nav</Word>
-					<Word>aside</Word>
-					<Word>p</Word>
-					<Word>h1</Word>
-					<Word>h2</Word>
-					<Word>h3</Word>
-					<Word>ul</Word>
-					<Word>li</Word>
-					<Word>a</Word>
-					<Word>img</Word>
-				</Keywords>
-				<Keywords color="Directive">
-					<Word>bind:</Word>
-					<Word>on:</Word>
-					<Word>use:</Word>
-					<Word>transition:</Word>
-					<Word>in:</Word>
-					<Word>out:</Word>
-					<Word>animate:</Word>
-					<Word>class:</Word>
-					<Word>style:</Word>
-				</Keywords>
-				<Keywords color="Attribute">
-					<Word>export</Word>
-					<Word>let</Word>
-					<Word>const</Word>
-				</Keywords>
-			</RuleSet>
-		</Span>
-	</RuleSet>
-
-	<RuleSet name="JavaScript">
-		<Span color="Comment" begin="//" end="\n" />
-		<Span color="Comment" begin="/\*" end="\*/" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-		<Keywords color="Keyword">
-			<Word>import</Word>
-			<Word>export</Word>
-			<Word>default</Word>
-			<Word>return</Word>
-			<Word>const</Word>
-			<Word>let</Word>
-			<Word>var</Word>
-			<Word>if</Word>
-			<Word>else</Word>
-			<Word>for</Word>
-			<Word>while</Word>
-			<Word>function</Word>
-			<Word>async</Word>
-			<Word>await</Word>
-			<Word>new</Word>
-			<Word>this</Word>
-			<Word>true</Word>
-			<Word>false</Word>
-			<Word>null</Word>
-			<Word>undefined</Word>
-			<Word>each</Word>
-			<Word>if</Word>
-			<Word>else</Word>
-			<Word>await</Word>
-			<Word>then</Word>
-			<Word>catch</Word>
-		</Keywords>
-	</RuleSet>
-
-	<RuleSet name="CSS">
-		<Span color="Comment" begin="/\*" end="\*/" />
-		<Span color="String" begin="&quot;" end="&quot;" />
-		<Span color="String" begin="&apos;" end="&apos;" />
-	</RuleSet>
-
-	<RuleSet name="MainRuleSet">
-		<Import ruleSet="Html" />
-		<Import ruleSet="JavaScript" />
-		<Import ruleSet="CSS" />
-	</RuleSet>
-
-	<RuleSet>
-		<Import ruleSet="MainRuleSet" />
-	</RuleSet>
-</SyntaxDefinition>