ui.aggrid Unable to adapt to dark themes

[mxiaonian]

Description

I wrote a button to switch themes, and other components adapted well, but ui.aggrid Unable to adapt to dark themes

subtitles_list = ui.aggrid(
    {
        'columnDefs': [
            {'headerName': '序号', 'field': 'index', 'width': 30},
            {'headerName': '时间码', 'field': 'time', 'width': 80},
            {
                'headerName': '内容',
                'field': 'content',
                # 启用单元格编辑器
                'editable': True,
                'cellEditor': 'agLargeTextCellEditor',
                'cellEditorPopup': True,
                'cellEditorParams': {
                    'maxLength': 100
                },
            },
        ],
        'rowData': parse_srt_file(get_srt_file_path()),
        'defaultColDef': {'flex': 1},
        'rowSelection': 'single',
        'onCellValueChanged': True,
        'enableCellChangeFlash': True,
    }
)
dark = ui.dark_mode()
ui.toggle({True: '深色模式', False: '浅色模式', None: '自动模式'}).bind_value(dark, 'value').classes(
    'absolute inset-x-0 bottom-0 w-full')

How can I make ui.aggrid adapt to dark themes?

[python-and-fiction]

React Grid: Themes | AG Grid
https://ag-grid.com/react-data-grid/themes/

[falkoschindler]

Hi @mxiaonian,

You can update the theme of ui.aggrid by adding and removing classes like this:

aggrid = ui.aggrid({})

def handle_theme_change(e: events.ValueChangeEventArguments):
    aggrid.classes(add='ag-theme-balham-dark' if e.value else 'ag-theme-balham',
                   remove='ag-theme-balham' if e.value else 'ag-theme-balham-dark')

ui.switch(on_change=handle_theme_change).bind_value(ui.dark_mode())

[mxiaonian]

Thank you very much, although if we follow your writing style directly, the e: events. ValueChangeEventArguments section will report an unresolved reference error. But following your approach, I successfully implemented theme switching for aggrid to adapt to dark mode. That's how I did it.

main.py

video_page.subtitles_list_grid = ui.aggrid({})
@ui.page('/')
def index():
    with ui.header():
    ......
    with ui.left_drawer() as left_drawer:
        with ui.tabs().props('vertical').classes('w-full') as tabs:
......
            with ui.row().classes('w-full'):
                dark = ui.dark_mode()
                theme_switch = ui.toggle({True: '深色模式', False: '浅色模式', None: '自动模式'}).bind_value(dark, 'value').classes(
                    'absolute inset-x-0 bottom-0 w-full')
                theme_switch.on_value_change(lambda :video_page.handle_theme_change(video_page.subtitles_list_grid, dark.value))
ui.run()

video_page.py

subtitles_list_grid = None
@ui.page('/')
def video_page():
    global subtitles_list_grid 
    subtitles_list_grid = ({......})
......
def handle_theme_change(aggrid, theme_switch):
    if theme_switch:
        aggrid.classes(add='ag-theme-balham-dark', remove='ag-theme-balham')
    else:
        aggrid.classes(add='ag-theme-balham', remove='ag-theme-balham-dark')

[falkoschindler]

Yes, events needs to be imported from nicegui:

from nicegui import events