[docs] Added a demo in Enable color on dark section. #29129
Conversation
Wimukti
changed the title
…enable-color-on-dark-mode-demo
Wimukti
changed the title
|
@Wimukti Thanks for your contribution! I have some suggestions about the demo. I think it is better to just show 2 app bars in the demo (without the switch and toggle).
I expect the demo code to be able to show the preview. <AppBar enableColorOnDark />
<AppBar />and at the bottom, add another section to describe theming to apply to all AppBar. |
|
@siriwatknp sure. That would be much better. I will change the demo according to the suggestions asap. |
| @@ -139,24 +139,7 @@ function HideOnScroll(props) { | |||
|
|
|||
| ## Enable Color on Dark | |||
|
|
|||
| Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. | |||
| Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. | |||
| You can override this behavior by setting the `enableColorOnDark` prop to `true`. | |||
|
|
|||
There was a problem hiding this comment.
There should be a code block showing how the AppBar color behavior in dark mode can be overwritten with enableColorOnDark, for both cases ;
- Specific AppBar element via prop
- Affecting all AppBar elements via theme
There was a problem hiding this comment.
@Kaid00 do these two cases need to have separate demos? or just needed to show them in the demo code preview? It would be much helpful if u elaborate more on this?
There was a problem hiding this comment.
Any Suggestions @Kaid00
There was a problem hiding this comment.
@Kaid00 do these two cases need to have separate demos? or just needed to show them in the demo code preview? It would be much helpful if u elaborate more on this?
I think showing them in separate code blocks, will be at a glance more helpful for developers
There was a problem hiding this comment.
@Kaid00 is there anything that needs to be changed?
There was a problem hiding this comment.
Looking good, please take out the last code block, there's already a code block above showing how to enable color on dark for specific app bar elements, having another at the bottom is redundant
There was a problem hiding this comment.
@siriwatknp @Kaid00 I have made the PR. Let me know if anything needs to changed
| const theme = createTheme({ | ||
| palette: { | ||
| mode: themeMode, | ||
| primary: { |
There was a problem hiding this comment.
The AppBar color should match MUI primary color and not red #FF0000
There was a problem hiding this comment.
@Kaid00 sure will work on that
|
@Kaid00 I have committed the changes. Can you please recheck now? |
|
@Wimukti I adjusted the example a bit. Looks good! Thanks for your first contribution 👏 |
|
cc @mui-org/core anyone knows how to fix Argos in this case? |
|
@Wimukti I have no idea why the CI cannot find the token, I tried many times. Can you open another PR with the same changes? 🙏 sorry for the inconvenience. I will close this one. |
|
@siriwatknp Sure no problem. I have opened another PR - #29340 |
close #28962
Summary
Added a demo in the "Enable Color on Dark" section.
The section in the documentation about this: https://mui.com/components/app-bar/#enable-color-on-dark.
Previously it had only the steps to enable color on dark mode. By adding a demo, it will give more clarity to developers on this matter.
Changes
Added a demo - Demo contains a Switch to toggle between enabling and disabling of color on dark mode.
Also added a separate theme mode change button on the app bar to check the difference between light and dark modes.
Preview