Implement dark theme #12
Conversation
This will avoid rerendering this list each time a state changes.
marco-souza
requested review from
Joel-leal and
frattezi
and removed request for
frattezi and
melipefelgaco
|
Visit the preview URL for this PR (updated for commit 915975d): https://podcodar-webapp--pr12-marco-add-dark-theme-km5zjbex.web.app (expires Tue, 24 Aug 2021 15:55:42 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
frattezi
left a comment
frattezi
left a comment
There was a problem hiding this comment.
Apenas algumas perguntinhas
| const { isOpen, onOpen, onClose } = useDisclosure(); | ||
| const navbarBgColor = useColorModeValue('gray.50', 'gray.900'); | ||
| const actionButtons = useMemo( | ||
| () => [...socialIcons, <ToggleThemeButton key="toggle-theme" />], |
There was a problem hiding this comment.
não entendi mto bem o useMemo aqui com o array vazio, oque ele está otimizando neste caso? N seria o objetivo colocar a variável de colorMode como condicionador ou algo assim?
There was a problem hiding this comment.
Na verdade o botão ja tem seus estados internos né. A ideia aqui é simplesmente evitar re-renderizar a actionButtons sempre que algum estado mudar.
Neste componentes temos por exemplo o estado de isOpen. Sempre que ele for atualizado, sem o useMemo a listagem será obrigatoriamente criada de novo, mesmo não precisando, já que suas props (inexistentes no caso) não mudaram.
Como o ToggleThemeButton não tem props, a lista de dependência do useMemo é vazia. Se ele tivesse alguma props, ai essa lista deveria conter todos os estado usados como dependências.
Descrição
Este PR adiciona a funcionalidade de alterar o tema da página.
Vale notar o uso do hook de cores
useColorModeValueusado para definir uma cor para cada tema (light/dark).Changes
Notes