feat(#750): implement toggle for light/dark mode#894
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi 👋 Here's a preview environment 🚀 https://next-reworkd-agentgpt-894.env.ergomake.link Environment Summary 📑
Questions? Comments? Suggestions? Join Discord. Click here to disable Ergomake. |
| icon?: ReactNode; | ||
| chevron?: boolean; | ||
| name?: string; | ||
| className?: string; |
There was a problem hiding this comment.
We don't want to manually pass these in anymore
| <div className="relative"> | ||
| <MenuPrimitive.Button className="flex h-8 items-center gap-1 rounded-lg border border-white/30 bg-[#3a3a3a] p-2 font-bold hover:border-[#1E88E5]/40 hover:bg-[#6b6b6b]"> | ||
| <MenuPrimitive.Button | ||
| className={`neutral-button-primary flex h-8 items-center gap-1 rounded-lg border p-2 font-bold`} |
There was a problem hiding this comment.
nit: remove the {} and use double quotes
| className={`absolute right-0 ${ | ||
| buttonPosition === "top" ? "top-full mt-1" : "bottom-full mb-9" | ||
| } background-color-3 z-20 max-h-48 w-fit overflow-hidden rounded-xl border-2 border-white/10 shadow-xl`} |
There was a problem hiding this comment.
we should use clsx instead of template strings. Easier to maintain that way
| import React from "react"; | ||
| import Menu from "./Menu"; | ||
|
|
||
| export const ThemeMenu = () => { |
There was a problem hiding this comment.
Nice! Much easier to understand / maintain
| export const useTheme = (theme: Theme) => { | ||
| theme = THEMES.includes(theme) ? theme : "system"; | ||
| export const useTheme = () => { | ||
| // theme = THEMES.includes(theme) ? theme : "system"; |
| useTheme(); | ||
|
|
There was a problem hiding this comment.
Why do we have this here? Does this just ensure the theme is updated at somepoint?
There was a problem hiding this comment.
If so, can we leave a comment?
| background-image: radial-gradient( | ||
| circle, | ||
| hsla(240, 11%, 85%, 0.75) 2px, | ||
| rgba(58, 58, 58, 0.75) 2px, |
There was a problem hiding this comment.
why change from rgba to hsla?
There was a problem hiding this comment.
Hi Asim, this is actually reverting back to rgba.
In terms of HSL, it's a bit easier for me to work with.
| import React from "react"; | ||
|
|
||
| type ToggleButtonProps = { | ||
| className?: string; | ||
| setChecked: (checked: boolean) => void; | ||
| onIcon: React.ReactNode; | ||
| offIcon: React.ReactNode; | ||
| checked: boolean; | ||
| }; | ||
|
|
||
| const ToggleButton = ({ ...props }: ToggleButtonProps) => { | ||
| const handleClick = () => { | ||
| props.setChecked(!props.checked); | ||
| }; | ||
|
|
||
| const icon = props.checked ? props.onIcon : props.offIcon; | ||
| return ( | ||
| <button type="button" className={props.className} onClick={handleClick}> | ||
| {icon} | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default ToggleButton; |
There was a problem hiding this comment.
Should we delete this? Also we have ax existing toggle right? Is this from TailwindUI components?
…750_add_theme_toggle_button
2 participants
Description
Add Theme Toggle
Other changes:
refactored
useThemehook