Forum General

How to use Dark Theme Light Theme in Xamarin Forms?

HellooHelloo Member ✭✭

I am new to Xamarin Forms, I want to use a logo that changes based on the device mode, if it's dark mode, the logo will be white and if it's light mode, the logo will be black. I only found examples on how to do it for colors by adding them to the resource dictionaries(the example is attached below), I tried to do it for the logo, but It didn't work.Can someone share tips or a link of a tutorial that show how to do that?




<!--  Colours  -->
<!--<Color x:Key="MainPage">#F58220</Color>-->

Answers

  • JoannaGJoannaG Member ✭✭✭
  • hArDiK67hArDiK67 Member
    edited March 8

    @Helloo
    You should try this

    Change App.cs to App.xml

  • okinaturokinatur Member ✭✭

    is this dark mode still in function?

  • jagdeeshkjagdeeshk Member ✭✭

    You can change the image source according to the app theme

    <Image Source="{AppThemeBinding Light=light_theme_logo.png, Dark=dark_theme_logo.png}" />

    FYI, If you want to change any label text color / any other views foreground or background-color change according to app theme use the below code.

    <Label TextColor="{AppThemeBinding Dark=#ffffff, Light=#000000}"  Text="Hello Xamarin"/>
    
    <StackLayout BackgroundColor="{AppThemeBinding Dark= #000000, Light=#ffffff}">
    
    

    If you want change thems on button click, use below code

    Application.Current.UserAppTheme = OSAppTheme.Unspecified;  // Your device settings decide whether to show light or dark mode.
    
    Application.Current.UserAppTheme = OSAppTheme.Dark;  // To activate dark theme
    
    Application.Current.UserAppTheme = OSAppTheme.Light;  // To activate light theme
    
Sign In or Register to comment.