Hi! I want to be able to toggle between light and dark modes in my dash app, just as described in dbc themes. However, I want to be able to run my app on an offline machine. I’ve downloaded the stylesheets I need, and icons similar to those used in the example on the site referenced above (e.g. sun-fill), but I’m not sure about how to link the svg in the code. I’ve tried instantiating a dash.html.Img object like so:
sun = html.Img(src="../assets/sun.svg", className="my sun", style={"margin-right": "5px", "margin-left": "5px"}),
and the replacing the className value in the example’s Label to my variable’s className like so
Thanks for your reply, @bweinberg, but the src path is not the issue. The actual switching between dark and light works well for me (I implemented it according to dbc color modes. It is only the rendering of the icons that I haven’t succeeded with.
@AnnMarieW, do you know how to go about making the local icons respond to the color mode switch with dbc (like @bweinberg does with dmc)? (I found you through the dbc color modes site)
Not sure exactly what you are looking for. That dbc switch doesn’t change the icons in the labels when switching from light to dark mode. The solution with css that @bweinberg is doing looks like it’s applying a filter in light and dark modes.
Yea, my solution can invert the colors of images when a color switch is made (to make a dark image on a light background switch to a white icon on a dark background and vice versa). If you want to switch between two distinct svg images, you can write a callback to change what path string src is pointing to, or changing the children on the dbc.Label (sun to moon for instance).
I’m just trying to replicate the behaviour from the examples in bootstrap light/dark modes (where colors of the figures are inverted when using the switch), when running the code offline. The example only references one figure for each symbol, so I guess I won’t need 4 figures (2 versions of each icon) when doing this offline. I guess I need to do something similar to @bweinberg, the code just looked so unfamiliar to me. About time to learn some CSS, then. Thank you both!
Gotcha. I’m unfamiliar with how DBC does theming, so I can’t directly help finding the css solution. I would utilize your browser inspection tool to see what is changing during a light/dark mode switch. Also, look at utilizing some AI tools. VScode + Cline + Anthropic Sonnet 3.5 API has been working phenomenally for me, especially for building up the custom.css asset. Cursor and Aider are some other options.
Update:
I’m using Pycharm, and tried using their AI Assistant for help. It suggested using a CSS class like you, @bweinberg, like so:
.inverted {
filter: invert(1);
}
And tying that to the icons via the className argument in a Dash callback like so:
@app.callback(
[Output("sun-icon", "className"), Output("moon-icon", "className")],
Input("color-mode-switch", "value"),
)
def invert_icons(switch_value):
if switch_value:
return "", ""
else:
return "inverted", "inverted" # apply the inverted class when the switch is False
This work! It also said it could be done without the CSS class, using inline CSS in the style argument of the Labels instead of the className argument, and modifying the style in the callback, but I went with the suggested way.
Note that you can also style things that only apply to light mode in a similar way using data-bs-theme="light"
Another option – if you would like to use any of the icons included in the dbc library off line – just copy the content of the file at the links and add it to a .css file in /assets