Change colour of the ModernSlider

[xavizardKnight]

Hello!
(Don't know if I should ask in Discussions or in Issues, I think this is not a bug so I'll ask it here)

I'm using ModernSlider to remplace standard Avalonia sliders in my applications.
By default, ModernSliders have the slidebar foreground black and the background blue, which I don't personally like it because it seems that the slide goes from right-to-left instead of left-to-right; so I want to reverse the colours, so the slider goes from left-to-right with the dark background and blue slide foreground.

Here's an image of a left-to-right ModernSlider in it's current state and a mockup of how I want it to look like:

I tried to add the Background and Foreground attributes to the AXAML tag with hexadecimal colour codes, but it does nothing. I would want to ask how to achieve this colour change so it looks like the above image.

Here's the code of the ModernSlider currently (there are a lot of ticks lol):

<ModernSlider IsSnapToTickEnabled="True" Name="lenslide" VerticalAlignment="Center" Height="35"
                                  IsDirectionReversed="False" Background="#151515" Foreground="#3D729B"
                                  Value="1" Minimum="{Binding lenSlideMin}"
                                  Maximum="{Binding lenSlideMax}" Width="170"
                                  PointerLeave="Lenslide_OnPointerLeave"
                                 Ticks="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40"/>

Using Ubuntu MATE 20.04 LTS, Avalonia 0.10.7 and Aura.UI 0.1.3.1.

[PieroCastillo]

so easy, just override the follow resources:

Aura.UI/src/Aura.UI.FluentTheme/AuraUIResources.Fluent.axaml

Lines 83 to 105 in 8807d6f

	<!--ModernSlider Resources-->
	<ExperimentalAcrylicMaterial x:Key="ModernSliderIncrease"
	TintColor="{DynamicResource SystemAccentColor}"
	TintOpacity="1"
	FallbackColor="{DynamicResource SystemAccentColor}"
	MaterialOpacity="1"
	BackgroundSource="None"/>
	<ExperimentalAcrylicMaterial x:Key="ModernSliderIncreasePointerOver"
	TintColor="{DynamicResource SystemAccentColorLight1}"
	TintOpacity="1"
	FallbackColor="{DynamicResource SystemAccentColorLight1}"
	MaterialOpacity="1"
	BackgroundSource="None"/>
	<ExperimentalAcrylicMaterial x:Key="ModernSliderDecrease"
	TintColor="{DynamicResource SystemAltHighColor}"
	TintOpacity="1" MaterialOpacity="1"
	FallbackColor="{DynamicResource SystemAltHighColor}"
	BackgroundSource="None"/>
	<ExperimentalAcrylicMaterial x:Key="ModernSliderDecreasePointerOver"
	TintColor="{DynamicResource SystemAltMediumColor}"
	TintOpacity="1" MaterialOpacity="1"
	FallbackColor="{DynamicResource SystemAltMediumColor}"
	BackgroundSource="None"/>

also, don't worry, the current behavior is the expected

[xavizardKnight]

Thanks for your tip! I added these resources in my App.axaml, and I swapped the TintColor and the FallbackColor from the increase tags to the decrease tags and vice versa.

Now the sliders behave as I wanted. Thank you for your help!