0
# Theming and Styling
1

2
This document covers Flet's comprehensive theming and styling system, including themes, colors, typography, and visual effects for creating beautiful, consistent user interfaces.
3

4
## Import
5

6
```python
7
import flet as ft
8
```
9

10
## Core Theming
11

12
### Theme
13

14
```python { .api }
15
class Theme(Control):
16
    """Application theme configuration."""
17
    
18
    def __init__(
19
        self,
20
        color_scheme_seed: str = None,
21
        color_scheme: ColorScheme = None,
22
        text_theme: TextTheme = None,
23
        primary_swatch: str = None,
24
        primary_color: str = None,
25
        primary_color_dark: str = None,
26
        primary_color_light: str = None,
27
        accent_color: str = None,
28
        canvas_color: str = None,
29
        card_color: str = None,
30
        dialog_background_color: str = None,
31
        disabled_color: str = None,
32
        divider_color: str = None,
33
        focus_color: str = None,
34
        highlight_color: str = None,
35
        hint_color: str = None,
36
        hover_color: str = None,
37
        indicator_color: str = None,
38
        secondary_header_color: str = None,
39
        selected_row_color: str = None,
40
        splash_color: str = None,
41
        unselected_widget_color: str = None,
42
        font_family: str = None,
43
        use_material3: bool = True,
44
        visual_density: VisualDensity = None,
45
        page_transitions: PageTransitionsTheme = None,
46
        scrollbar_theme: ScrollbarTheme = None,
47
        tabs_theme: TabsTheme = None,
48
        tooltip_theme: TooltipTheme = None,
49
        banner_theme: BannerTheme = None,
50
        bottom_app_bar_theme: BottomAppBarTheme = None,
51
        bottom_navigation_bar_theme: BottomNavigationBarTheme = None,
52
        bottom_sheet_theme: BottomSheetTheme = None,
53
        button_theme: ButtonTheme = None,
54
        card_theme: CardTheme = None,
55
        checkbox_theme: CheckboxTheme = None,
56
        chip_theme: ChipTheme = None,
57
        data_table_theme: DataTableTheme = None,
58
        dialog_theme: DialogTheme = None,
59
        divider_theme: DividerTheme = None,
60
        elevated_button_theme: ElevatedButtonTheme = None,
61
        floating_action_button_theme: FloatingActionButtonTheme = None,
62
        list_tile_theme: ListTileTheme = None,
63
        navigation_bar_theme: NavigationBarTheme = None,
64
        navigation_rail_theme: NavigationRailTheme = None,
65
        outlined_button_theme: OutlinedButtonTheme = None,
66
        popup_menu_theme: PopupMenuTheme = None,
67
        progress_indicator_theme: ProgressIndicatorTheme = None,
68
        radio_theme: RadioTheme = None,
69
        slider_theme: SliderTheme = None,
70
        snack_bar_theme: SnackBarTheme = None,
71
        switch_theme: SwitchTheme = None,
72
        text_button_theme: TextButtonTheme = None,
73
        **kwargs
74
    )
75
```
76

77
**Key Parameters:**
78
- `color_scheme_seed` (str, optional): Seed color for Material 3 color scheme generation
79
- `color_scheme` (ColorScheme, optional): Custom color scheme
80
- `text_theme` (TextTheme, optional): Typography theme
81
- `use_material3` (bool, optional): Use Material Design 3 (default: True)
82
- `font_family` (str, optional): Default font family
83
- Component themes for customizing individual control appearance
84

85
**Example:**
86
```python
87
page.theme = ft.Theme(
88
    color_scheme_seed=ft.colors.GREEN,
89
    use_material3=True
90
)
91

92
# Or with custom color scheme
93
page.theme = ft.Theme(
94
    color_scheme=ft.ColorScheme(
95
        primary=ft.colors.BLUE,
96
        secondary=ft.colors.GREEN,
97
        background=ft.colors.WHITE,
98
        surface=ft.colors.GREY_50
99
    )
100
)
101
page.update()
102
```
103

104
### ColorScheme
105

106
```python { .api }
107
class ColorScheme(Control):
108
    """Color scheme definition for theming."""
109
    
110
    def __init__(
111
        self,
112
        brightness: Brightness = None,
113
        primary: str = None,
114
        on_primary: str = None,
115
        primary_container: str = None,
116
        on_primary_container: str = None,
117
        primary_fixed: str = None,
118
        primary_fixed_dim: str = None,
119
        on_primary_fixed: str = None,
120
        on_primary_fixed_variant: str = None,
121
        secondary: str = None,
122
        on_secondary: str = None,
123
        secondary_container: str = None,
124
        on_secondary_container: str = None,
125
        secondary_fixed: str = None,
126
        secondary_fixed_dim: str = None,
127
        on_secondary_fixed: str = None,
128
        on_secondary_fixed_variant: str = None,
129
        tertiary: str = None,
130
        on_tertiary: str = None,
131
        tertiary_container: str = None,
132
        on_tertiary_container: str = None,
133
        tertiary_fixed: str = None,
134
        tertiary_fixed_dim: str = None,
135
        on_tertiary_fixed: str = None,
136
        on_tertiary_fixed_variant: str = None,
137
        error: str = None,
138
        on_error: str = None,
139
        error_container: str = None,
140
        on_error_container: str = None,
141
        surface_dim: str = None,
142
        surface: str = None,
143
        surface_bright: str = None,
144
        surface_container_lowest: str = None,
145
        surface_container_low: str = None,
146
        surface_container: str = None,
147
        surface_container_high: str = None,
148
        surface_container_highest: str = None,
149
        on_surface: str = None,
150
        on_surface_variant: str = None,
151
        outline: str = None,
152
        outline_variant: str = None,
153
        shadow: str = None,
154
        scrim: str = None,
155
        inverse_surface: str = None,
156
        on_inverse_surface: str = None,
157
        inverse_primary: str = None,
158
        surface_tint: str = None,
159
        **kwargs
160
    )
161
```
162

163
**Key Color Roles:**
164
- `primary` (str, optional): Primary brand color
165
- `secondary` (str, optional): Secondary accent color
166
- `tertiary` (str, optional): Tertiary accent color
167
- `error` (str, optional): Error state color
168
- `surface` (str, optional): Background surface color
169
- `on_primary` (str, optional): Text/icon color on primary background
170
- `outline` (str, optional): Border and outline color
171

172
### TextTheme
173

174
```python { .api }
175
class TextTheme(Control):
176
    """Typography theme configuration."""
177
    
178
    def __init__(
179
        self,
180
        display_large: TextStyle = None,
181
        display_medium: TextStyle = None,
182
        display_small: TextStyle = None,
183
        headline_large: TextStyle = None,
184
        headline_medium: TextStyle = None,
185
        headline_small: TextStyle = None,
186
        title_large: TextStyle = None,
187
        title_medium: TextStyle = None,
188
        title_small: TextStyle = None,
189
        label_large: TextStyle = None,
190
        label_medium: TextStyle = None,
191
        label_small: TextStyle = None,
192
        body_large: TextStyle = None,
193
        body_medium: TextStyle = None,
194
        body_small: TextStyle = None,
195
        **kwargs
196
    )
197
```
198

199
**Typography Scale:**
200
- `display_*` - Largest text, for hero sections
201
- `headline_*` - High-emphasis headers
202
- `title_*` - Medium-emphasis headers  
203
- `body_*` - Body text content
204
- `label_*` - Small text for labels and captions
205

206
### ThemeMode
207

208
```python { .api }
209
class ThemeMode(Enum):
210
    """Theme mode options."""
211
    SYSTEM = "system"  # Follow system theme
212
    LIGHT = "light"    # Light theme
213
    DARK = "dark"      # Dark theme
214
```
215

216
**Example:**
217
```python
218
page.theme_mode = ft.ThemeMode.DARK
219
page.update()
220
```
221

222
## Colors
223

224
### Colors
225

226
```python { .api }
227
class Colors:
228
    """Material Design color constants."""
229
    
230
    # Primary colors
231
    RED = "red"
232
    PINK = "pink"
233
    PURPLE = "purple"
234
    DEEP_PURPLE = "deeppurple"
235
    INDIGO = "indigo"
236
    BLUE = "blue"
237
    LIGHT_BLUE = "lightblue"
238
    CYAN = "cyan"
239
    TEAL = "teal"
240
    GREEN = "green"
241
    LIGHT_GREEN = "lightgreen"
242
    LIME = "lime"
243
    YELLOW = "yellow"
244
    AMBER = "amber"
245
    ORANGE = "orange"
246
    DEEP_ORANGE = "deeporange"
247
    BROWN = "brown"
248
    GREY = "grey"
249
    BLUE_GREY = "bluegrey"
250
    
251
    # Shades (50-900)
252
    RED_50 = "red50"
253
    RED_100 = "red100"
254
    # ... continuing through RED_900
255
    
256
    # Surface colors
257
    BACKGROUND = "background"
258
    SURFACE = "surface"
259
    SURFACE_VARIANT = "surfacevariant"
260
    ON_BACKGROUND = "onbackground"
261
    ON_SURFACE = "onsurface"
262
    ON_SURFACE_VARIANT = "onsurfacevariant"
263
    
264
    # Semantic colors
265
    PRIMARY = "primary"
266
    ON_PRIMARY = "onprimary"
267
    PRIMARY_CONTAINER = "primarycontainer"
268
    ON_PRIMARY_CONTAINER = "onprimarycontainer"
269
    SECONDARY = "secondary"
270
    ON_SECONDARY = "onsecondary"
271
    ERROR = "error"
272
    ON_ERROR = "onerror"
273
    
274
    # Special colors
275
    TRANSPARENT = "transparent"
276
    WHITE = "white"
277
    BLACK = "black"
278
```
279

280
### CupertinoColors
281

282
```python { .api }
283
class CupertinoColors:
284
    """iOS-style color constants."""
285
    
286
    SYSTEM_BLUE = "systemblue"
287
    SYSTEM_GREEN = "systemgreen"
288
    SYSTEM_INDIGO = "systemindigo"
289
    SYSTEM_ORANGE = "systemorange"
290
    SYSTEM_PINK = "systempink"
291
    SYSTEM_PURPLE = "systempurple"
292
    SYSTEM_RED = "systemred"
293
    SYSTEM_TEAL = "systemteal"
294
    SYSTEM_YELLOW = "systemyellow"
295
    SYSTEM_GREY = "systemgrey"
296
    SYSTEM_GREY2 = "systemgrey2"
297
    SYSTEM_GREY3 = "systemgrey3"
298
    SYSTEM_GREY4 = "systemgrey4"
299
    SYSTEM_GREY5 = "systemgrey5"
300
    SYSTEM_GREY6 = "systemgrey6"
301
    
302
    # Background colors
303
    SYSTEM_BACKGROUND = "systembackground"
304
    SECONDARY_SYSTEM_BACKGROUND = "secondarysystembackground"
305
    TERTIARY_SYSTEM_BACKGROUND = "tertiarysystembackground"
306
    
307
    # Label colors
308
    LABEL = "label"
309
    SECONDARY_LABEL = "secondarylabel"
310
    TERTIARY_LABEL = "tertiarylabel"
311
    QUATERNARY_LABEL = "quaternarylabel"
312
```
313

314
### Color Utilities
315

316
```python { .api }
317
def colors.with_opacity(opacity: float, color: str) -> str:
318
    """Create color with specified opacity."""
319
    # Returns color with alpha channel
320

321
# Usage examples:
322
semi_transparent_blue = ft.colors.with_opacity(0.5, ft.colors.BLUE)
323
fade_red = ft.colors.with_opacity(0.3, ft.colors.RED)
324
```
325

326
## Visual Styling
327

328
### TextStyle
329

330
```python { .api }
331
class TextStyle(Control):
332
    """Text styling configuration."""
333
    
334
    def __init__(
335
        self,
336
        size: float = None,
337
        weight: FontWeight = None,
338
        italic: bool = None,
339
        color: str = None,
340
        bgcolor: str = None,
341
        decoration: TextDecoration = None,
342
        decoration_color: str = None,
343
        decoration_style: TextDecorationStyle = None,
344
        decoration_thickness: float = None,
345
        font_family: str = None,
346
        font_family_fallback: List[str] = None,
347
        letter_spacing: float = None,
348
        word_spacing: float = None,
349
        height: float = None,
350
        baseline: TextBaseline = None,
351
        foreground: Paint = None,
352
        background: Paint = None,
353
        shadow: List[BoxShadow] = None,
354
        **kwargs
355
    )
356
```
357

358
**Parameters:**
359
- `size` (float, optional): Font size in logical pixels
360
- `weight` (FontWeight, optional): Font weight (NORMAL, BOLD, W100-W900)
361
- `italic` (bool, optional): Italic style
362
- `color` (str, optional): Text color
363
- `decoration` (TextDecoration, optional): Text decoration (UNDERLINE, OVERLINE, LINE_THROUGH)
364
- `font_family` (str, optional): Font family name
365
- `letter_spacing` (float, optional): Character spacing
366
- `shadow` (List[BoxShadow], optional): Text shadows
367

368
**Example:**
369
```python
370
ft.Text(
371
    "Styled Text",
372
    style=ft.TextStyle(
373
        size=24,
374
        weight=ft.FontWeight.BOLD,
375
        color=ft.colors.BLUE,
376
        decoration=ft.TextDecoration.UNDERLINE,
377
        font_family="Arial",
378
        letter_spacing=2
379
    )
380
)
381
```
382

383
### ButtonStyle
384

385
```python { .api }
386
class ButtonStyle(Control):
387
    """Button styling configuration."""
388
    
389
    def __init__(
390
        self,
391
        color: ControlStateProperty = None,
392
        bgcolor: ControlStateProperty = None,
393
        overlay_color: ControlStateProperty = None,
394
        shadow_color: ControlStateProperty = None,
395
        surface_tint_color: ControlStateProperty = None,
396
        elevation: ControlStateProperty = None,
397
        animation_duration: int = None,
398
        padding: ControlStateProperty = None,
399
        side: ControlStateProperty = None,
400
        shape: ControlStateProperty = None,
401
        text_style: ControlStateProperty = None,
402
        icon_color: ControlStateProperty = None,
403
        icon_size: ControlStateProperty = None,
404
        **kwargs
405
    )
406
```
407

408
**Parameters:**
409
- Properties can be state-dependent using ControlStateProperty
410
- States: DEFAULT, HOVERED, FOCUSED, PRESSED, DRAGGED, SELECTED, SCROLLED_UNDER, DISABLED
411

412
**Example:**
413
```python
414
ft.ElevatedButton(
415
    "Custom Button",
416
    style=ft.ButtonStyle(
417
        color=ft.colors.WHITE,
418
        bgcolor=ft.colors.BLUE,
419
        elevation=8,
420
        padding=ft.padding.symmetric(horizontal=20, vertical=10),
421
        shape=ft.RoundedRectangleBorder(radius=20)
422
    )
423
)
424
```
425

426
### Border and BorderSide
427

428
```python { .api }
429
class BorderSide(Control):
430
    """Border side styling."""
431
    
432
    def __init__(
433
        self,
434
        width: float = None,
435
        color: str = None,
436
        stroke_align: float = None,
437
        **kwargs
438
    )
439

440
class Border(Control):
441
    """Border styling for all sides."""
442
    
443
    def __init__(
444
        self,
445
        top: BorderSide = None,
446
        right: BorderSide = None,
447
        bottom: BorderSide = None,
448
        left: BorderSide = None,
449
        **kwargs
450
    )
451
    
452
    @staticmethod
453
    def all(width: float = None, color: str = None) -> "Border":
454
        """Create border on all sides."""
455
    
456
    @staticmethod
457
    def symmetric(vertical: BorderSide = None, horizontal: BorderSide = None) -> "Border":
458
        """Create symmetric borders."""
459
```
460

461
**Example:**
462
```python
463
ft.Container(
464
    content=ft.Text("Bordered content"),
465
    border=ft.border.all(2, ft.colors.BLUE),
466
    padding=20
467
)
468
```
469

470
### BorderRadius
471

472
```python { .api }
473
class BorderRadius(Control):
474
    """Border radius styling."""
475
    
476
    def __init__(
477
        self,
478
        top_left: float = None,
479
        top_right: float = None,
480
        bottom_left: float = None,
481
        bottom_right: float = None,
482
        **kwargs
483
    )
484
    
485
    @staticmethod
486
    def all(radius: float) -> "BorderRadius":
487
        """Uniform radius on all corners."""
488
    
489
    @staticmethod
490
    def circular(radius: float) -> "BorderRadius":
491
        """Circular border radius."""
492
    
493
    @staticmethod
494
    def horizontal(left: float = None, right: float = None) -> "BorderRadius":
495
        """Horizontal border radius."""
496
    
497
    @staticmethod
498
    def vertical(top: float = None, bottom: float = None) -> "BorderRadius":
499
        """Vertical border radius."""
500
    
501
    @staticmethod
502
    def only(
503
        top_left: float = None,
504
        top_right: float = None,
505
        bottom_left: float = None,
506
        bottom_right: float = None
507
    ) -> "BorderRadius":
508
        """Specific corner radius."""
509
```
510

511
### BoxDecoration
512

513
```python { .api }
514
class BoxDecoration(Control):
515
    """Box decoration with background, border, shadows, and gradients."""
516
    
517
    def __init__(
518
        self,
519
        color: str = None,
520
        image: DecorationImage = None,
521
        border: Border = None,
522
        border_radius: BorderRadiusValue = None,
523
        box_shadow: List[BoxShadow] = None,
524
        gradient: Gradient = None,
525
        blend_mode: BlendMode = None,
526
        shape: BoxShape = None,
527
        **kwargs
528
    )
529
```
530

531
### BoxShadow
532

533
```python { .api }
534
class BoxShadow(Control):
535
    """Box shadow effect."""
536
    
537
    def __init__(
538
        self,
539
        spread_radius: float = None,
540
        blur_radius: float = None,
541
        color: str = None,
542
        offset: OffsetValue = None,
543
        blur_style: ShadowBlurStyle = None,
544
        **kwargs
545
    )
546
```
547

548
**Example:**
549
```python
550
ft.Container(
551
    content=ft.Text("Shadow container"),
552
    padding=20,
553
    decoration=ft.BoxDecoration(
554
        color=ft.colors.WHITE,
555
        border_radius=10,
556
        box_shadow=[
557
            ft.BoxShadow(
558
                spread_radius=1,
559
                blur_radius=15,
560
                color=ft.colors.BLUE_GREY_300,
561
                offset=ft.Offset(0, 0),
562
            )
563
        ]
564
    )
565
)
566
```
567

568
## Gradients and Effects
569

570
### LinearGradient
571

572
```python { .api }
573
class LinearGradient(Control):
574
    """Linear gradient effect."""
575
    
576
    def __init__(
577
        self,
578
        begin: AlignmentValue = None,
579
        end: AlignmentValue = None,
580
        colors: List[str] = None,
581
        stops: List[float] = None,
582
        tile_mode: GradientTileMode = None,
583
        rotation: float = None,
584
        **kwargs
585
    )
586
```
587

588
**Parameters:**
589
- `begin` (AlignmentValue, optional): Gradient start alignment
590
- `end` (AlignmentValue, optional): Gradient end alignment
591
- `colors` (List[str], optional): List of gradient colors
592
- `stops` (List[float], optional): Color stop positions (0.0-1.0)
593
- `rotation` (float, optional): Gradient rotation in radians
594

595
### RadialGradient
596

597
```python { .api }
598
class RadialGradient(Control):
599
    """Radial gradient effect."""
600
    
601
    def __init__(
602
        self,
603
        center: AlignmentValue = None,
604
        radius: float = None,
605
        colors: List[str] = None,
606
        stops: List[float] = None,
607
        tile_mode: GradientTileMode = None,
608
        focal: AlignmentValue = None,
609
        focal_radius: float = None,
610
        **kwargs
611
    )
612
```
613

614
### SweepGradient
615

616
```python { .api }
617
class SweepGradient(Control):
618
    """Sweep (conical) gradient effect."""
619
    
620
    def __init__(
621
        self,
622
        center: AlignmentValue = None,
623
        start_angle: float = None,
624
        end_angle: float = None,
625
        colors: List[str] = None,
626
        stops: List[float] = None,
627
        tile_mode: GradientTileMode = None,
628
        **kwargs
629
    )
630
```
631

632
**Example:**
633
```python
634
ft.Container(
635
    width=200,
636
    height=200,
637
    gradient=ft.LinearGradient(
638
        begin=ft.alignment.top_center,
639
        end=ft.alignment.bottom_center,
640
        colors=[
641
            ft.colors.BLUE,
642
            ft.colors.BLUE_400,
643
            ft.colors.BLUE_100,
644
        ],
645
        stops=[0.1, 0.5, 0.9]
646
    )
647
)
648
```
649

650
### Blur
651

652
```python { .api }
653
class Blur(Control):
654
    """Blur effect."""
655
    
656
    def __init__(
657
        self,
658
        sigma_x: float = None,
659
        sigma_y: float = None,
660
        tile_mode: BlurTileMode = None,
661
        **kwargs
662
    )
663
```
664

665
### ShaderMask
666

667
```python { .api }
668
class ShaderMask(Control):
669
    """Shader mask effect for gradient text and icons."""
670
    
671
    def __init__(
672
        self,
673
        content: Control = None,
674
        shader: Gradient = None,
675
        blend_mode: BlendMode = None,
676
        **kwargs
677
    )
678
```
679

680
**Example:**
681
```python
682
ft.ShaderMask(
683
    content=ft.Text(
684
        "Gradient Text",
685
        size=40,
686
        weight=ft.FontWeight.BOLD
687
    ),
688
    shader=ft.LinearGradient(
689
        colors=[ft.colors.PURPLE, ft.colors.BLUE, ft.colors.RED],
690
        begin=ft.alignment.top_left,
691
        end=ft.alignment.bottom_right
692
    ),
693
    blend_mode=ft.BlendMode.SRC_IN
694
)
695
```
696

697
## Component Theming
698

699
### ButtonTheme
700

701
```python { .api }
702
class ButtonTheme(Control):
703
    """Global button theming."""
704
    
705
    def __init__(
706
        self,
707
        alignment_geometry: AlignmentGeometry = None,
708
        bar_height: float = None,
709
        button_color: str = None,
710
        color_scheme: ColorScheme = None,
711
        disabled_color: str = None,
712
        focus_color: str = None,
713
        height: float = None,
714
        highlight_color: str = None,
715
        hover_color: str = None,
716
        layout_behavior: ButtonBarLayoutBehavior = None,
717
        material_tap_target_size: MaterialTapTargetSize = None,
718
        min_width: float = None,
719
        padding: PaddingValue = None,
720
        shape: OutlinedBorder = None,
721
        splash_color: str = None,
722
        text_theme: ButtonTextTheme = None,
723
        **kwargs
724
    )
725
```
726

727
### ElevatedButtonTheme
728

729
```python { .api }
730
class ElevatedButtonTheme(Control):
731
    """Elevated button specific theming."""
732
    
733
    def __init__(
734
        self,
735
        style: ButtonStyle = None,
736
        **kwargs
737
    )
738
```
739

740
### TextButtonTheme
741

742
```python { .api }
743
class TextButtonTheme(Control):
744
    """Text button specific theming."""
745
    
746
    def __init__(
747
        self,
748
        style: ButtonStyle = None,
749
        **kwargs
750
    )
751
```
752

753
### CheckboxTheme
754

755
```python { .api }
756
class CheckboxTheme(Control):
757
    """Checkbox theming."""
758
    
759
    def __init__(
760
        self,
761
        fill_color: ControlStateProperty = None,
762
        check_color: ControlStateProperty = None,
763
        overlay_color: ControlStateProperty = None,
764
        splash_radius: float = None,
765
        material_tap_target_size: MaterialTapTargetSize = None,
766
        visual_density: VisualDensity = None,
767
        shape: OutlinedBorder = None,
768
        side: ControlStateProperty = None,
769
        **kwargs
770
    )
771
```
772

773
## Layout and Spacing
774

775
### Padding
776

777
```python { .api }
778
class Padding(Control):
779
    """Padding specification."""
780
    
781
    def __init__(
782
        self,
783
        left: float = None,
784
        top: float = None,
785
        right: float = None,
786
        bottom: float = None,
787
        **kwargs
788
    )
789
    
790
    @staticmethod
791
    def all(value: float) -> "Padding":
792
        """Uniform padding on all sides."""
793
    
794
    @staticmethod
795
    def symmetric(vertical: float = None, horizontal: float = None) -> "Padding":
796
        """Symmetric padding."""
797
    
798
    @staticmethod
799
    def only(left: float = None, top: float = None, right: float = None, bottom: float = None) -> "Padding":
800
        """Specific side padding."""
801
```
802

803
### Margin
804

805
```python { .api }
806
class Margin(Control):
807
    """Margin specification (same API as Padding)."""
808
    pass
809
```
810

811
### Alignment
812

813
```python { .api }
814
class Alignment(Control):
815
    """Alignment specification."""
816
    
817
    def __init__(
818
        self,
819
        x: float,
820
        y: float,
821
        **kwargs
822
    )
823
    
824
    # Predefined alignments
825
    top_left = Alignment(-1, -1)
826
    top_center = Alignment(0, -1)
827
    top_right = Alignment(1, -1)
828
    center_left = Alignment(-1, 0)
829
    center = Alignment(0, 0)
830
    center_right = Alignment(1, 0)
831
    bottom_left = Alignment(-1, 1)
832
    bottom_center = Alignment(0, 1)
833
    bottom_right = Alignment(1, 1)
834
```
835

836
## Animation and Transforms
837

838
### Animation
839

840
```python { .api }
841
class Animation(Control):
842
    """Animation configuration."""
843
    
844
    def __init__(
845
        self,
846
        duration: int = None,
847
        curve: AnimationCurve = None,
848
        **kwargs
849
    )
850
```
851

852
### AnimationCurve
853

854
```python { .api }
855
class AnimationCurve(Enum):
856
    """Animation curve types."""
857
    LINEAR = "linear"
858
    EASE = "ease"
859
    EASE_IN = "easeIn"
860
    EASE_OUT = "easeOut"
861
    EASE_IN_OUT = "easeInOut"
862
    BOUNCE_IN = "bounceIn"
863
    BOUNCE_OUT = "bounceOut"
864
    ELASTIC_IN = "elasticIn"
865
    ELASTIC_OUT = "elasticOut"
866
```
867

868
### Transform
869

870
```python { .api }
871
class Rotate(Control):
872
    """Rotation transform."""
873
    
874
    def __init__(
875
        self,
876
        angle: float,
877
        alignment: Alignment = None,
878
        **kwargs
879
    )
880

881
class Scale(Control):
882
    """Scale transform."""
883
    
884
    def __init__(
885
        self,
886
        scale: float = None,
887
        scale_x: float = None,
888
        scale_y: float = None,
889
        alignment: Alignment = None,
890
        **kwargs
891
    )
892

893
class Offset(Control):
894
    """Position offset."""
895
    
896
    def __init__(
897
        self,
898
        x: float,
899
        y: float,
900
        **kwargs
901
    )
902
```
903

904
## Theming Best Practices
905

906
### Custom App Theme
907

908
```python
909
def create_app_theme():
910
    return ft.Theme(
911
        color_scheme_seed=ft.colors.DEEP_PURPLE,
912
        use_material3=True,
913
        text_theme=ft.TextTheme(
914
            body_large=ft.TextStyle(
915
                font_family="Roboto",
916
                size=16
917
            )
918
        ),
919
        elevated_button_theme=ft.ElevatedButtonTheme(
920
            style=ft.ButtonStyle(
921
                padding=ft.padding.symmetric(horizontal=20, vertical=12),
922
                shape=ft.RoundedRectangleBorder(radius=8)
923
            )
924
        )
925
    )
926

927
# Apply theme
928
page.theme = create_app_theme()
929
page.update()
930
```
931

932
### Dark Mode Support
933

934
```python
935
def create_dark_theme():
936
    return ft.Theme(
937
        color_scheme=ft.ColorScheme(
938
            brightness=ft.Brightness.DARK,
939
            primary=ft.colors.BLUE_200,
940
            secondary=ft.colors.AMBER_200,
941
            surface=ft.colors.GREY_900,
942
            background=ft.colors.BLACK,
943
            on_primary=ft.colors.BLACK,
944
            on_surface=ft.colors.WHITE
945
        )
946
    )
947

948
# Toggle theme mode
949
def toggle_theme(e):
950
    page.theme_mode = (
951
        ft.ThemeMode.DARK 
952
        if page.theme_mode == ft.ThemeMode.LIGHT 
953
        else ft.ThemeMode.LIGHT
954
    )
955
    page.update()
956
```
957

958
### Component Styling
959

960
```python
961
# Consistent button styling
962
def create_primary_button(text, on_click):
963
    return ft.ElevatedButton(
964
        text,
965
        style=ft.ButtonStyle(
966
            bgcolor=ft.colors.PRIMARY,
967
            color=ft.colors.ON_PRIMARY,
968
            elevation=4,
969
            padding=ft.padding.symmetric(horizontal=24, vertical=12),
970
            shape=ft.RoundedRectangleBorder(radius=8)
971
        ),
972
        on_click=on_click
973
    )
974

975
# Styled containers
976
def create_card(content):
977
    return ft.Container(
978
        content=content,
979
        padding=20,
980
        border_radius=12,
981
        bgcolor=ft.colors.SURFACE,
982
        shadow=ft.BoxShadow(
983
            spread_radius=1,
984
            blur_radius=10,
985
            color=ft.colors.with_opacity(0.1, ft.colors.BLACK)
986
        )
987
    )
988
```
989

990
### Responsive Typography
991

992
```python
993
def get_responsive_text_size(base_size, page_width):
994
    if page_width < 600:
995
        return base_size * 0.8
996
    elif page_width < 1200:
997
        return base_size
998
    else:
999
        return base_size * 1.2
1000

1001
# Usage
1002
title_size = get_responsive_text_size(24, page.window_width)
1003
ft.Text(
1004
    "Responsive Title",
1005
    size=title_size,
1006
    weight=ft.FontWeight.BOLD
1007
)
1008
```
1009

1010
This covers Flet's comprehensive theming and styling system, enabling you to create beautiful, consistent, and professional-looking applications with full control over visual appearance and user experience.