WIP | Feature/add dark and light mode on docs #278
Conversation
- Updated `tailwind.config.cjs` to add the `darkMode:"class"` property - Added a script to handle the default theme value in the `DocsPage` - Added two icons (Moon and Sun) from `heroicons` - Implemented the `ThemeToggle` component inside the Header
- Import directly from the npm package
- Added light and dark versions of styles on a lot the main docs page still need to work on the reminding components
|
@adevinwild is attempting to deploy a commit to the MSW Team on Vercel. A member of the Team first needs to authorize it. |
|
Light mode is now implemented 🥳 (landing, docs and blog)
|
|
@adevinwild thank you for working on this! @kettanaito Is there Prettier and ESLint configs that needs to be configured in this repo? Current PR has many code style changes unrelated to the PR content. I'm pretty sure they were made by the editor and not intentional changes. Maybe having these tools configured the same code style could be enforced? |
No problem! It was very fun ! It's true that there was no preconfigured prettier / ESLint, my editor configuration must surely have changed a lot of things you're right 😬 Waiting for @kettanaito to know what we can do about it |
|
Will try to merge this in a few weeks. Need to schedule my open source work. Thanks for contributing with the light theme! |
no problem @kettanaito ! |
Hi folks,
Started to work on the light mode / dark mode on the docs for now and it's looking pretty good at the moment.
I still needs to convert some components to the light mode 🙌🏼
So far I have :
dark:on most components related to theDocsPage(Header, banner, search, sidebar, docs body)I still need to dig through components and convert the ones I didn't make (for example callouts, code snippets) inside the docs
Then since the light mode and dark mode is available across all the apps, I intend to apply it to the blog and landing page, what do you think?