es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Componentes Dash Bootstrap: Reemplazar el color principal en todos los componentes.

26 Jul, 2023 Programación

Actualmente estoy escribiendo una aplicación Dash, principalmente usando Dash Bootstrap Components. Estoy bastante contento con el diseño, pero quiero ajustar el color principal para que coincida con el esquema de colores de mi empresa. En la imagen de abajo, básicamente quiero reemplazar todo lo azul con un color diferente.

El desafío adicional es que debido al entorno de alojamiento, desafortunadamente estoy limitado a un único archivo Python grande, no puedo tener archivos .css adicionales.

Estoy usando BOOTSTRAP_STYLESHEET = [dbc.themes.SPACELAB]. Sé que puedo reemplazar los colores de componentes individuales usando, por ejemplo, style={'background-color':COMPANY_MAIN_COLOR}. ¿Existe alguna manera de reemplazar en su lugar el color principal de SPACELAB con uno diferente? ¿O al menos, reemplazar el valor predeterminado de cada componente en lugar de tener que hacerlo manualmente para cada componente?

Imagen

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para reemplazar el color primario del tema SPACELAB en una aplicación Dash utilizando solo un archivo Python y sin archivos CSS adicionales, puedes utilizar el siguiente enfoque:

    1. Define un diccionario de reglas de estilo CSS que apunten a los selectores de clase o ID de los componentes que deseas modificar, y establece las propiedades y valores deseados. Por ejemplo:
    APP_COLORS = {
    ".navbar-dark": {
        "background-color": COLOR_PRINCIPAL_EMPRESA,
        "border-color": COLOR_SECUNDARIO_EMPRESA,
    },
    ".nav-link.active, .nav-link:hover": {
        "background-color": COLOR_SECUNDARIO_EMPRESA,
        "color": COLOR_ALT_EMPRESA,
    },
    "#sidebar": {
        "background-color": COLOR_SECUNDARIO_EMPRESA,
        "color": COLOR_PRINCIPAL_EMPRESA,
    },
    ".card-header": {
        "background-color": COLOR_ALT_EMPRESA,
        "color": COLOR_PRINCIPAL_EMPRESA,
    },
    ".btn-primary": {
        "background-color": COLOR_PRINCIPAL_EMPRESA,
        "border-color": COLOR_PRINCIPAL_EMPRESA,
    },
    ".form-control:focus": {
        "border-color": COLOR_PRINCIPAL_EMPRESA,
        "box-shadow": f"0 0 0 0.2rem {COLOR_PRINCIPAL_EMPRESA.replace('rgb', 'rgba').replace(')', ', 0.25)')}",
    },
}
    1. Reemplaza la variable BOOTSTRAP_STYLESHEET con una cadena CSS personalizada que combine el tema SPACELAB con tus reglas de estilo personalizadas. Puedes utilizar las f-strings de Python para interpolar las reglas CSS en la cadena. Por ejemplo:
    app = dash.Dash(__name__, external_stylesheets=[
    dbc.themes.SPACELAB,
    {"href": "", "rel": "stylesheet", "type": "text/css", "content": f"""
        :root {{
            --primary: {COLOR_PRINCIPAL_EMPRESA};
            --secondary: {COLOR_SECUNDARIO_EMPRESA};
            --alt: {COLOR_ALT_EMPRESA};
        }}
        {' '.join([f"{selector} {{" + ''.join([f"{prop}: {value};" for prop, value in rules.items()]) + "}}" for selector, rules in APP_COLORS.items()])}
    """}
])

    En este ejemplo, la cadena CSS personalizada define tres variables CSS (--primary, --secondary y --alt) que corresponden a la paleta de colores de tu empresa. Estas variables se pueden utilizar luego en las reglas de estilo de los componentes. La función join se utiliza para combinar las diferentes reglas de estilo en una sola cadena que puede incluirse en la lista external_stylesheets.

    Al utilizar este enfoque, puedes modificar fácilmente el color primario del tema SPACELAB en todos los componentes sin tener que modificar cada uno por separado.

Comments are closed.