Feature/dark mode swithc #8
Conversation
| import { useLocalStorage } from './localstorage'; | ||
|
|
||
| export function useTheme() { | ||
| return useLocalStorage('theme', typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); |
There was a problem hiding this comment.
Testing this with dark mode, I notice a delay as we always show light mode on initial page load and then half a second later it changes to dark mode. Almost like a flashbang effect.
While we should definitely keep this switch, we need to find a way to allow tailwind to listen for the browser mode setting again. Something broke when adding MT but it makes no sense for them to block tailwind's default dark mode rules. Had to be some way around it.
There was a problem hiding this comment.
Since it's also preventing certain tailwind response threshold classes from working, it causes the bottom nav bar to overflow in narrow screens.
There was a problem hiding this comment.
Weirdly i dont get it. Or what do you mean it directly?
| ]; | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-center"> |
There was a problem hiding this comment.
Please make this a button with an aria-label to make it more accessible.
There was a problem hiding this comment.
I would not do that to the whole menu i would do a aria label to the button and the menu
There was a problem hiding this comment.
Ah, good thought. Putting it under MenuHandler like you did makes a lot more sense.
However, since we want it to be an invisible button it'd be easier to use the default button element rather than one from MT that requires us to style it to make it invisible.
There was a problem hiding this comment.
The menu dropdown stays open after page navigation. I'd prefer it closes when a user clicks on an option that takes them to another page. What do you think?
There was a problem hiding this comment.
It would be annoying for the user if he changes the darkmode. And i rather like that it stays open, if you didnt wanted to go there you can click to go somewhere else.
There was a problem hiding this comment.
Right we don't close it when they change modes. I was thinking about when they navigate to their profile page from the menu dropdown for example. If they use the profile menu to navigate somewhere else then they're done using it.
It's also staying open if I click to show it but then click another link on the page, like "Create post".
| ]; | ||
|
|
||
| return ( | ||
| <div className="flex justify-center items-center"> |
There was a problem hiding this comment.
Ah, good thought. Putting it under MenuHandler like you did makes a lot more sense.
However, since we want it to be an invisible button it'd be easier to use the default button element rather than one from MT that requires us to style it to make it invisible.
There was a problem hiding this comment.
Right we don't close it when they change modes. I was thinking about when they navigate to their profile page from the menu dropdown for example. If they use the profile menu to navigate somewhere else then they're done using it.
It's also staying open if I click to show it but then click another link on the page, like "Create post".
No description provided.