NiceGUI x DaisyUI - Works on single page app, but not on multipage apps.

[gykung]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

'''
SINGLE PAGE APP: I am able to load DaisyUI CSS and the page displays in the selected color scheme.
'''

# app.py
from nicegui import ui

# load Tailwind + daisyUI
ui.add_head_html('<script src="https://cdn.tailwindcss.com"></script>')
ui.add_head_html('<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />')
ui.dark_mode().enable()
# sample chart configs
def line_option():
    return {
        'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
        'yAxis': {'type': 'value'},
        'series': [{'type': 'line', 'smooth': True, 'data': [120, 200, 150, 80, 70, 110, 130]}],
    }

def bar_option():
    return {
        'xAxis': {'type': 'category', 'data': ['Q1', 'Q2', 'Q3', 'Q4']},
        'yAxis': {'type': 'value'},
        'series': [{'type': 'bar', 'data': [23, 45, 31, 52]}],
    }

def pie_option():
    return {
        'series': [{
            'type': 'pie',
            'radius': '60%',
            'data': [
                {'value': 40, 'name': 'Alpha'},
                {'value': 25, 'name': 'Beta'},
                {'value': 20, 'name': 'Gamma'},
                {'value': 15, 'name': 'Delta'},
            ],
        }],
    }

def area_option():
    return {
        'xAxis': {'type': 'category', 'data': [1, 2, 3, 4, 5, 6, 7]},
        'yAxis': {'type': 'value'},
        'series': [{
            'type': 'line',
            'smooth': True,
            'areaStyle': {},
            'data': [5, 10, 8, 15, 18, 12, 20],
        }],
    }

# wrapper div sets the daisyUI theme
with ui.row().classes('min-h-screen w-full p-6 bg-base-100').props('data-theme=night'):
    with ui.grid(columns=2).classes('gap-6 w-full'):
        with ui.card().classes('bg-base-200 shadow-xl w-full'):
            ui.label('Line Chart').classes('card-title')
            ui.echart(line_option()).style('height:220px')

        with ui.card().classes('bg-base-200 shadow-xl w-full'):
            ui.label('Bar Chart').classes('card-title')
            ui.echart(bar_option()).style('height:220px')

        with ui.card().classes('bg-base-200 shadow-xl w-full'):
            ui.label('Pie Chart').classes('card-title')
            ui.echart(pie_option()).style('height:220px')

        with ui.card().classes('bg-base-200 shadow-xl w-full'):
            ui.label('Area Chart').classes('card-title')
            ui.echart(area_option()).style('height:220px')

ui.run()

MULTIPAGE APP: I am UNABLE to display in the selected color scheme.

# app.py
from nicegui import ui

# Tailwind + daisyUI
ui.add_head_html('<script src="https://cdn.tailwindcss.com"></script>')
ui.add_head_html('<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />')

# ------------------ Chart configs ------------------
def line_option():
    return {
        'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
        'yAxis': {'type': 'value'},
        'series': [{'type': 'line', 'smooth': True, 'data': [120, 200, 150, 80, 70, 110, 130]}],
    }

def bar_option():
    return {
        'xAxis': {'type': 'category', 'data': ['Q1', 'Q2', 'Q3', 'Q4']},
        'yAxis': {'type': 'value'},
        'series': [{'type': 'bar', 'data': [23, 45, 31, 52]}],
    }

def pie_option():
    return {
        'series': [{
            'type': 'pie',
            'radius': '60%',
            'data': [
                {'value': 40, 'name': 'Alpha'},
                {'value': 25, 'name': 'Beta'},
                {'value': 20, 'name': 'Gamma'},
                {'value': 15, 'name': 'Delta'},
            ],
        }],
    }

def area_option():
    return {
        'xAxis': {'type': 'category', 'data': [1, 2, 3, 4, 5, 6, 7]},
        'yAxis': {'type': 'value'},
        'series': [{
            'type': 'line',
            'smooth': True,
            'areaStyle': {},
            'data': [5, 10, 8, 15, 18, 12, 20],
        }],
    }

# ------------------ Shared top menu ------------------
def top_menu():
    with ui.header().classes('items-center justify-between px-4 bg-base-300').props('data-theme=night'):
        with ui.row().classes('gap-4'):
            ui.button('Home', on_click=lambda: ui.navigate.to('/')).classes('btn btn-ghost btn-sm text-secondary')
            ui.button('Line', on_click=lambda: ui.navigate.to('/line')).classes('btn btn-ghost btn-sm text-secondary')
            ui.button('Bar', on_click=lambda: ui.navigate.to('/bar')).classes('btn btn-ghost btn-sm text-secondary')
            ui.button('Pie', on_click=lambda: ui.navigate.to('/pie')).classes('btn btn-ghost btn-sm text-secondary')
            ui.button('Area', on_click=lambda: ui.navigate.to('/area')).classes('btn btn-ghost btn-sm text-secondary')
        ui.space()
        ui.icon('chart-line').classes('text-secondary text-2xl')

# ------------------ Pages ------------------
@ui.page('/')
def home():
    top_menu()
    with ui.column().classes('p-6').props('data-theme=night'):
        ui.label('Welcome to the Chart Demo').classes('text-2xl font-bold')
        ui.label('Use the menu above to explore different charts.').classes('opacity-70')

@ui.page('/line')
def line_page():
    top_menu()
    with ui.card().classes('m-6 bg-base-200 shadow-xl w-full').props('data-theme=night'):
        ui.label('Line Chart').classes('card-title')
        ui.echart(line_option()).style('height:300px')

@ui.page('/bar')
def bar_page():
    top_menu()
    with ui.card().classes('m-6 bg-base-200 shadow-xl w-full').props('data-theme=night'):
        ui.label('Bar Chart').classes('card-title')
        ui.echart(bar_option()).style('height:300px')

@ui.page('/pie')
def pie_page():
    top_menu()
    with ui.card().classes('m-6 bg-base-200 shadow-xl w-full').props('data-theme=night'):
        ui.label('Pie Chart').classes('card-title')
        ui.echart(pie_option()).style('height:300px')

@ui.page('/area')
def area_page():
    top_menu()
    with ui.card().classes('m-6 bg-base-200 shadow-xl w-full').props('data-theme=night'):
        ui.label('Area Chart').classes('card-title')
        ui.echart(area_option()).style('height:300px')

# ------------------ Run ------------------
ui.run()

Description

I am trying to find a way to use DaisyUI themes in my app. After struggling for some days, I realised it works in a single page app, but not in multipage app.

I can't put my own code here as it is hard to anonymize some of the variables, so here're chatgpt generated code to illustrate the issue.

It would be great it DaisyUI (or any other Tailwind themes) can be used with NiceGUI :) Unfortunately, I am not familiar enough Tailwind enough to troubleshoot this any further. Would anyone have any insights? Thanks in advance.

NiceGUI Version

2.22.2

Python Version

3.11.3

Browser

Edge

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @gykung,

You should move ui.add_head_html into your page function(s) so that it applies to these pages. Alternatively you can use the shared parameter to automatically add the head HTML to all pages.

ui.add_head_html('<script src="https://cdn.tailwindcss.com"></script>', shared=True)
ui.add_head_html('<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" />', shared=True)