From a76289ff0ac6926c29c36393efc0597ee545478a Mon Sep 17 00:00:00 2001
From: Clement Sepulchre <sepulchreclement.dic@gmail.com>
Date: Fri, 29 Nov 2024 10:21:15 +0100
Subject: [PATCH] shadcn inspire high contrast theme

---
 SukiUI.Demo/App.axaml.cs                      |   9 ++
 .../ControlsLibrary/PropertyGridView.axaml    |  14 +-
 SukiUI.Demo/SukiUIDemoViewModel.cs            |   2 +-
 .../Shaders/Background/backgroundshadcn.sksl  | 102 +++++++++++++
 .../Shaders/Background/gradientdarker.sksl    | 101 +++++++++++++
 SukiUI/Controls/SukiWindow.axaml.cs           |   2 +-
 SukiUI/Enums/SukiBackgroundStyle.cs           |   1 +
 SukiUI/SukiUI.csproj                          |   4 +
 SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml     |  27 ++++
 SukiUI/Theme/Shadcn/ShadDarkStyles.axaml      | 138 ++++++++++++++++++
 SukiUI/Theme/Shadcn/Shadcn.cs                 |  60 ++++++++
 SukiUI/Theme/ToggleSwitchStyles.xaml          |   9 +-
 12 files changed, 460 insertions(+), 9 deletions(-)
 create mode 100644 SukiUI/Content/Shaders/Background/backgroundshadcn.sksl
 create mode 100644 SukiUI/Content/Shaders/Background/gradientdarker.sksl
 create mode 100644 SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml
 create mode 100644 SukiUI/Theme/Shadcn/ShadDarkStyles.axaml
 create mode 100644 SukiUI/Theme/Shadcn/Shadcn.cs

diff --git a/SukiUI.Demo/App.axaml.cs b/SukiUI.Demo/App.axaml.cs
index d0f257f6c..d77e8f4cf 100644
--- a/SukiUI.Demo/App.axaml.cs
+++ b/SukiUI.Demo/App.axaml.cs
@@ -1,8 +1,12 @@
+using System;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Controls.Templates;
 using Avalonia.Markup.Xaml;
+using Avalonia.Markup.Xaml.Styling;
+using Avalonia.Media;
+using Avalonia.Styling;
 using Microsoft.Extensions.DependencyInjection;
 using SukiUI.Demo.Common;
 using SukiUI.Demo.Features.ControlsLibrary;
@@ -19,6 +23,8 @@
 using SukiUI.Demo.Features.Theming;
 using SukiUI.Demo.Services;
 using SukiUI.Dialogs;
+using SukiUI.Models;
+using SukiUI.Theme.Shadcn;
 using SukiUI.Toasts;
 
 namespace SukiUI.Demo;
@@ -28,6 +34,7 @@ public class App : Application
     public override void Initialize()
     {
         AvaloniaXamlLoader.Load(this);
+        
     }
 
     public override void OnFrameworkInitializationCompleted()
@@ -47,6 +54,8 @@ public override void OnFrameworkInitializationCompleted()
         }
 
         base.OnFrameworkInitializationCompleted();
+        
+    //    Shadcn.Configure(Application.Current, ThemeVariant.Dark);
     }
 
     private static SukiViews ConfigureViews(ServiceCollection services)
diff --git a/SukiUI.Demo/Features/ControlsLibrary/PropertyGridView.axaml b/SukiUI.Demo/Features/ControlsLibrary/PropertyGridView.axaml
index efd35e490..90a089643 100644
--- a/SukiUI.Demo/Features/ControlsLibrary/PropertyGridView.axaml
+++ b/SukiUI.Demo/Features/ControlsLibrary/PropertyGridView.axaml
@@ -18,11 +18,15 @@
         <suki:GlassCard Width="500">
             <ScrollViewer>
                 <DockPanel>
-                    <ToggleButton HorizontalAlignment="Right"
-                                  Content="Use external dialog window"
-                                  DockPanel.Dock="Top"
-                                  IsChecked="True"
-                                  IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
+                    <suki:GlassCard Padding="12" Margin="0,0,0,25"  DockPanel.Dock="Top" HorizontalAlignment="Right">
+                        <StackPanel Orientation="Horizontal" Spacing="12">
+                            <TextBlock Margin="8,0,0,0" VerticalAlignment="Center" FontWeight="DemiBold" Text="Use external dialog window :"></TextBlock>
+                            <ToggleSwitch 
+                                          IsChecked="True"
+                                          IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
+                        </StackPanel>
+                    </suki:GlassCard>
+                    
                     <suki:PropertyGrid Item="{Binding Form}">
                         <suki:PropertyGrid.DataTemplates>
                             <!--
diff --git a/SukiUI.Demo/SukiUIDemoViewModel.cs b/SukiUI.Demo/SukiUIDemoViewModel.cs
index 8ed502522..1ebeb8197 100644
--- a/SukiUI.Demo/SukiUIDemoViewModel.cs
+++ b/SukiUI.Demo/SukiUIDemoViewModel.cs
@@ -34,7 +34,7 @@ public partial class SukiUIDemoViewModel : ObservableObject
     [ObservableProperty] private DemoPageBase? _activePage;
     [ObservableProperty] private bool _windowLocked;
     [ObservableProperty] private bool _titleBarVisible = true;
-    [ObservableProperty] private SukiBackgroundStyle _backgroundStyle = SukiBackgroundStyle.Gradient;
+    [ObservableProperty] private SukiBackgroundStyle _backgroundStyle = SukiBackgroundStyle.GradientSoft;
     [ObservableProperty] private bool _animationsEnabled;
     [ObservableProperty] private string? _customShaderFile;
     [ObservableProperty] private bool _transitionsEnabled;
diff --git a/SukiUI/Content/Shaders/Background/backgroundshadcn.sksl b/SukiUI/Content/Shaders/Background/backgroundshadcn.sksl
new file mode 100644
index 000000000..7578506a6
--- /dev/null
+++ b/SukiUI/Content/Shaders/Background/backgroundshadcn.sksl
@@ -0,0 +1,102 @@
+float smoothstep(float a, float b, float x) {
+    float t = clamp((x - a) / (b - a), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+}
+
+vec3 blendOverlay(vec3 base, vec3 blend) {
+    return vec3(
+        base.r < 0.5 ? (2.0 * base.r * blend.r) : (1.0 - 2.0 * (1.0 - base.r) * (1.0 - blend.r)),
+        base.g < 0.5 ? (2.0 * base.g * blend.g) : (1.0 - 2.0 * (1.0 - base.g) * (1.0 - blend.g)),
+        base.b < 0.5 ? (2.0 * base.b * blend.b) : (1.0 - 2.0 * (1.0 - base.b) * (1.0 - blend.b))
+    );
+}
+
+vec3 blendOverlayDark(vec3 base, vec3 blend) {
+    vec3 result;
+    result.r = (base.r < 0.5) ? (2 * base.r * blend.r) : (4 - 1.5 * (3 - base.r) * (4 - blend.r));
+    result.g = (base.g < 0.5) ? (2* base.g * blend.g) : (4 - 1.5 * (3 - base.g) * (4 - blend.g));
+    result.b = (base.b < 0.5) ? (2 * base.b * blend.b) : (4 - 1.5 * (3 - base.b) * (4 - blend.b));
+    return mix(base, clamp(result, 0.0, 1.0), 0.5); // Mélange avec la couleur de base pour réduire l'assombrissement
+}
+
+mat2 Rot(float a) {
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+vec2 hash(vec2 p) {
+    p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
+    return fract(sin(p) * 43758.5453);
+}
+
+float noise(in vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    float n = mix(mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+                  mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    return 0.42 + 0.42 * n;
+}
+
+vec4 main(vec2 fragCoord) {
+
+vec3 grayBase = vec3(0.03,0.03,0.03);
+vec3 whiteBase = vec3(0.98,0.98,0.98);
+    
+    vec2 uv = fragCoord / iResolution.xy;
+    float ratio = iResolution.x / iResolution.y;
+
+    vec2 tuv = uv;
+    tuv -= .5;
+
+    float degree = noise(vec2(iTime * .15, tuv.x * tuv.y));
+
+    tuv.y *= 0.7 / ratio;
+    tuv *= Rot(radians((degree - .5) * 720. + 180.));
+    tuv.y *= ratio;
+
+    float frequency = 1.;
+    float amplitude = 155.;
+    float speed = iTime * 0.1;
+    tuv.x += sin(tuv.y * frequency + speed) / amplitude;
+    tuv.y += sin(tuv.x * frequency * 1.5 + speed) / (amplitude * .5);
+    
+    float opacityLayer1 = 0.95;
+    float opacityLayer2 = 0.85 - (iDark / 2);
+
+    
+    float iPrimaryOpacity = 1.5; // Exemple de nouvelle opacité pour iPrimary
+    if (iDark == 1) {
+        iPrimaryOpacity = 0.6;
+    }
+    vec3 iPrimaryWithOpacity = iPrimary * iPrimaryOpacity;
+
+  
+    float iAccentOpacity = -1.05; 
+    if (iDark == 1) {
+            iAccentOpacity = 4.5;
+        }
+    vec3 iAccentWithOpacity = iPrimary * iAccentOpacity;
+
+    vec3 layer1Color = mix(vec3(0.0), iPrimaryWithOpacity, opacityLayer1);
+    vec3 layer1 = mix(layer1Color, iAccentWithOpacity * 0.85, smoothstep(-.3, .4, (tuv * Rot(radians(-5.))).x));
+    
+    vec3 layer2Color = mix(vec3(0.0), iAccentWithOpacity, opacityLayer2);
+    vec3 layer2 = mix(layer2Color, iPrimaryWithOpacity * 0.65, smoothstep(-.2, .3, (tuv * Rot(radians(-5.))).x));
+    
+    vec3 finalComp = mix(layer1, layer2, smoothstep(.8, -.5, tuv.y));
+    
+    vec3 col;
+    if (iDark == 0) {
+        col = blendOverlay( whiteBase * 1.02, finalComp);
+    } else {
+        col = blendOverlayDark(grayBase, finalComp);
+    }
+
+    return vec4(col, iAlpha);
+}
\ No newline at end of file
diff --git a/SukiUI/Content/Shaders/Background/gradientdarker.sksl b/SukiUI/Content/Shaders/Background/gradientdarker.sksl
new file mode 100644
index 000000000..ece515f8a
--- /dev/null
+++ b/SukiUI/Content/Shaders/Background/gradientdarker.sksl
@@ -0,0 +1,101 @@
+float smoothstep(float a, float b, float x) {
+    float t = clamp((x - a) / (b - a), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+}
+
+vec3 blendOverlay(vec3 base, vec3 blend) {
+    return vec3(
+        base.r < 0.5 ? (2.0 * base.r * blend.r) : (1.0 - 2.0 * (1.0 - base.r) * (1.0 - blend.r)),
+        base.g < 0.5 ? (2.0 * base.g * blend.g) : (1.0 - 2.0 * (1.0 - base.g) * (1.0 - blend.g)),
+        base.b < 0.5 ? (2.0 * base.b * blend.b) : (1.0 - 2.0 * (1.0 - base.b) * (1.0 - blend.b))
+    );
+}
+
+vec3 blendOverlayDark(vec3 base, vec3 blend) {
+    vec3 result;
+    result.r = (base.r < 0.5) ? (2 * base.r * blend.r) : (4 - 1.5 * (3 - base.r) * (4 - blend.r));
+    result.g = (base.g < 0.5) ? (2* base.g * blend.g) : (4 - 1.5 * (3 - base.g) * (4 - blend.g));
+    result.b = (base.b < 0.5) ? (2 * base.b * blend.b) : (4 - 1.5 * (3 - base.b) * (4 - blend.b));
+    return mix(base, clamp(result, 0.0, 1.0), 0.5); // Mélange avec la couleur de base pour réduire l'assombrissement
+}
+
+mat2 Rot(float a) {
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+vec2 hash(vec2 p) {
+    p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));
+    return fract(sin(p) * 43758.5453);
+}
+
+float noise(in vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    float n = mix(mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
+                  mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
+                      dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);
+    return 0.42 + 0.42 * n;
+}
+
+vec4 main(vec2 fragCoord) {
+
+vec3 grayBase = vec3(0.08,0.08,0.08);
+    
+    vec2 uv = fragCoord / iResolution.xy;
+    float ratio = iResolution.x / iResolution.y;
+
+    vec2 tuv = uv;
+    tuv -= .5;
+
+    float degree = noise(vec2(iTime * .15, tuv.x * tuv.y));
+
+    tuv.y *= 0.7 / ratio;
+    tuv *= Rot(radians((degree - .5) * 720. + 180.));
+    tuv.y *= ratio;
+
+    float frequency = 1.;
+    float amplitude = 155.;
+    float speed = iTime * 0.1;
+    tuv.x += sin(tuv.y * frequency + speed) / amplitude;
+    tuv.y += sin(tuv.x * frequency * 1.5 + speed) / (amplitude * .5);
+    
+    float opacityLayer1 = 0.95;
+    float opacityLayer2 = 0.85 - (iDark / 2);
+
+    
+    float iPrimaryOpacity = 1.5; // Exemple de nouvelle opacité pour iPrimary
+    if (iDark == 1) {
+        iPrimaryOpacity = 0.6;
+    }
+    vec3 iPrimaryWithOpacity = iPrimary * iPrimaryOpacity;
+
+  
+    float iAccentOpacity = -1.05; 
+    if (iDark == 1) {
+            iAccentOpacity = 4.5;
+        }
+    vec3 iAccentWithOpacity = iPrimary * iAccentOpacity;
+
+    vec3 layer1Color = mix(vec3(0.0), iPrimaryWithOpacity, opacityLayer1);
+    vec3 layer1 = mix(layer1Color, iAccentWithOpacity * 0.85, smoothstep(-.3, .4, (tuv * Rot(radians(-5.))).x));
+    
+    vec3 layer2Color = mix(vec3(0.0), iAccentWithOpacity, opacityLayer2);
+    vec3 layer2 = mix(layer2Color, iPrimaryWithOpacity * 0.65, smoothstep(-.2, .3, (tuv * Rot(radians(-5.))).x));
+    
+    vec3 finalComp = mix(layer1, layer2, smoothstep(.8, -.5, tuv.y));
+    
+    vec3 col;
+    if (iDark == 0) {
+        col = blendOverlay( iBase * 1.02, finalComp);
+    } else {
+        col = blendOverlayDark(grayBase, finalComp);
+    }
+
+    return vec4(col, iAlpha);
+}
\ No newline at end of file
diff --git a/SukiUI/Controls/SukiWindow.axaml.cs b/SukiUI/Controls/SukiWindow.axaml.cs
index 4955c106d..85c3757eb 100644
--- a/SukiUI/Controls/SukiWindow.axaml.cs
+++ b/SukiUI/Controls/SukiWindow.axaml.cs
@@ -126,7 +126,7 @@ public bool BackgroundAnimationEnabled
 
     public static readonly StyledProperty<SukiBackgroundStyle> BackgroundStyleProperty =
         AvaloniaProperty.Register<SukiWindow, SukiBackgroundStyle>(nameof(BackgroundStyle),
-            defaultValue: SukiBackgroundStyle.Gradient);
+            defaultValue: SukiBackgroundStyle.GradientSoft);
 
     /// <inheritdoc cref="SukiBackground.Style"/>
     public SukiBackgroundStyle BackgroundStyle
diff --git a/SukiUI/Enums/SukiBackgroundStyle.cs b/SukiUI/Enums/SukiBackgroundStyle.cs
index b44aedf1f..66861e986 100644
--- a/SukiUI/Enums/SukiBackgroundStyle.cs
+++ b/SukiUI/Enums/SukiBackgroundStyle.cs
@@ -4,6 +4,7 @@ public enum SukiBackgroundStyle
     {
         Gradient,
         GradientSoft,
+        GradientDarker,
         Flat,
         Bubble,
      
diff --git a/SukiUI/SukiUI.csproj b/SukiUI/SukiUI.csproj
index 5cdd98939..6fe3cabf1 100644
--- a/SukiUI/SukiUI.csproj
+++ b/SukiUI/SukiUI.csproj
@@ -105,6 +105,10 @@
 	  <EmbeddedResource Include="Content\Shaders\Loading\simple.sksl" />
 	  <None Remove="Content\Shaders\Background\gradientsoft.sksl" />
 	  <EmbeddedResource Include="Content\Shaders\Background\gradientsoft.sksl" />
+	  <None Remove="Content\Shaders\Background\gradientdarker.sksl" />
+	  <EmbeddedResource Include="Content\Shaders\Background\gradientdarker.sksl" />
+	  <None Remove="Content\Shaders\Background\backgroundshadcn.sksl" />
+	  <EmbeddedResource Include="Content\Shaders\Background\backgroundshadcn.sksl" />
 	</ItemGroup>
 
 </Project>
diff --git a/SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml b/SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml
new file mode 100644
index 000000000..8ce9925a2
--- /dev/null
+++ b/SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml
@@ -0,0 +1,27 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="https://github.com/kikipoulet/SukiUI"
+                    xmlns:system="clr-namespace:System;assembly=netstandard">
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key='Light'>
+            <Color x:Key='SukiPrimaryColor'>Black</Color>
+            <system:Double x:Key="GlassOpacity">0.5</system:Double>
+            <Color x:Key="GlassBorderBrush">#cccccc</Color>
+            <Color x:Key="SukiCardBackground">#ffffff</Color>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key='Dark'>
+        
+            <Color x:Key='SukiPrimaryColor'>White</Color>
+            <system:Double x:Key="GlassOpacity">0.09</system:Double>
+            <BoxShadows x:Key="SukiSwitchShadow">0 0 0 0 Transparent</BoxShadows>
+            <Color x:Key="SukiCardBackground">#2a2a2a</Color>
+            <Color x:Key="GlassBorderBrush">White</Color>
+            <LinearGradientBrush x:Key="PopupGradientBrush" StartPoint="0%,0%" EndPoint="100%,100%">
+                <GradientStop Color="{DynamicResource Transparent}" Offset="0"></GradientStop>
+                <GradientStop Color="{DynamicResource Transparent}" Offset="0.9"></GradientStop>
+
+            </LinearGradientBrush>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+</ResourceDictionary>
diff --git a/SukiUI/Theme/Shadcn/ShadDarkStyles.axaml b/SukiUI/Theme/Shadcn/ShadDarkStyles.axaml
new file mode 100644
index 000000000..235ff374f
--- /dev/null
+++ b/SukiUI/Theme/Shadcn/ShadDarkStyles.axaml
@@ -0,0 +1,138 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:suki="https://github.com/kikipoulet/SukiUI">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    
+       
+            <Style Selector="Button.Flat /template/ TextBlock">
+                <Setter Property="Foreground" Value="Black" />
+            </Style>
+
+            <Style Selector="Button.Flat /template/ suki|Loading">
+                <Setter Property="Foreground" Value="Black" />
+            </Style>
+            <Style Selector="Button.Flat /template/ ContentPresenter">
+                <Setter Property="Foreground" Value="Black" />
+            </Style>
+    
+    
+    <Style Selector="ToggleSwitch /template/ Border">
+       <Setter Property="Background" Value="#111111" />
+       <Setter Property="BorderBrush" Value="#111111" />
+       <Setter Property="CornerRadius" Value="100"></Setter>
+   
+    </Style>   
+    
+    <Style Selector="ToggleSwitch:checked /template/ Border#SwitchBackground">
+        <Setter Property="Background" Value="White" />
+   
+   
+    </Style>   
+    
+    <Style Selector="RadioButton.Chips:checked  TextBlock">
+        <Setter Property="Foreground" Value="#111111" />
+        <Setter Property="FontWeight" Value="Bold"></Setter>
+    </Style>
+    
+    <Style Selector="RadioButton.Chips:checked  AccessText">
+        <Setter Property="Foreground" Value="#111111" />
+
+    </Style>
+   
+    <Style Selector="ToggleButton:checked AccessText">
+        <Setter Property="Foreground" Value="#111111" />
+    </Style>
+    <Style Selector="Border.ThumbB">
+        <Setter Property="Background" Value="#111111" />
+
+    </Style>
+    
+    <Style Selector="CheckBox">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid ColumnDefinitions="Auto,*">
+                    <suki:GlassCard IsInteractive="True" Classes="Control" Name="border"
+                            Width="20"
+                            Height="20"
+                            VerticalAlignment="Center"  
+                        Classes.PrimaryOpaque="{TemplateBinding IsChecked}"
+                       
+                            CornerRadius="6">
+                        
+                        <Panel>
+                            <Path Name="checkMark"
+                                  Width="9"
+                                  Height="9" Opacity="1"
+                                  Margin="1,1,0,0"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"
+								  FlowDirection="LeftToRight"
+                                  Data="M 1145.607177734375,430 C1145.607177734375,430 1141.449951171875,435.0772705078125 1141.449951171875,435.0772705078125 1141.449951171875,435.0772705078125 1139.232177734375,433.0999755859375 1139.232177734375,433.0999755859375 1139.232177734375,433.0999755859375 1138,434.5538330078125 1138,434.5538330078125 1138,434.5538330078125 1141.482177734375,438 1141.482177734375,438 1141.482177734375,438 1141.96875,437.9375 1141.96875,437.9375 1141.96875,437.9375 1147,431.34619140625 1147,431.34619140625 1147,431.34619140625 1145.607177734375,430 1145.607177734375,430 z"
+                                  Fill="#111111"
+                                  Stretch="Uniform" >
+                                <Path.Transitions>
+                                    <Transitions>
+                                    <DoubleTransition Property="Opacity" Duration="0:0:0.2"></DoubleTransition>
+                                        </Transitions>
+                                </Path.Transitions>
+                            </Path>
+                            <Border Name="IndetBorder" Opacity="0" VerticalAlignment="Center" HorizontalAlignment="Center" Background="White" Height="3" Width="8" CornerRadius="2">
+                                <Border.Transitions>
+                                    <Transitions>
+                                    <DoubleTransition Property="Opacity" Duration="0:0:0.2"></DoubleTransition>
+                                    </Transitions>
+                                </Border.Transitions>
+                            </Border>
+                        </Panel>
+                    </suki:GlassCard>
+                    <ContentPresenter Name="PART_ContentPresenter"
+                                      Grid.Column="1"
+                                      Margin="{TemplateBinding Padding}"
+                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                      Content="{TemplateBinding Content}"
+                                      ContentTemplate="{TemplateBinding ContentTemplate}"
+                                      FontSize="{TemplateBinding FontSize}"
+                                      IsVisible="{TemplateBinding Content,
+                                                                  Converter={x:Static ObjectConverters.IsNotNull}}"
+                                      RecognizesAccessKey="True" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+   
+    <Style Selector="RadioButton">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="{DynamicResource SukiControlBorderBrush}" />
+        <Setter Property="BorderThickness" Value="1.2" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid Background="{TemplateBinding Background}" ColumnDefinitions="Auto,*">
+                    <suki:GlassCard Width="20" Height="20" CornerRadius="50" Classes="Control"
+                                    Classes.PrimaryOpaque="{TemplateBinding IsChecked}"
+                    />
+                    
+                    <Ellipse Height="8" Width="8" HorizontalAlignment="Center" VerticalAlignment="Center" IsVisible="{TemplateBinding IsChecked}"  Fill="#111111"/>
+                    <ContentPresenter Name="PART_ContentPresenter"
+                                      Grid.Column="1"
+                                      Margin="10,0,0,0"
+                                      VerticalAlignment="Center"
+                                      Content="{TemplateBinding Content}"
+                                      ContentTemplate="{TemplateBinding ContentTemplate}"
+                                      FontSize="{TemplateBinding FontSize}"
+                                      RecognizesAccessKey="True" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+    
+    
+   
+  
+</Styles>
diff --git a/SukiUI/Theme/Shadcn/Shadcn.cs b/SukiUI/Theme/Shadcn/Shadcn.cs
new file mode 100644
index 000000000..317cadd48
--- /dev/null
+++ b/SukiUI/Theme/Shadcn/Shadcn.cs
@@ -0,0 +1,60 @@
+using System;
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml.Styling;
+using Avalonia.Media;
+using Avalonia.Styling;
+using SukiUI.Controls;
+using SukiUI.Models;
+
+namespace SukiUI.Theme.Shadcn
+{
+    public static class Shadcn
+    {
+        public static void Configure(Application application, ThemeVariant startupTheme)
+        {
+            Application.Current.Resources.MergedDictionaries.Add(new ResourceInclude(new Uri("avares://SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml")
+            )
+            {
+                Source = new Uri("avares://SukiUI/Theme/Shadcn/BlackWhiteTheme.axaml")
+            });
+        
+            var whiteTheme = new SukiColorTheme("White", new Color(255, 255, 255, 255), new Color(255, 255, 255, 255));
+            var blackTheme = new SukiColorTheme("Black", new Color(255, 0, 0, 0), new Color(255, 0, 0, 0));
+
+            SukiTheme.GetInstance().AddColorThemes(new []{whiteTheme, blackTheme});
+
+            var BlackStyles = new StyleInclude(new Uri("avares://SukiUI/Theme/Shadcn/ShadDarkStyles.axaml"))
+            {
+                Source = new Uri("avares://SukiUI/Theme/Shadcn/ShadDarkStyles.axaml")
+            };
+
+        
+            SukiTheme.GetInstance().OnBaseThemeChanged += variant =>
+            {
+                if (variant == ThemeVariant.Dark)
+                {
+                    application.Styles.Add(BlackStyles);
+                    SukiTheme.GetInstance().ChangeColorTheme(whiteTheme);
+                
+                }
+                else
+                {
+                    SukiTheme.GetInstance().ChangeColorTheme(blackTheme);
+                    application.Styles.Remove(BlackStyles);
+                }
+            };
+
+            try
+            {
+                ((SukiWindow)((ClassicDesktopStyleApplicationLifetime)application.ApplicationLifetime).MainWindow)
+                    .BackgroundShaderFile = "backgroundshadcn";
+            }catch{}
+            
+            SukiTheme.GetInstance().ChangeBaseTheme(ThemeVariant.Light);
+            SukiTheme.GetInstance().ChangeBaseTheme(ThemeVariant.Dark);
+            SukiTheme.GetInstance().ChangeBaseTheme(startupTheme);
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/SukiUI/Theme/ToggleSwitchStyles.xaml b/SukiUI/Theme/ToggleSwitchStyles.xaml
index 3fbd8ff0c..c7ce783ba 100644
--- a/SukiUI/Theme/ToggleSwitchStyles.xaml
+++ b/SukiUI/Theme/ToggleSwitchStyles.xaml
@@ -138,6 +138,7 @@
                                                     <SineEaseOut />
                                             </ThicknessTransition.Easing>
                                         </ThicknessTransition>
+                                     <DoubleTransition Property="Opacity" Duration="0:0:0.5"></DoubleTransition>
                                     </Transitions>
                                 </Panel.Transitions>
                             </Panel>
@@ -165,7 +166,7 @@
                                     Width="18"
                                     Height="18"
                                     Margin="0,0,0,0"
-                                    Background="#fcfcfc"
+                                    
                                     BoxShadow="{DynamicResource SukiSwitchShadow}"
                                     CornerRadius="{DynamicResource MediumCornerRadius}">
                                 <Border />
@@ -196,7 +197,10 @@
     </Style>
 
    
-    
+    <Style Selector="ToggleSwitch /template/ Border#SwitchKnob">
+
+        <Setter Property="Background" Value="#fcfcfc" />
+    </Style>
     <Style Selector="ToggleSwitch:unchecked /template/ Border#SwitchKnob">
         <Setter Property="Width" Value="18" />
         <Setter Property="Canvas.Left" Value="2" />
@@ -212,6 +216,7 @@
 
     </Style>
 
+