# Typography & Theme / Font và Chủ Đề

## 1. Font Registration

```csharp
// MauiProgram.cs
builder.ConfigureFonts(fonts =>
{
    fonts.AddFont("Inter-Regular.ttf", "InterRegular");
    fonts.AddFont("Inter-Bold.ttf", "InterBold");
});
```

---

## 2. Typography Scale

```xml
<!-- Typography.xaml -->
<x:Double x:Key="FontSizeCaption">12</x:Double>
<x:Double x:Key="FontSizeBody">16</x:Double>
<x:Double x:Key="FontSizeTitle">24</x:Double>
<x:Double x:Key="FontSizeHeadline">32</x:Double>

<Style x:Key="TextBody" TargetType="Label">
    <Setter Property="FontFamily" Value="InterRegular" />
    <Setter Property="FontSize" Value="{StaticResource FontSizeBody}" />
    <Setter Property="TextColor" Value="{StaticResource TextPrimary}" />
</Style>

<Style x:Key="TextHeadline" TargetType="Label">
    <Setter Property="FontFamily" Value="InterBold" />
    <Setter Property="FontSize" Value="{StaticResource FontSizeHeadline}" />
    <Setter Property="SemanticProperties.HeadingLevel" Value="Level1" />
</Style>
```

---

## 3. Dark/Light Mode

### AppThemeBinding

```xml
<!-- Colors.xaml -->
<Color x:Key="SurfaceBackground">
    {AppThemeBinding Light=#FAFAFA, Dark=#121212}
</Color>

<Color x:Key="TextPrimary">
    {AppThemeBinding Light=#212121, Dark=#FFFFFF}
</Color>
```

### Programmatic Theme Change

```csharp
// Get current theme
var theme = Application.Current.RequestedTheme;

// Force theme
Application.Current.UserAppTheme = AppTheme.Dark;

// Reset to system
Application.Current.UserAppTheme = AppTheme.Unspecified;
```

---

## 4. OnPlatform Fonts

```xml
<OnPlatform x:Key="FontFamilyRegular" x:TypeArguments="x:String">
    <On Platform="Android, iOS" Value="InterRegular" />
    <On Platform="WinUI" Value="Assets/Fonts/Inter-Regular.ttf#Inter" />
</OnPlatform>
```

---

## 5. Complete Theme.xaml

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <!-- Button Styles -->
    <Style x:Key="ButtonPrimary" TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource BrandPrimary}" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontFamily" Value="InterBold" />
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="Padding" Value="24,12" />
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale" Value="0.98" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <Style x:Key="ButtonSecondary" TargetType="Button">
        <Setter Property="BackgroundColor" Value="Transparent" />
        <Setter Property="TextColor" Value="{StaticResource BrandPrimary}" />
        <Setter Property="BorderColor" Value="{StaticResource BrandPrimary}" />
        <Setter Property="BorderWidth" Value="2" />
        <Setter Property="CornerRadius" Value="8" />
    </Style>

</ResourceDictionary>
```

---

## Quick Reference

| Category | Recommendation |
|----------|----------------|
| Primary Font | Inter, Roboto, SF Pro |
| Base Size | 16sp (Body) |
| Scale Ratio | 1.25x (Minor Third) |
| Theme | Always use AppThemeBinding |
| Accessibility | Include HeadingLevel in text styles |
