fix(theme): resolve hydration error in light mode

[anurag2787]

What and why

Fixes the hydration error on light theme pages

Closes #193

How I tested this

Tested light and dark themes on /, /json-formatter, and /color-converter

AI assistance

Used AI to help investigate the issue, in complementing the idea and reviewing the fix

Type of change

• Bug fix
• New tool or feature
• Tests
• Refactor or cleanup
• Docs

Checklist

• I was assigned the linked issue
• npm run lint && npm run test && npm run build passes locally
• Logic changes live in lib/ and have a test in lib/__tests__/
• For a bug fix: the new test fails without my change
• No analytics, trackers, or calls that send user data off-device
• Works in both light and dark themes (if UI changed)
• Inputs have labels and it works with the keyboard alone (if UI changed)
• New tool: registry entry, page.tsx, client component, opengraph-image.tsx, and the bug report dropdown are all done

Notes for reviewers

Console Output Before

[browser] Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <SegmentViewNode type="layout" pagePath="layout.tsx">
      <SegmentTrieNode>
      <link>
      <script>
      <script>
      <RootLayout>
        <html lang="en" suppressHydrationWarning={true} className="jetbrainsm..." data-theme="dark">
          <head>
          <body className="antialiase...">
            <a>
            <ThemeProvider>
              <ToastProvider>
                <CommandPaletteProvider>
                  <Header>
                    <header className="sticky top...">
                      <div className="mx-auto ma...">
                        <LinkComponent>
                        <nav className="flex items...">
                          <LinkComponent>
                          <a>
                          <a>
                          <CommandPaletteButton>
                          <ThemeToggle>
                            <button
                              type="button"
                              onClick={function ThemeProvider.useCallback[toggle]}
+                             aria-label="Switch to dark theme"
-                             aria-label="Switch to light theme"
+                             title="Switch to dark theme"
-                             title="Switch to light theme"
                              className="relative inline-flex items-center justify-center w-9 h-9 rounded-md border bo..."
                            >
                              <Moon className="w-4 h-4">
                                <svg
                                  ref={null}
                                  xmlns="http://www.w3.org/2000/svg"
                                  width={24}
                                  height={24}
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth={2}
                                  strokeLinecap="round"
                                  strokeLinejoin="round"
+                                 className="lucide lucide-moon w-4 h-4"
-                                 className="lucide lucide-sun w-4 h-4"
                                >
+                                 <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z">
-                                 <circle cx="12" cy="12" r="4">
                  ...
                ...

    at <unknown> (https://react.dev/link/hydration-mismatch)
    at path (<anonymous>)
    at Array.map (<anonymous>)
    at ThemeToggle (components/shared/ThemeToggle.tsx:16:57)
    at Header (components/shared/Header.tsx:43:11)
    at RootLayout (app/layout.tsx:89:15)

Console Output After
no output console is clean in both themes

[anurag2787]

Hi @anurag629 could you please review and let me know if any changes required
Thanks!