Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: color mode enhancement #38144

Merged
merged 5 commits into from
Mar 4, 2023
Merged

Conversation

louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Mar 1, 2023

Description

Adding a theme toggle in each example.
Some small tweaks on some examples for the color mode.

Motivation & Context

Better change the color mode inside examples

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • (NA) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

NA

Still todo

See if a fixed dropdown would be better.
Set a partial for this dropdown.
Need to be merged with #38058 ?

@julien-deramond
Copy link
Member

julien-deramond commented Mar 1, 2023

I was thinking about it with the first version that uses the current color mode. Totally agree that this is way better to change it directly within the examples but I didn't know how.

Not a big fan of having an extra bar right now; especially in the navbars examples. But I can't find another way of doing it.

Another option could be to display the toggle in absolute position on a corner of the window; on top of everything in the same spirit as back-to-top buttons. But it might block the navigation in some use cases. And it should be accessible for keyboard users as well.

Or maybe something semi-hidden on the top right or left corner of the page like this skip links menu in Storybook (accessible and maybe with a bigger surface to see that there's actually something to click on):

2023-03-01 12 06 41

@julien-deramond
Copy link
Member

Thanks @mdo for 81f2f86. Sounds better, and less intrusive than a header.
@louismaximepiton I let you finalize the PR and I'll review it when it's ready but I like it already, very handful!

@louismaximepiton louismaximepiton marked this pull request as ready for review March 3, 2023 13:46
@louismaximepiton louismaximepiton requested a review from a team as a code owner March 3, 2023 13:46
@mdo mdo force-pushed the main-lmp-examples-theme-enhancement branch from 3c252f4 to 3551e1b Compare March 4, 2023 19:43
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much!

@mdo mdo merged commit b26233c into main Mar 4, 2023
@mdo mdo deleted the main-lmp-examples-theme-enhancement branch March 4, 2023 19:49
@mahilanmjd mahilanmjd mentioned this pull request Apr 16, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants