annmariew / dash-bootstrap-templates Goto Github PK

Error dash-bootstrap-templates 1.0.4 depends on importlib-metadata<4.0.0 and >=3.4.0

I am looking to deploy an app that uses dash-bootstrap-templates however my requirements.txt requires importlib-metadata==4.2.0. & dash-bootstrap-templates is dependent on importlib=metadata<4.00. Since the requirement isn't updated to the latest version I get a build error. Looking to update the dependency of importlib-metadata to the latest version for dash-bootstrap-templates.

Dash Bootstrap Templates is great! Would it be possible to incorporate the Solarized Light Theme?

Hexadecimal color codes are provided here:
Solarized Webpage.

Is there a way to toggle between dark and light (data-bs-theme="dark") instead of chosing a different theme with ThemeSwitchAIO?

https://getbootstrap.com/docs/5.3/customize/color-modes/

There seems to be a regression from version 1.0.8 to version 1.1.0. I have created this tiny example to show the difference:

#!/usr/bin/env python
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
import plotly.graph_objects as go


load_figure_template('darkly')

app = Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])

app.layout = html.Div([
    dbc.Card(
        dbc.CardBody(
            dcc.Graph(figure=go.Figure(go.Scatter(x=[1, 2, 3], y=[2, 5, 3]))),
        )
    )
])


if __name__ == '__main__':
    app.run(debug=True, port=8080)

When running on version 1.1.0, it looks like this:

But prior to this version, e.g. version 1.0.8, it looked like this:

The difference might seem small, but when you add labels on the axes, titles, etc. the old version looks much better.
Do you agree that this is a regression or is it intended behavior? It there an easy fix or workaround?

Is it possible to make the default switch to the left which is the "moon" side and the theme to be dark?

The border on the dropdown menu in light themes looks fine but is too bright in dark themes. I haven't found the selectors to be able to update this yet, so if anyone can help, I'd appreciate it!

You can see a live demo at https://hellodash.pythonanywhere.com/theme_explorer in the "Bootstrap-themed Dash app example:

Hi @AnnMarieW

thanks for these useful templates! I am kinda new to all this 😄

I would like to add a dark mode to my web app.

I added a ThemeSwitchAIO component to the layout (without changing the graph template yet).

It changes the default settings (background, primary colour, etc.) as expected. However, some of my components have custom css where the background colour is set to white. Also the dcc.Tabs component seems unaffected. See screenshots below.

surely there is something I'm not doing right.

Do you have any idea?

Thanks in advance for your support!

Remi

light mode

"dark" mode

Hi,

could you please help me to apply YETI style to dcc.Dropdown() component?

Thanks.

The datepicker does not display correctly when using themes. The dates above the minimum start date and maximum end date have the same style as the selected dates.
Example: https://imgur.com/a/vHnF1T0

Thanks for making this library, it's incredibly helpful to have a consistent background when using Plotly figures! I'm currently noticing an issue where the background of input elements is the same as the container background when using dark backgrounds. If I remove the custom dash-bootstrap-templates CSS, the background of the input returns to white for contrast. In the image below, the input element is followed by a select element to show the difference.

from dash import Dash
import dash_bootstrap_components as dbc

dbc_css = ("https://cdn.jsdelivr.net/gh/AnnMarieW/[email protected]/dbc.min.css")
app = Dash(__name__, external_stylesheets=[dbc.themes.DARKLY, dbc_css])

app.layout = dbc.Container(
    [
        dbc.Input(placeholder="Test", class_name="mt-3"),
        dbc.Select(class_name="mt-3", options=[{
            "label": "Sample", "value": "sample"
        }]),
    ],
    fluid=True,
    class_name="dbc"
)

if __name__ == "__main__":
    app.run_server(debug=True)

It looks like line 64 of the stylesheet is causing this, is it intentional?

/* Use this classname for dcc.Input */
.dbc input:not([type=radio]):not([type=checkbox]) {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

I am trying to use load_figure_template on WSL and it doesn't change the colors in the plots, but it works fine in windows
app.py.txt

My code:

from dash import Dash, callback, callback_context, dcc, dash_table, html, Input, Output, State
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
load_figure_template("darkly")

app = Dash(
    __name__,
    external_stylesheets=[
        dbc.themes.DARKLY,
        dbc.icons.FONT_AWESOME,
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True)

The error:

Traceback (most recent call last):
  File "/Users/mi/Downloads/app.py", line 3, in <module>
    from dash_bootstrap_templates import load_figure_template
ModuleNotFoundError: No module named 'dash_bootstrap_templates'

I do have dash-bootstrap-templates installed:

pip show dash-bootstrap-templates

Name: dash-bootstrap-templates
Version: 1.1.0
Summary: A collection of Plotly figure templates with a Bootstrap theme
Home-page: https://github.com/AnnMarieW/dash-bootstrap-templates
Author: AnnMarieW
Author-email: 
License: MIT
Location: /opt/homebrew/lib/python3.11/site-packages
Requires: dash, dash-bootstrap-components, numpy
Required-by: 

May I ask why dash-bootstrap-templates is not recognized by python?

https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@master/dbc.css

.dbc input::placeholder {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
}

.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

Shoudn't the placeholder be gray insted of black?

Also could the placeholder color for dbc.Input and dcc.Dropdown be synced. It seems that they are different even if it's bs-secondary-color?

.Select-placeholder {
  color: var(--bs-secondary-color) !important;
  background-color: var(--bs-body-bg) !important;
}

Seems to fix it but brobably need .dbc tags.

The border attribute in the .dbc .Select-control { css class should have a pixel of 1 instead of the 2. The image below compares the dcc dropdown component to the dbc select component.

Code to re-create:

# package imports
import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

dbc_css = 'https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.css'

app = dash.Dash(
    __name__,
    external_stylesheets=[
        dbc_css,
        dbc.themes.BOOTSTRAP
    ]
)

app.layout = html.Div(
    [
        'dcc Dropdown',
        dcc.Dropdown(placeholder='dcc Dropdown'),
        'dbc Select',
        dbc.Select(placeholder='dbc Select')
    ],
    className='dbc w-25 m-auto'
)

if __name__ == "__main__":
    app.run_server(debug=True)

Great library thanks!!

Wondering if there's a way to get the font in the figure hover text to update according to the template? Currently the remainder of the figure is correct font except for hover items.

demo_minty.py

demo cyborg

demo superhero

demo_quickstart.py

Dash Labs figure_template=True theme = Slate

Dash-Bootstrap-Templates theme-Slate - V1

Dash-Bootstrap-Templates theme-Slate - V2

Dash Bootstrap Templates -- Theme=MINTY V1

Dash Bootstrap Templates -- Theme=MINTY V2