如何根据深色模式动态调整颜色？

Question

DataFrame 的默认标题颜色（

render.DataGrid()

、

render.DataTable()

）是非常浅的灰色（可能是

gainsboro

）。如果我使用 DataFrame 将应用程序切换到暗模式，标题将变得不可读。如果我切换到深色模式，有没有办法制定一个指令来告诉闪亮的颜色

gainsboro

或特定对象使用什么颜色？

这是一个（不是那么简单的）MRE：

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)

Answer 1

我们可以向

id

提供

input_dark_mode()

，比如

id="mode"

。然后我们可以根据所需选择器的

css

（“亮”或“暗”）动态定义

input.mode()

。以下是卡标题的示例。

快递

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)

核心

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)