Skip to content

Examples: color mode enhancement#38144

Merged
mdo merged 5 commits intomainfrom
main-lmp-examples-theme-enhancement
Mar 4, 2023
Merged

Examples: color mode enhancement#38144
mdo merged 5 commits intomainfrom
main-lmp-examples-theme-enhancement

Conversation

@louismaximepiton
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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