Merge pull request #69 from irihitech/theme

Theme

demo/Semi.Avalonia.Demo.Desktop/App.axaml

@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Semi.Avalonia.Demo.Desktop">
     <Application.Styles>
-        <StyleInclude Source="avares://Semi.Avalonia/Themes/DarkTheme.axaml" />
+        <!--<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />-->
+        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
     </Application.Styles>
 </Application>

demo/Semi.Avalonia.Demo.Desktop/App.axaml.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.Desktop;

demo/Semi.Avalonia.Demo/Pages/Overview.axaml

@@ -15,6 +15,12 @@
                 Text="Welcome to Semi Avalonia"
                 Theme="{StaticResource TitleTextBlock}" />
 
+            <ToggleSwitch
+                Content="Switch Theme"
+                IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
+                OffContent="Dark"
+                OnContent="Default" />
+
             <StackPanel Orientation="Horizontal" Spacing="20">
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>

demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs

@@ -1,6 +1,8 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -10,4 +12,17 @@ public partial class Overview : UserControl
     {
         InitializeComponent();
     }
+
+    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        var variant = Application.Current!.RequestedThemeVariant;
+        if (variant?.Key == "Dark")
+        {
+            Application.Current!.RequestedThemeVariant = ThemeVariant.Light;
+        }
+        else
+        {
+            Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;
+        }
+    }
 }

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml

@@ -7,7 +7,15 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ThemeVariantScope>
+    <Grid>
-        <TextBox Width="100" />
+        <ThemeVariantScope Name="scope">
-    </ThemeVariantScope>
+            <Border Theme="{StaticResource CardBorder}">
+                <StackPanel>
+                    <DatePicker />
+                    <CalendarDatePicker />
+                    <ToggleSwitch Content="Switch Theme" IsCheckedChanged="Switch_OnIsCheckedChanged" />
+                </StackPanel>
+            </Border>
+        </ThemeVariantScope>
+    </Grid>
 </UserControl>

demo/Semi.Avalonia.Demo/Pages/ThemeVariantDemo.axaml.cs

@@ -1,13 +1,30 @@
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
+using Avalonia.Styling;
 
 namespace Semi.Avalonia.Demo.Pages;
 
 public partial class ThemeVariantDemo : UserControl
 {
+    private ThemeVariant _variant = ThemeVariant.Default;
     public ThemeVariantDemo()
     {
         InitializeComponent();
     }
+
+    private void Switch_OnIsCheckedChanged(object sender, RoutedEventArgs e)
+    {
+        if (_variant == ThemeVariant.Dark)
+        {
+            scope.RequestedThemeVariant = ThemeVariant.Default;
+            _variant = ThemeVariant.Default;
+        }
+        else
+        {
+            scope.RequestedThemeVariant = ThemeVariant.Dark;
+            _variant = ThemeVariant.Dark;
+        }
+    }
 }

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -171,12 +171,12 @@
             </Style>
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="RadioButton.FontSize" Value="{StaticResource RadioButtonButtonSmallFontSize}" />
+            <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonSmallFontSize}" />
-            <Setter Property="RadioButton.Padding" Value="{StaticResource RadioButtonButtonSmallPadding}" />
+            <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonSmallPadding}" />
         </Style>
         <Style Selector="^.Large">
-            <Setter Property="RadioButton.FontSize" Value="{StaticResource RadioButtonButtonLargeFontSize}" />
+            <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonLargeFontSize}" />
-            <Setter Property="RadioButton.Padding" Value="{StaticResource RadioButtonButtonLargePadding}" />
+            <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonLargePadding}" />
         </Style>
     </ControlTheme>
 

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -84,7 +84,7 @@
                             x:Name="PART_OffContentPresenter"
                             Grid.Column="1"
                             Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            HorizontalAlignment="Right"
+                            HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             VerticalContentAlignment="Center"
                             Content="{TemplateBinding OffContent}"

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -16,4 +16,8 @@ Please don't update if you are not using Avalonia latest nightly build. </Packag
     <PackageReference Include="Avalonia" Version="11.0.0-preview5" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="Themes\Styles" />
+  </ItemGroup>
+
 </Project>

src/Semi.Avalonia/Themes/DarkTheme.axaml

@@ -1,16 +1,15 @@
-<Styles xmlns="https://github.com/avaloniaui"
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
-    <!-- Add Resources Here -->
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Dark.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Dark.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml" />
-                <ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
+                <ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
     <Style Selector=":is(UserControl)">
-        <Setter Property="Theme" Value="{DynamicResource {x:Type UserControl}}"></Setter>
+        <Setter Property="Theme" Value="{DynamicResource {x:Type UserControl}}" />
     </Style>
 </Styles>

src/Semi.Avalonia/Themes/Index.axaml

@@ -0,0 +1,18 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Styles.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia/Themes/Light/Light.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia/Themes/Dark/Dark.axaml" />
+            </ResourceDictionary.ThemeDictionaries>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Styles.Resources>
+    <Style Selector=":is(UserControl)">
+        <Setter Property="Theme" Value="{DynamicResource {x:Type UserControl}}" />
+    </Style>
+    <!--  Add Styles Here  -->
+</Styles>