Update themes

samples/ViewModelsSamples/Lines/Basic/ViewModel.cs

@@ -1,9 +1,7 @@
 using LiveChartsCore;
 using LiveChartsCore.SkiaSharpView;
 using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
-using LiveChartsCore.SkiaSharpView.Painting;
 using LiveChartsCore.SkiaSharpView.VisualElements;
-using SkiaSharp;
 
 namespace ViewModelsSamples.Lines.Basic;
 
@@ -29,7 +27,6 @@ public class ViewModel
         {
             Text = "My chart title",
             TextSize = 25,
-            Padding = new LiveChartsCore.Drawing.Padding(15),
-            Paint = new SolidColorPaint(SKColors.DarkSlateGray)
+            Padding = new LiveChartsCore.Drawing.Padding(15)
         };
 }

samples/ViewModelsSamples/Pies/Basic/ViewModel.cs

@@ -1,8 +1,6 @@
 using LiveChartsCore;
 using LiveChartsCore.SkiaSharpView;
 using System.Collections.Generic;
-using LiveChartsCore.SkiaSharpView.Painting;
-using SkiaSharp;
 using LiveChartsCore.SkiaSharpView.VisualElements;
 using LiveChartsCore.SkiaSharpView.Extensions;
 
@@ -29,7 +27,6 @@ public class ViewModel
         {
             Text = "My chart title",
             TextSize = 25,
-            Padding = new LiveChartsCore.Drawing.Padding(15),
-            Paint = new SolidColorPaint(SKColors.DarkSlateGray)
+            Padding = new LiveChartsCore.Drawing.Padding(15)
         };
 }

samples/ViewModelsSamples/Polar/Basic/ViewModel.cs

@@ -34,7 +34,7 @@ public class ViewModel
         new PolarAxis
         {
             LabelsRotation = LiveCharts.TangentAngle,
-            IsInverted = true // enables counter clockwise draw. // mark
+            //IsInverted = true // enables counter clockwise draw. // mark
         }
     ];
 

samples/WinUISample/WinUISample/MainWindow.xaml

@@ -7,7 +7,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid x:Name="grid" Padding="25 0 0 0" Background="#fafafa">
+    <Grid x:Name="grid" Padding="25 0 0 0">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="250"></ColumnDefinition>
             <ColumnDefinition Width="*"></ColumnDefinition>
@@ -46,7 +46,7 @@
             </ScrollViewer>
         </Grid>
 
-        <Border Name="contentBorder" Grid.Column="1" Background="White">
+        <Border Name="contentBorder" Grid.Column="1">
             <ContentControl x:Name="content"
                             HorizontalContentAlignment="Stretch"
                             VerticalContentAlignment="Stretch">

src/LiveChartsCore/Themes/LiveChartsStylerExtensions.cs

@@ -22,7 +22,9 @@
 
 using System;
 using LiveChartsCore.Drawing;
+using LiveChartsCore.Kernel;
 using LiveChartsCore.Kernel.Sketches;
+using LiveChartsCore.VisualElements;
 
 namespace LiveChartsCore.Themes;
 
@@ -382,4 +384,22 @@ public static Theme<TDrawingContext> HasRuleForPolarLineSeries<TDrawingContext>(
         styler.PolarLineSeriesBuilder.Add(predicate);
         return styler;
     }
+
+    /// <summary>
+    /// Defines a style builder for <see cref= "VisualElement{TDrawingContext}" /> objects.
+    /// </summary>
+    /// <typeparam name="TChartElement">The type of the chart element.</typeparam>
+    /// <typeparam name="TDrawingContext">The type of the drawing context.</typeparam>
+    /// <param name="styler">the styler.</param>
+    /// <param name="predicate">the predicate.</param>
+    /// <returns></returns>
+    public static Theme<TDrawingContext> HasRuleFor<TChartElement, TDrawingContext>(
+        this Theme<TDrawingContext> styler,
+        Action<TChartElement> predicate)
+            where TDrawingContext : DrawingContext
+            where TChartElement : ChartElement<TDrawingContext>
+    {
+        styler.ChartElementElementBuilder.Add(typeof(TChartElement), predicate);
+        return styler;
+    }
 }

src/LiveChartsCore/Themes/Theme.cs

@@ -27,6 +27,7 @@
 using LiveChartsCore.Drawing;
 using LiveChartsCore.Kernel;
 using LiveChartsCore.Kernel.Sketches;
+using LiveChartsCore.VisualElements;
 
 namespace LiveChartsCore.Themes;
 
@@ -234,6 +235,11 @@ public class Theme<TDrawingContext>
     /// </value>
     public List<Action<IBoxSeries<TDrawingContext>>> BoxSeriesBuilder { get; set; } = [];
 
+    /// <summary>
+    /// Gets or sets the visual element builder.
+    /// </summary>
+    public Dictionary<Type, object> ChartElementElementBuilder { get; set; } = [];
+
     /// <summary>
     /// Applies the theme to an axis.
     /// </summary>
@@ -385,6 +391,19 @@ public void ApplyStyleToDrawMargin(DrawMarginFrame<TDrawingContext> drawMarginFr
         foreach (var rule in DrawMarginFrameBuilder) rule(drawMarginFrame);
     }
 
+    /// <summary>
+    /// Applies the theme to a visual element.
+    /// </summary>
+    /// <typeparam name="TChartElement">The typoe of the chart element.</typeparam>
+    /// <param name="visualElement">The visual element.</param>
+    public void ApplyStyleTo<TChartElement>(TChartElement visualElement)
+        where TChartElement : VisualElement<TDrawingContext>
+    {
+        if (!ChartElementElementBuilder.TryGetValue(typeof(TChartElement), out var builder)) return;
+
+        ((Action<TChartElement>)builder)(visualElement);
+    }
+
     /// <summary>
     /// Gets the color of a series according to the theme.
     /// </summary>

src/LiveChartsCore/VisualElements/AngularTicksVisual.cs

@@ -102,26 +102,7 @@ protected internal override void OnInvalidated(Chart<TDrawingContext> chart)
         if (chart is not PieChart<TDrawingContext> pieChart)
             throw new Exception("The AngularThicksVisual can only be added to a pie chart");
 
-        _isInternalSet = true;
-        if (_theme != LiveCharts.DefaultSettings.CurrentThemeId)
-        {
-            if (CanSetProperty(nameof(Stroke)))
-            {
-                Stroke = LiveCharts.DefaultSettings
-                    .GetProvider<TDrawingContext>()
-                    .GetSolidColorPaint(new LvcColor(30, 30, 30, 255));
-            }
-
-            if (CanSetProperty(nameof(LabelsPaint)))
-            {
-                LabelsPaint = LiveCharts.DefaultSettings
-                    .GetProvider<TDrawingContext>()
-                    .GetSolidColorPaint(new LvcColor(30, 30, 30, 255));
-            }
-
-            _theme = LiveCharts.DefaultSettings.CurrentThemeId;
-        }
-        _isInternalSet = false;
+        ApplyTheme<AngularTicksVisual<TArcGeometry, TLineGeometry, TLabelGeometry, TDrawingContext>>();
 
         var drawLocation = pieChart.DrawMarginLocation;
         var drawMarginSize = pieChart.DrawMarginSize;

src/LiveChartsCore/VisualElements/LabelVisual.cs

@@ -165,6 +165,8 @@ protected internal override void SetParent(IGeometry<TDrawingContext> parent)
     /// <inheritdoc cref="VisualElement{TDrawingContext}.Measure(Chart{TDrawingContext})"/>
     public override LvcSize Measure(Chart<TDrawingContext> chart)
     {
+        ApplyTheme<LabelVisual<TLabelGeometry, TDrawingContext>>();
+
         InitializeLabel(chart);
 
         _labelGeometry!.Text = Text;

src/LiveChartsCore/VisualElements/NeedleVisual.cs

@@ -59,19 +59,11 @@ public IPaint<TDrawingContext>? Fill
     /// <inheritdoc cref="VisualElement{TDrawingContext}.OnInvalidated(Chart{TDrawingContext})"/>
     protected internal override void OnInvalidated(Chart<TDrawingContext> chart)
     {
+        ApplyTheme<NeedleVisual<TGeometry, TLabelGeometry, TDrawingContext>>();
+
         if (chart is not PieChart<TDrawingContext> pieChart)
             throw new Exception("The needle visual can only be added to a pie chart");
 
-        _isInternalSet = true;
-        if (_theme != LiveCharts.DefaultSettings.CurrentThemeId && CanSetProperty(nameof(Fill)))
-        {
-            _fill = LiveCharts.DefaultSettings
-                .GetProvider<TDrawingContext>()
-                .GetSolidColorPaint(new LvcColor(30, 30, 30, 255));
-            _theme = LiveCharts.DefaultSettings.CurrentThemeId;
-        }
-        _isInternalSet = false;
-
         var drawLocation = pieChart.DrawMarginLocation;
         var drawMarginSize = pieChart.DrawMarginSize;
 

src/LiveChartsCore/VisualElements/VisualElement.cs

@@ -214,6 +214,22 @@ protected internal void InvokePointerDown(VisualElementEventArgs<TDrawingContext
     /// <returns>The geometries.</returns>
     protected internal abstract IAnimatable?[] GetDrawnGeometries();
 
+    /// <summary>
+    /// Applies the theme to the visual.
+    /// </summary>
+    protected virtual void ApplyTheme<T>()
+        where T : VisualElement<TDrawingContext>
+    {
+        _isInternalSet = true;
+        if (_theme != LiveCharts.DefaultSettings.CurrentThemeId)
+        {
+            var theme = LiveCharts.DefaultSettings.GetTheme<TDrawingContext>();
+            theme.ApplyStyleTo((T)this);
+            _theme = LiveCharts.DefaultSettings.CurrentThemeId;
+        }
+        _isInternalSet = false;
+    }
+
     internal virtual void AlignToTopLeftCorner()
     {
         // just a workaround to align labels as the rest of the geometries.

src/skiasharp/LiveChartsCore.SkiaSharp/ThemesExtensions.cs

@@ -26,8 +26,10 @@
 using LiveChartsCore.Kernel.Sketches;
 using LiveChartsCore.Measure;
 using LiveChartsCore.SkiaSharpView.Drawing;
+using LiveChartsCore.SkiaSharpView.Drawing.Geometries;
 using LiveChartsCore.SkiaSharpView.Painting;
 using LiveChartsCore.Themes;
+using LiveChartsCore.VisualElements;
 using SkiaSharp;
 
 namespace LiveChartsCore.SkiaSharpView;
@@ -75,6 +77,11 @@ public static LiveChartsSettings AddLightTheme(
                                 : new SolidColorPaint(new SKColor(235, 235, 235));
                             cartesian.Padding = new Padding(12);
                         }
+                        else if (axis is IPolarAxis polar)
+                        {
+                            polar.LabelsBackground = new LvcColor(255, 255, 255);
+                            axis.SeparatorsPaint = new SolidColorPaint(new SKColor(235, 235, 235));
+                        }
                         else
                         {
                             axis.SeparatorsPaint = new SolidColorPaint(new SKColor(235, 235, 235));
@@ -197,6 +204,19 @@ public static LiveChartsSettings AddLightTheme(
                     .HasRuleForGaugeFillSeries(gaugeFill =>
                     {
                         gaugeFill.Fill = new SolidColorPaint(new SKColor(30, 30, 30, 10));
+                    })
+                    .HasRuleFor<LabelVisual<LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(label =>
+                    {
+                        label.Paint = new SolidColorPaint(new SKColor(30, 30, 30));
+                    })
+                    .HasRuleFor<NeedleVisual<NeedleGeometry, LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(needle =>
+                    {
+                        needle.Fill = new SolidColorPaint(new SKColor(30, 30, 30));
+                    })
+                    .HasRuleFor<AngularTicksVisual<ArcGeometry, LineGeometry, LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(ticks =>
+                    {
+                        ticks.Stroke = new SolidColorPaint(new SKColor(30, 30, 30));
+                        ticks.LabelsPaint = new SolidColorPaint(new SKColor(30, 30, 30));
                     });
 
                 additionalStyles?.Invoke(theme);
@@ -222,7 +242,8 @@ public static LiveChartsSettings AddDarkTheme(
                     .WithAnimationsSpeed(TimeSpan.FromMilliseconds(800))
                     .WithEasingFunction(EasingFunctions.ExponentialOut)
                     .WithTooltipBackgroundPaint(new SolidColorPaint(new SKColor(45, 45, 45)))
-                    .WithTooltipTextPaint(new SolidColorPaint(new SKColor(245, 245, 245)));
+                    .WithTooltipTextPaint(new SolidColorPaint(new SKColor(245, 245, 245)))
+                    .WithLegendTextPaint(new SolidColorPaint(new SKColor(245, 245, 245)));
 
                 theme.Colors = ColorPalletes.MaterialDesign200;
 
@@ -233,13 +254,19 @@ public static LiveChartsSettings AddDarkTheme(
                         axis.ShowSeparatorLines = true;
                         axis.NamePaint = new SolidColorPaint(new SKColor(235, 235, 235));
                         axis.LabelsPaint = new SolidColorPaint(new SKColor(200, 200, 200));
+
                         if (axis is ICartesianAxis cartesian)
                         {
                             axis.SeparatorsPaint = cartesian.Orientation == AxisOrientation.X
                                 ? null
                                 : new SolidColorPaint(new SKColor(90, 90, 90));
                             cartesian.Padding = new Padding(12);
                         }
+                        else if (axis is IPolarAxis polar)
+                        {
+                            polar.LabelsBackground = new LvcColor(0, 0, 0);
+                            axis.SeparatorsPaint = new SolidColorPaint(new SKColor(90, 90, 90));
+                        }
                         else
                         {
                             axis.SeparatorsPaint = new SolidColorPaint(new SKColor(90, 90, 90));
@@ -297,6 +324,13 @@ public static LiveChartsSettings AddDarkTheme(
                         stackedBarSeries.Rx = 0;
                         stackedBarSeries.Ry = 0;
                     })
+                    .HasRuleForScatterSeries(scatterSeries =>
+                    {
+                        var color = theme.GetSeriesColor(scatterSeries).AsSKColor();
+
+                        scatterSeries.Stroke = null;
+                        scatterSeries.Fill = new SolidColorPaint(color.WithAlpha(200));
+                    })
                     .HasRuleForPieSeries(pieSeries =>
                     {
                         var color = theme.GetSeriesColor(pieSeries).AsSKColor();
@@ -339,7 +373,7 @@ public static LiveChartsSettings AddDarkTheme(
 
                         polarLine.GeometrySize = 12;
                         polarLine.GeometryStroke = new SolidColorPaint(color, 4);
-                        polarLine.GeometryFill = new SolidColorPaint(new SKColor());
+                        polarLine.GeometryFill = new SolidColorPaint(new SKColor(30, 30, 30));
                         polarLine.Stroke = new SolidColorPaint(color, 4);
                         polarLine.Fill = new SolidColorPaint(color.WithAlpha(50));
                     })
@@ -349,11 +383,25 @@ public static LiveChartsSettings AddDarkTheme(
 
                         gaugeSeries.Stroke = null;
                         gaugeSeries.Fill = new SolidColorPaint(color);
+                        gaugeSeries.DataLabelsPosition = PolarLabelsPosition.ChartCenter;
                         gaugeSeries.DataLabelsPaint = new SolidColorPaint(new SKColor(200, 200, 200));
                     })
                     .HasRuleForGaugeFillSeries(gaugeFill =>
                     {
                         gaugeFill.Fill = new SolidColorPaint(new SKColor(255, 255, 255, 30));
+                    })
+                    .HasRuleFor<LabelVisual<LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(label =>
+                    {
+                        label.Paint = new SolidColorPaint(new SKColor(200, 200, 200));
+                    })
+                    .HasRuleFor<NeedleVisual<NeedleGeometry, LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(needle =>
+                    {
+                        needle.Fill = new SolidColorPaint(new SKColor(200, 200, 200));
+                    })
+                    .HasRuleFor<AngularTicksVisual<ArcGeometry, LineGeometry, LabelGeometry, SkiaSharpDrawingContext>, SkiaSharpDrawingContext>(ticks =>
+                    {
+                        ticks.Stroke = new SolidColorPaint(new SKColor(200, 200, 200));
+                        ticks.LabelsPaint = new SolidColorPaint(new SKColor(200, 200, 200));
                     });
 
                 additionalStyles?.Invoke(theme);