Search code examples
flet

Change color of AlertDialog in flet


When I use the following code of the flet docu my AlertDialog has a different, light blue color. How can I change the color of the dialog box?

import flet as ft

def main(page: ft.Page):
page.title = "AlertDialog examples"

dlg = ft.AlertDialog(
    title=ft.Text("Hello, you!"), on_dismiss=lambda e: print("Dialog dismissed!")
)

def close_dlg(e):
    dlg_modal.open = False
    page.update()

dlg_modal = ft.AlertDialog(
    modal=True,
    title=ft.Text("Please confirm"),
    content=ft.Text("Do you really want to delete all those files?"),
    actions=[
        ft.TextButton("Yes", on_click=close_dlg),
        ft.TextButton("No", on_click=close_dlg),
    ],
    actions_alignment=ft.MainAxisAlignment.END,
    on_dismiss=lambda e: print("Modal dialog dismissed!"),
)

def open_dlg(e):
    page.dialog = dlg
    dlg.open = True
    page.update()

def open_dlg_modal(e):
    page.dialog = dlg_modal
    dlg_modal.open = True
    page.update()

page.add(
    ft.ElevatedButton("Open dialog", on_click=open_dlg),
    ft.ElevatedButton("Open modal dialog", on_click=open_dlg_modal),
)

ft.app(target=main)

Color from example: enter image description here

My color: enter image description here


Solution

  • From my experience, this type of colors are usually affected by the theme.Theme object, specifically the color_scheme_seed property. Basically the color of the AlertDialog depends on your theme (light/dark) and the scheme seed you chose, Therefore if I for example declare my theme like this:

    page.dark_theme = theme.Theme(color_scheme_seed="orange")
    page.theme_mode = ThemeMode.DARK
    

    My AlertDialog widget would look like this (notice the dark orangy background color): An AlertDialog in one of my apps