Lesson 15: Theming & Styles — Android Dev Tutorial

🎨 UI with MAUI

Theming & Styles

ResourceDictionary, implicit styles, AppThemeBinding, dark mode.

App-Wide Styles

xml

<!-- App.xaml -->
<Application.Resources>
  <ResourceDictionary>
    <Color x:Key="Primary">#3DDC84</Color>
    <Color x:Key="Background">#121212</Color>

    <!-- Implicit style — applies to all Buttons -->
    <Style TargetType="Button">
      <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
      <Setter Property="TextColor"       Value="Black" />
      <Setter Property="CornerRadius"    Value="8" />
      <Setter Property="FontAttributes"  Value="Bold" />
    </Style>
  </ResourceDictionary>
</Application.Resources>

Dark Mode with AppThemeBinding

xml

<Label
  TextColor="{AppThemeBinding Light=Black, Dark=White}"
  BackgroundColor="{AppThemeBinding Light=White, Dark=#1E1E2E}"
  Text="Adapts to system theme" />

csharp

// Force dark mode (override system preference)
public App() { InitializeComponent(); UserAppTheme = AppTheme.Dark; }

Key Takeaways

Define colors and styles in App.xaml for global consistency

StaticResource is resolved once at startup; DynamicResource updates at runtime

AppThemeBinding switches values automatically based on system light/dark mode

Implicit styles (no x:Key) apply to all elements of the target type