Dynamic App Themes in Xamarin.Forms - Light, Dark, & Custom Modes

Ғылым және технология

Now that we have started to style our application is it time to have themes for our users as well. Devices now adays at a minimum support a light and dark mode, but it is also great to offer custom theme for your users. Today, I will walk through how to set it all up with Xamarin.Forms built in support for theming with AppThemeBinding and DynamicResources.
Full Xamarin Beginner's Playlist - • Xamarin & Xamarin.Form...
👕 Buy some swag! - jamesmontemagno.myspreadshop....
Time Codes:
00:00 - Intro & types of themes
01:35 - DynamicResources for themes
05:40 - AppThemeBinding for system theming
09:15 - Theming styles on controls
12:40 - Creating a theme settings page for users to pick a theme
23:45 - Wrap-up of theming your apps
Links:
* My Coffee App GitHub - github.com/jamesmontemagno/my...
* Xamarin.Forms Styles Documentation: docs.microsoft.com/xamarin/xa...
* Good Looking Xamarin.Forms Apps GitHub - github.com/jsuarezruiz/xamari...
* App Theme Bindings - docs.microsoft.com/xamarin/xa...
* Blog Great looking settings screen: devblogs.microsoft.com/xamari...
* Xamarin.Essentials videos - channel9.msdn.com/Tags/xamari...
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
Follow:
👨‍💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
🔴 Twitch: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
My Setup:
* Blue Spark Microphone - amzn.to/3qgtYkq
* Blue Pop Filter - amzn.to/3jEWM3r
* Rode Microphone Arm - amzn.to/2Z68AlE
* Sony MDR7306 Headphones - amzn.to/372jxta
* Stream Deck - amzn.to/373Uk1n
* Elgato Cam Link - amzn.to/3a9eGbh
* GoPro Hero - amzn.to/374lm90
* MX Master 2S Mouse - amzn.to/3d7J2gj
* Tecware Phantom Keyboard - amzn.to/3aUP4y9
#XamarinForms #Themes #DarkMode

Пікірлер: 47

  • @vukilesimelane2033
    @vukilesimelane20333 жыл бұрын

    Thank you so much James. Needed this soo much.

  • @alaaburayyan
    @alaaburayyan3 жыл бұрын

    You get me! I was just looking for something to explain that to me. Thanks man.

  • @LeeM0to
    @LeeM0to3 жыл бұрын

    Another great useful video James, thanks 👍

  • @cprashanthreddy
    @cprashanthreddy3 жыл бұрын

    Awesome, this is what I was looking for.. Thank you.

  • @saroshwadia
    @saroshwadia3 жыл бұрын

    As usual another fab video - right on the money 5 thumbs up :-)

  • @bashobbel3575
    @bashobbel35753 жыл бұрын

    Cool , thanks for the video . Going to use some of it.

  • @hanh.trinh.yeu.thuong
    @hanh.trinh.yeu.thuong3 жыл бұрын

    Thank so much, James!

  • @mqst
    @mqst2 жыл бұрын

    omg, big ty James

  • @paul790905
    @paul7909053 жыл бұрын

    James, Thanks

  • @santoshkundkar8914
    @santoshkundkar89143 жыл бұрын

    Awesome 👌

  • @jomargonzalez9184
    @jomargonzalez91842 жыл бұрын

    16.00 perfect time to make use of enums! public enum Themes { Default, Light, Dark }

  • @xlomis
    @xlomis2 жыл бұрын

    James hi, first I'd like to thank you so much for all the great videos and knowledge you release to the community , helping us all in our development. In your examples you are using SHELL and talked about it in the videos how great it is. If at all possible I'd love to see how to do RTL on the shell "hamburger" menu. Changing the content of the menu (flyout) to RTL at runtime is not a problem - just apply "FlowDirection=RightToLeft" on the shell definition. However the "hamburger" always stays on the left. I tried using your approach and "piggybacked" on your Dynamic App Themes DI and "Forced RTL" which did the trick. However it had the unintentional results of staying RTL on all APPs even after I closed and removed the app from my phone. I should mention that I'm using an Android phone (Galaxy S10) and do not know what it looks like on an iPhone. Thanks again, Shlomi

  • @billymartin6497
    @billymartin64972 жыл бұрын

    Hi. If I background my app and change the OS to dark mode (Or Light Mode), when I come back to my app, the page is the same. If I change to a new page, it will change to the OS mode, but if I navigate back, the other page is still in the original mode.

  • @zx-xn1lb
    @zx-xn1lb3 жыл бұрын

    Hey James,I followed your xamarin 101 doing my Android homework. I really apreciated you teach me so much which made me build a APP with poor C# knowledge.Although it was difficult at first, watching your video repeatedly and practicing by myself gave me a lot of gains.I will always support your video. In addition, I have a small request :Can you introduce sharpnado UI control in your video, which is the UI plug-in you put in your plug-in link. The code there is still a bit difficult for me, I think most people must also want to know how to make a beautiful interface.Thanks.

  • @zx-xn1lb

    @zx-xn1lb

    3 жыл бұрын

    I've built backend for my music APP, but how to make beautiful UI is still a problem for me

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Glad you got it going! That is awesome! Checkout this blog on app design devblogs.microsoft.com/xamarin/building-beautiful-apps-with-xamarin-forms/

  • @zx-xn1lb

    @zx-xn1lb

    3 жыл бұрын

    @@JamesMontemagno Thanks for your help so fast.I believe this will definitely allow me to build a good-looking UI

  • @nick0taylor
    @nick0taylor3 жыл бұрын

    How do I change the color of the text in my flyout items? Ive got everything racting to dark theme including the background color of the flyout but I cant seem to change the text color and what color the currently active tab has in hte flyout menu

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    You would want to adjust this in your Shell: github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/AppShell.xaml#L39

  • @gmcclenny
    @gmcclenny3 жыл бұрын

    If using an image/logo, can I show 1 version of the image if light mode is selected, and a different color image if dark mode is selected?

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Same way, you can have 2 different images and use the AppThemeBinding

  • @roman3dart78
    @roman3dart783 жыл бұрын

    How can I add the enum to get "AppThemeBinding=RedStyle". I need more themes to pick than light and dark..

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Like I said in this case you would directly use DynamicResource for all of your colors and then set them in the code behind for each theme. You woul dnot use AppThemeBinding in this case. For example here docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/theming

  • @pinpaho
    @pinpaho3 жыл бұрын

    Can you change the color of the status bar based on the device theme as well? So that when light mode it's white, dark mode it's black.

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Yup! I have another video coming out next week on it, but you can see the code already in the GitHub repo github.com/jamesmontemagno/mycoffeeapp

  • @pinpaho

    @pinpaho

    3 жыл бұрын

    @@JamesMontemagno Thank you! Your videos are awesome btw, they've helped me a lot!

  • @kylewang1571
    @kylewang15713 жыл бұрын

    If we want to add "AppThemeBinding" to status bar, how to achieve it? And how to set different status bar color for different page?

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Great question! you can set it on Android via -> github.com/jamesmontemagno/Hanselman.Forms/blob/vnext/src/Android/Helpers/Environment.cs on iOS You set the navigation bar -> gist.github.com/jamesmontemagno/4fa47d55048e5791249653f63f3ac3cb and config info.plist like I put in this gist

  • @kylewang1571

    @kylewang1571

    3 жыл бұрын

    @@JamesMontemagno Thank you so much, James.

  • @ideki
    @ideki Жыл бұрын

    Hello, I followed your tutorial. But if I set the theme to Unspecified, when I load the application, it crashes saying that the binding should be done in a UI thread. If I force the theme to dark or light, it does not happen. I probably missed something, but I do not know what.

  • @JamesMontemagno

    @JamesMontemagno

    Жыл бұрын

    Depending on when you are running it you may want to run it on the UIThread for changes perhaps... I would need to see a repo of it or take a look at my coffee app sample and see if that works for you.

  • @joeyireland21
    @joeyireland216 ай бұрын

    Hi James, I know this is an old video but when you do this on iOS it does not change the keyboard colours just stays in light mode.

  • @JamesMontemagno

    @JamesMontemagno

    6 ай бұрын

    It is your apps theme, the keyboard works off the system and what is behind it.

  • @dr.d303
    @dr.d3032 жыл бұрын

    How do you stick always on top your emulator?

  • @JamesMontemagno

    @JamesMontemagno

    2 жыл бұрын

    There is a setting in the android emulator to be always on top

  • @dr.d303

    @dr.d303

    2 жыл бұрын

    @@JamesMontemagno Thankyou James!

  • @omarguerra6483
    @omarguerra64832 жыл бұрын

    Genial settings interface at 13:51

  • @sandanuwan4441
    @sandanuwan44413 жыл бұрын

    Sri. How to upload image from phone gallery or camera without hard cording image. Can you show it form another lesson. If you can do it for CoffeeApp its would me great. Because of I already followed all lessons. Now I want to add coffee cup image from my gallery without using same image everytime. And also I want to use phone camera if not have phone in gallery. Can you please show it in next lesson. I am waiting for it. Thank you

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    For technical support -> docs.microsoft.com/en-us/answers/products/dotnet

  • @williamprogramer4168
    @williamprogramer41683 жыл бұрын

    ⭐⭐⭐⭐⭐

  • @ehabghonem
    @ehabghonem3 жыл бұрын

    can you help me to export sum data to pdf file and use it to share in WhatsApp

  • @saroshwadia
    @saroshwadia3 жыл бұрын

    How come I don't see the Dynamic App Themes code in the repo?

  • @JamesMontemagno

    @JamesMontemagno

    3 жыл бұрын

    Whoops, forgot to merge it in :) There now! github.com/jamesmontemagno/MyCoffeeApp/pull/6

  • @saroshwadia

    @saroshwadia

    3 жыл бұрын

    @@JamesMontemagno Got it Thx :-)

Келесі