Color mode #984
Color mode #984
Conversation
There was a problem hiding this comment.
This is amazing work! Thank you so much.
Some things I noticed:
- The border doesn't look quite right on the code snippets
- The examples apps don't look all that great. Let's just have them always be light mode, which I think we can do by setting
data-bs-themeon the wrapper component for the app itself. The navbar, source code etc. is fine to be toggleable.
docs/templates/macros/navbar.html
Outdated
There was a problem hiding this comment.
Can we right-align this one in the navbar? Just to create some distinction with the navigation links
There was a problem hiding this comment.
Yes, but the icon looked so lonely over there 🙂 . I changed the style to make it more visible, but it might be too much now.
There was a problem hiding this comment.
Interesting, let's try adding a GitHub link to make it less lonely in a follow-up PR.
Are you referring the the apps on https://dash-bootstrap-components.opensource.faculty.ai/examples/, or do you mean all the code snippets examples on every page? |
|
The former. I think it's fine to have light themed app embedded in a possibly dark themed website. I just thought, I didn't check the theme explorer, does that look ok? |
|
Just to double confirm... you want to have all the code snippets light even when the app is in dark mode? I think that would be confusing. The idea is to demonstrate what the Bootstrap components look like in either the dark or light color modes. If they were all light in the dark themed docs app, then it would look like the dbc components do not respond to the color mode. The goal was for it to work like the upstream Bootstrap docs when in dark mode https://getbootstrap.com/docs/5.3/components/buttons/ Do those docs look ok? Or do you have any ideas on how to make the dark mode code examples look better in the docs app? If you prefer all the code snippet examples in light mode, then I think we should re-think this PR. Instead of having a global light/dark theme, we should just add a page on the color modes and show some examples of what the components look like in dark mode, and how to change the color mode either globally and/or by component. |
|
No, I think there's been a misunderstanding. Code snippets are fine, no changes. On the examples page where we embed examples in the docs app (like the iris k-means example), the examples apps are being rendered in dark mode even though they are not designed to look good in dark mode. Eg the graph background is all white. I'm saying let's disable dark mode on the embedded example apps. That's all, no changes outside of |
|
Ok, got it 😅 |
Co-authored-by: Tom Begley <tomcbegley@gmail.com>
|
Thanks for your kind words 😁 The open issues are fairly minor, so I think it would be great to merge this and do the final tweaks in separate PRs. I'm looking forward to seeing it live! |
* css and className changes for color mode * docs color mode theme switch * lint * Added more info on themes * Update docs/components_page/components/form.md Co-authored-by: Tom Begley <tomcbegley@gmail.com> * fixed stack style * align theme toggle to right & format as btn * lint * fixed stack examples * make examples pages always a light theme --------- Co-authored-by: Tom Begley <tomcbegley@gmail.com>
Added light-dark color mode switch to the docs. This new feature is available in Bootstrap>=5.3.0
For more info see this forum post: https://community.plotly.com/t/light-and-dark-color-modes-with-dash-bootstrap-components-1-5-0/78810
To do: