- Several UI and CSS Enhancement

- Add Warning for lower build version and replace with static background instead

Mica Discord/CustomGrid.cs

@@ -18,7 +18,7 @@ public CustomGrid()
         {
             Background = Brushes.Transparent;
         }
-        public IEnumerable<UIElement> ChildrenAsElements => Enumerable.Cast<UIElement>(Children);
+        public IEnumerable<UIElement> ChildrenAsElements => Enumerable.Cast<UIElement>(Children).Where(Element => Element.Visibility != Visibility.Collapsed);
         public static readonly DependencyProperty GridTypeProperty = DependencyProperty.Register(
             "GridType",
             typeof(GridType),

Mica Discord/MainWindow.xaml

@@ -83,7 +83,7 @@
     <cg:Overlay>
         <cg:RowGrid>
             <cg:Overlay cg:CustomGrid.GridType="Auto" Height="30" x:Name="TitleBar">
-                <Border Background="{DynamicResource Color}" Opacity="0.1"></Border>
+                <Border Background="{DynamicResource Color}" Opacity="0"></Border>
                 <cg:ColumnGrid x:Name="TitleBarUI">
                     <!--Height here is temperary height for design time-->
                     <TextBlock x:Name="TitleTextBlock" Margin="10,10,10,10" VerticalAlignment="Center" Foreground="{DynamicResource Color}" cg:CustomGrid.GridType="Auto">Mica Discord</TextBlock>
@@ -96,7 +96,7 @@
                     <Button x:Name="Reload" Template="{StaticResource NoDisabledBackground}" VerticalAlignment="Center" cg:CustomGrid.GridType="Auto" Foreground="{DynamicResource Color}" Background="Transparent" Width="40" Height="40" Click="RefreshPage">
                         <Image Source="{StaticResource Reload}" Width="20" Height="30"/>
                     </Button>
-                    <Button x:Name="Setting" Template="{StaticResource NoDisabledBackground}" VerticalAlignment="Center" cg:CustomGrid.GridType="Auto" Foreground="{DynamicResource Color}" Background="Transparent" Click="OpenSettings" Width="50" Height="50">
+                    <Button x:Name="Setting" Template="{StaticResource NoDisabledBackground}" VerticalAlignment="Center" cg:CustomGrid.GridType="Auto" Foreground="{DynamicResource Color}" Background="Transparent" Click="OpenSettings" Width="40" Height="40">
                         <Image Source="{StaticResource Gear}" Width="20" Height="30"/>
                     </Button>
                     <Grid x:Name="TitleBarDragable" Height="50" VerticalAlignment="Center">

Mica Discord/MainWindow.xaml.cs

@@ -13,38 +13,40 @@ namespace MicaDiscord;
 
 public partial class MainWindow : Window
 {
+    public static readonly bool NotSupportedBuild = Environment.OSVersion.Version.Build < 22523;
+    const string Radius = "0.5rem";
     bool DiscordEffectApplied = false;
+    bool _Dark = true;
     bool Dark
     {
-        set => (Resources["Color"] as SolidColorBrush ?? throw new NullReferenceException()).Color = value ? Colors.White : Colors.Black;
+        set
+        {
+            _Dark = value;
+            (Resources["Color"] as SolidColorBrush ?? throw new NullReferenceException()).Color = value ? Colors.White : Colors.Black;
+        }
+        get => _Dark;
     }
 
     void OnLoaded(object sender, RoutedEventArgs e)
     {
         void RefreshFrame()
         {
             HwndSource mainWindowSrc = HwndSource.FromHwnd(Handle);
-            mainWindowSrc.CompositionTarget.BackgroundColor = System.Windows.Media.Color.FromArgb(0, 0, 0, 0);
-
-            Graphics desktop = Graphics.FromHwnd(Handle);
-            float DesktopDpiX = desktop.DpiX;
-
-            DwmApi.DwmExtendFrameIntoClientArea(Handle, new()
+            if (NotSupportedBuild && !Settings.Default.UseBackdropAnyway)
             {
-                cxLeftWidth = -1,
-                cxRightWidth = -1,
-                cyTopHeight = -1,
-                cyBottomHeight = -1,
-            });
-            //new()
-            //{
-            //    cxLeftWidth = Convert.ToInt32(5 * (DesktopDpiX / 96)),
-            //    cxRightWidth = Convert.ToInt32(5 * (DesktopDpiX / 96)),
-            //    cyTopHeight = Convert.ToInt32(((int)ActualHeight + 5) * (DesktopDpiX / 96)),
-            //    cyBottomHeight = Convert.ToInt32(5 * (DesktopDpiX / 96))
-            //}
-            var location1 = TitleTextBlock.TransformToAncestor(this).Transform(new(0, 0));
-            var location2 = TitleBarDragable.TransformToAncestor(this).Transform(new(0, 0));
+                mainWindowSrc.CompositionTarget.BackgroundColor = Dark ? System.Windows.Media.Color.FromRgb(50, 50, 50) :
+                       System.Windows.Media.Color.FromRgb(250, 250, 250);
+            } else
+            {
+                mainWindowSrc.CompositionTarget.BackgroundColor = System.Windows.Media.Color.FromArgb(0, 0, 0, 0);
+                DwmApi.DwmExtendFrameIntoClientArea(Handle, new()
+                {
+                    cxLeftWidth = -1,
+                    cxRightWidth = -1,
+                    cyTopHeight = -1,
+                    cyBottomHeight = -1,
+                });
+            }
         }
 
         void RefreshDarkMode(bool dark) => CustomPInvoke.SetWindowAttribute(
@@ -64,8 +66,11 @@ void RefreshDarkMode(bool dark) => CustomPInvoke.SetWindowAttribute(
             WebView.CoreWebView2.DocumentTitleChanged += (_, _) =>
             {
                 var title = WebView.CoreWebView2.DocumentTitle;
-                if (title == "Discord") title = "";
-                Title = $"Mica Discord - {title}";
+                if (title == "Discord")
+                {
+                    title = "";
+                    Title = "Mica Discord";
+                } else Title = $"Mica Discord - {title}";
                 WebsiteTitle.Text = title;
             };
             WebView.CoreWebView2.HistoryChanged += delegate
@@ -88,18 +93,55 @@ void RefreshDarkMode(bool dark) => CustomPInvoke.SetWindowAttribute(
                 var LightColorCSS = Dark && Settings.Default.ModeAwareCSS;
                 var invc = LightColorCSS ? 250 : 0;
                 var regc = LightColorCSS ? 0 : 255;
+                var floating = Dark ? 0 : 255;
                 await WebView.CoreWebView2.ExecuteScriptAsync($@"
 (function () {{
     let s = document.createElement('style');
     s.innerHTML = `
 *{{
-    --background-primary: #0000;
-    --background-secondary: rgba({invc},{invc},{invc},0.05);
-    --background-secondary-alt: rgba({invc},{invc},{invc},0.05);
-    --background-tertiary: #0000;
-    --background-floating: rgba({regc},{regc},{regc},0.75);
+    --background-primary: rgba({invc},{invc},{invc},0.05);
+    --background-secondary: transparent;
+    --background-secondary-alt: rgba({invc},{invc},{invc},0.075);
+    --background-tertiary: transparent;
+    --background-message-hover: rgba({invc},{invc},{invc},0.07);
+    --background-floating: rgba({floating},{floating},{floating},0.75);
     --deprecated-store-bg: rgba({invc},{invc},{invc},0.05);
-    --channeltextarea-background: rgba({invc},{invc},{invc},0.25);
+    --channeltextarea-background: rgba({invc},{invc},{invc},0.05);
+    --scrollbar-auto-track: transparent;
+    --scrollbar-thin-track: #0000;
+    --scrollbar-thin-thumb: rgba({invc},{invc},{invc},0.25);
+    --scrollbar-auto-thumb: rgba({invc},{invc},{invc},0.25);
+}}
+code, article {{
+    --background-secondary: rgba({invc},{invc},{invc},0.05);
+}}
+.content-2a4AW9 {{
+    --background-secondary: rgba({invc},{invc},{invc},0.025);
+}}
+
+.form-3gdLxP {{
+    margin-top: 0px !important;
+    padding-top: 16px !important;
+}}
+.form-3gdLxP:before {{
+    width: 0px !important;
+    height: 0px !important;
+}}
+.scroller-kQBbkU::-webkit-scrollbar-track {{
+    margin-bottom: 0px !important;
+}}
+.scrollerSpacer-3AqkT9 {{
+    display: none;
+}}
+.content-2a4AW9, .members-3WRCEx, .membersWrap-3NUR2t {{
+    min-height: 100%;
+    padding: 0px !important;
+}}
+.chat-2ZfjoI, .container-2cd8Mz, .container-36u7Lw, .applicationStore-2nk7Lo {{
+    border-radius: {Radius} 0px 0px 0px;
+}}
+.chatContent-3KubbW {{
+    background-color: rgba({invc},{invc},{invc},0.025) !important;
 }}
 .container-2cd8Mz {{
     background-color: rgba({invc},{invc},{invc},0.05) !important;
@@ -108,10 +150,31 @@ await WebView.CoreWebView2.ExecuteScriptAsync($@"
 .callContainer-HtHELf {{
     background-color: rgba({regc},{regc},{regc},0);
 }}
+
+.panels-3wFtMD {{
+    border-radius: {Radius} 0px 0px 0px;
+}}
+.message-2CShn3, .sidebar-1tnWFu {{
+    border-radius: {Radius};
+}}
 `.trim();
     document.head.appendChild(s);
 }})()
 ".Trim());
+                await WebView.CoreWebView2.ExecuteScriptAsync($@"
+(function () {{
+    
+}})()
+".Trim());
+                RefreshFrame();
+            }
+        };
+        WebView.WebMessageReceived += (_, e) =>
+        {
+            string s = e.TryGetWebMessageAsString();
+            switch (s)
+            {
+
             }
         };
         Closing += (_, e) =>
@@ -153,7 +216,7 @@ public MainWindow()
         {
             DialogPlace.Visibility = Visibility.Hidden;
             WebView.Visibility = Visibility.Visible;
-            if (DiscordEffectApplied != Settings.Default.ReplaceDiscordBackground)
+            if (SettingsDialog.RequiresReload)
                 WebView.Reload();
         };
         SettingsDialog.OnSettingsChanged += () =>
@@ -174,9 +237,11 @@ public MainWindow()
             if (WindowState == WindowState.Maximized)
             {
                 TitleBar.Margin = new Thickness(7.5, 7.5, 0, 0);
+                WebView.Margin = new Thickness(7.5, 0, 7.5, 7.5);
             } else
             {
                 TitleBar.Margin = new Thickness(0);
+                WebView.Margin = new Thickness(0);
             }
         };
         SetValue(WindowChrome.WindowChromeProperty, WindowChrome);

Mica Discord/Mica Discord.csproj

@@ -9,12 +9,25 @@
     <RootNamespace>MicaDiscord</RootNamespace>
     <Version>1.5.0</Version>
     <UseWindowsForms>True</UseWindowsForms>
+    <PackageIcon>DiscordLogo.png</PackageIcon>
+    <ApplicationIcon>DiscordLogo.ico</ApplicationIcon>
   </PropertyGroup>
 
   <ItemGroup>
     <ApplicationDefinition Remove="App.xaml" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Include="DiscordLogo.ico" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="E:\.SysFolder\Downloads\DiscordLogo.png">
+      <Pack>True</Pack>
+      <PackagePath>\</PackagePath>
+    </None>
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.1150.38" />
     <PackageReference Include="PInvoke.DwmApi" Version="0.7.104" />

Mica Discord/Settings.settings

@@ -14,5 +14,8 @@
     <Setting Name="ModeAwareCSS" Type="System.Boolean" Scope="User">
       <Value Profile="(Default)">False</Value>
     </Setting>
+    <Setting Name="UseBackdropAnyway" Type="System.Boolean" Scope="User">
+      <Value Profile="(Default)">False</Value>
+    </Setting>
   </Settings>
 </SettingsFile>

Mica Discord/SettingsDialog.xaml

@@ -44,6 +44,17 @@
                         </ComboBox.ItemsSource>
                     </ComboBox>
                 </cg:ColumnGrid>
+                <cg:ColumnGrid cg:CustomGrid.GridType="Pixel" cg:CustomGrid.GridValue="40" x:Name="OSWarning">
+                    <cg:ColumnGrid.Background>
+                        <SolidColorBrush Color="Yellow" Opacity="0.5"/>
+                    </cg:ColumnGrid.Background>
+                    <Label Foreground="White" VerticalAlignment="Center">
+                        Warning: Your OS Build is less than 22523. Backdrop might not work properly.
+                    </Label>
+                    <Button Template="{StaticResource NoDisabledBackground}" cg:CustomGrid.GridType="Auto" Foreground="White" VerticalAlignment="Center" FontFamily="Calibri Light" x:Name="UseBackdropAnyway">
+                        Enable Anyway
+                    </Button>
+                </cg:ColumnGrid>
                 <cg:ColumnGrid cg:CustomGrid.GridType="Pixel" cg:CustomGrid.GridValue="40">
                     <Label Foreground="White" VerticalAlignment="Center">
                         Replace Discord Background

Mica Discord/SettingsDialog.xaml.cs

@@ -21,14 +21,22 @@ namespace MicaDiscord;
 /// </summary>
 public partial class SettingsDialog : Grid
 {
+    public bool RequiresReload { get; private set; } = false;
     public SettingsDialog()
     {
         InitializeComponent();
+        if (!MainWindow.NotSupportedBuild) OSWarning.Visibility = Visibility.Collapsed;
         IsVisibleChanged += (_, _) =>
         {
-            Backdrop.SelectedItem = Enum.Parse(typeof(BackdropType), Settings.Default.BackdropType);
-            ReplaceBackgroundToggle.Content = Settings.Default.ReplaceDiscordBackground ? "Disable" : "Enable";
-            Systray.IsChecked = Settings.Default.UseSystemTray;
+            if (IsVisible)
+            {
+                RequiresReload = false;
+                Backdrop.SelectedItem = Enum.Parse(typeof(BackdropType), Settings.Default.BackdropType);
+                ReplaceBackgroundToggle.Content = Settings.Default.ReplaceDiscordBackground ? "Disable" : "Enable";
+                UseBackdropAnyway.Content = Settings.Default.UseBackdropAnyway ? "Use Solid Color" : "Enable Anyway";
+                Systray.IsChecked = Settings.Default.UseSystemTray;
+                ModeAwareCSS.IsChecked = Settings.Default.ModeAwareCSS;
+            }
         };
         Backdrop.SelectionChanged += (_, _) =>
         {
@@ -58,6 +66,28 @@ public SettingsDialog()
             ReplaceBackgroundToggle.Content = newValue ? "Disable" : "Enable";
             Settings.Default.Save();
             OnSettingsChanged?.Invoke();
+            RequiresReload = true;
+        };
+        UseBackdropAnyway.Click += (_, _) =>
+        {
+            bool newValue = !Settings.Default.UseBackdropAnyway;
+            if (newValue)
+            {
+                if (MessageBox.Show(
+
+                    caption: "Warning",
+                    messageBoxText: "This might cause an unexpected behavior if your build does not support the feature!",
+                    button: MessageBoxButton.YesNo,
+                    icon: MessageBoxImage.Warning
+                    )
+                != MessageBoxResult.Yes)
+                    return;
+            }
+            Settings.Default.UseBackdropAnyway = newValue;
+            UseBackdropAnyway.Content = newValue ? "Use Solid Color" : "Enable Anyway";
+            Settings.Default.Save();
+            OnSettingsChanged?.Invoke();
+            RequiresReload = true;
         };
     }
     public event Action? OnClose;
@@ -78,5 +108,6 @@ private void ModeAwareCSSToggled(object sender, RoutedEventArgs e)
     {
         Settings.Default.ModeAwareCSS = ModeAwareCSS.IsChecked ?? false;
         Settings.Default.Save();
+        RequiresReload = true;
     }
 }