Início / coding / Perguntas / 79294628
Accepted
gernophil
Asked: 2024-12-19 22:28:32 +0800 CST

Como ajustar as cores dinamicamente dependendo do modo escuro?

  • 772

A cor padrão do cabeçalho para DataFrames ( render.DataGrid(), render.DataTable()) é um cinza bem claro (provavelmente gainsboro). Se eu alternar um aplicativo para o modo escuro usando um DataFrame, o cabeçalho se torna ilegível. Existe alguma maneira de fazer um dict dizer ao shiny qual cor usar para a cor gainsboroou para um objeto específico, se eu alternar para o modo escuro?

Aqui está um MRE (não tão minimalista):

from shiny import App, render, ui
import polars as pl

app_ui = ui.page_fillable(
    ui.layout_sidebar(
        ui.sidebar(ui.input_dark_mode()),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1", style='background:gainsboro'),
                ui.output_data_frame("card1"),
                full_screen=True
            ),
            col_widths=12
        )
    )
)

def server(input, output, session):

    @output
    @render.data_frame
    def card1():
        return render.DataGrid(pl.DataFrame({'a': ['a','b','c','d']}), filters=True)

app = App(app_ui, server)
python

1 respostas

  1. Best Answer

    Podemos fornecer um idpara o input_dark_mode(), digamos id="mode". E então podemos definir cssdinamicamente dependendo de input.mode()(que é "claro" ou "escuro") para os seletores necessários. Abaixo está um exemplo para o cabeçalho do cartão.

    Expressar

    from shiny.express import input, render, ui

with ui.layout_sidebar():
    with ui.sidebar():  
        ui.input_dark_mode(id="mode")
    with ui.layout_columns():
        with ui.card():
            ui.card_header("card_header1", id="card_header1")

@render.ui
def style():
    color = "gainsboro" if input.mode() == "light" else "red"
    css = f"#card_header1 {{ background: {color} }}"
    
    return ui.tags.style(css)

    Essencial

    from shiny import App, ui, reactive

app_ui = ui.page_fillable(
    ui.layout_sidebar(
        ui.sidebar(ui.input_dark_mode(id="mode")),
        ui.layout_columns(
            ui.card(
                ui.card_header("card_header1", id="card_header1"),
                full_screen=True
            ),
            col_widths=12
        )
    )
)


def server(input, output, session):

    @reactive.effect
    @reactive.event(input.mode)
    def _():
        ui.remove_ui("#header_color")  # Remove any previously added style tag
        
        color = "gainsboro" if input.mode() == "light" else "red"
        css = f"#card_header1 {{ background: {color} }}"

        # Add the CSS to the head of the document
        if css:
            style = ui.tags.style(css, id="#header_color")
            ui.insert_ui(style, selector="head")

app = App(app_ui, server)

    insira a descrição da imagem aqui

    • 1

relate perguntas