market
market copied to clipboard
oceanprotocol
added dark mode toggle button with switch class
- Fixes #1418
Changes proposed in this PR:
- added dark mode toggle
- adding branding storybook
Current result:
- [x] Toggle button which applies the correct class on the
<body>under the<iFrame>
Working toward:
- [ ] Storybook branding (fixing logo size, trying to remove button on top of logo)
- [ ] Change theme programatically (as for now what's documented is not working properly)
- [ ] > Bonus would be adding a
prefers-color-schememedia query and use that to switch dark/light automatically
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Updated |
|---|---|---|---|
| market | ❌ Failed (Inspect) | Oct 13, 2022 at 3:35PM (UTC) |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
Is this still relevant, are we using storybook?
yes, we're using storybook with testing-library. And working on it in #1480
To finalize, remove the custom theme toggle button and use the one injected by storybook-dark-mode (the moon), which now toggles the Storybook UI:
This button then should also toggle the theme in the iFrame and we can remove the custom button we created, this article has all the solutions: https://davidyeiser.com/tutorials/storybook-react-with-dark-mode#7-connect-the-react-components-to-the-storybook-dark-mode-control
or this, plenty of instructions out there to do what we want to do here: https://workingconcept.com/blog/storybook-components-dark-mode
Deploy Preview for market-oceanprotocol processing.
| Name | Link |
|---|---|
| Latest commit | ed3f1a9f17b4e43d3f19cbc916cbcb595e17175a |
| Latest deploy log | https://app.netlify.com/sites/market-oceanprotocol/deploys/6348301c2289090008c2ff7f |
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Code Climate has analyzed commit ed3f1a9f and detected 0 issues on this pull request.
The test coverage on the diff in this pull request is 100.0% (50% is the threshold).
This pull request will bring the total coverage in the repository to 4.0% (-0.2% change).
View more on Code Climate.
![codeclimate[bot] avatar](https://avatars.githubusercontent.com/in/9403?v=4 "Published by a pub.dev verified publisher"){kind=small}
To finalize, remove the custom theme toggle button and use the one injected by
storybook-dark-mode(the moon)
Added the toggle button and connected to the theme iFrame, but I'm facing a pretty annoying issue with the custom theme values. Basically, custom logo, font, colors, etc are not being picked up by theme provider in preview.js. Still not sure why as it was working fine a little while ago, we never changed it since then.
I try different king of things: update libs, change some setup values, change manually some values on the context itself before going to the provider, but it didn't have any effect on the preview at all. Not sure what else to try, @kremalicious can you please help me out on this? Do you see anything wrong with the setup? According to this, should be working.