feat: add dark mode toggle and dark theme support across all components#5
feat: add dark mode toggle and dark theme support across all components#5RichardBray wants to merge 1 commit intomainfrom
Conversation
Add class-based dark mode with toggle button in navbar. Apply dark: variants to all components (navbar, hero, blurb, faq, footer, kitform, blog, contact, MDX renderer). Include dark background and orange accent styles. Also add two new blog posts: cc_bs.md and dont-mcp.mdx
| const [dark, setDark] = useState(false); | ||
| const [mounted, setMounted] = useState(false); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
is it possible to just use localstorage instgead of useEffecr, what is the benefit of use effect?
There was a problem hiding this comment.
The useEffect is necessary because localStorage is not available during server-side rendering (SSR). Since Waku pre-renders pages statically, calling localStorage directly at the top level would crash or cause a hydration mismatch. The useEffect ensures we only access localStorage after the component has mounted in the browser.
| const Blurb: React.FC = () => { | ||
| return ( | ||
| <section className="pb-16 bg-primary-50"> | ||
| <section className="pb-16 bg-primary-50 dark:bg-primary-900/30"> |
There was a problem hiding this comment.
bg-primary-900/30 is Tailwind syntax — primary-900 is the color and /30 sets its opacity to 30%. This gives a subtle dark background in dark mode without being too heavy.
| className="p-2 rounded-lg text-primary-600 hover:text-primary-800 dark:text-primary-300 dark:hover:text-primary-100 transition-colors" | ||
| > | ||
| {dark ? ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> |
There was a problem hiding this comment.
Can the svg be in a seperate component, what is the benefit of it being inline here
There was a problem hiding this comment.
Good call — I've extracted both SVGs into a separate src/components/icons.tsx file as SunIcon and MoonIcon components. The toggle now just imports and uses them. This keeps the component cleaner and makes the icons reusable.
| @@ -0,0 +1,163 @@ | |||
| # Setting Up Claude Code Telemetry with Better Stack | |||
There was a problem hiding this comment.
note: this is here temporarily and might need to be moved to a different directory, can we make a note of that somewhere? msaybe in the readme or somewhere you think makes sense
There was a problem hiding this comment.
Added a TODO comment at the top of the file noting it's temporary and may need to be moved.
1 participant
Add class-based dark mode with toggle button in navbar. Apply dark: variants to all components (navbar, hero, blurb, faq, footer, kitform, blog, contact, MDX renderer). Include dark background and orange accent styles.
Also add two new blog posts: cc_bs.md and dont-mcp.mdx