chore(theme): alinhar modo escuro ao SO

- remove o provedor e o toggle manual de tema
- aplica a classe dark conforme matchMedia ao inicializar o app
- ajusta o toaster para acompanhar as cores do sistema

frontend/src/main.tsx

@@ -2,12 +2,21 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import { Toaster } from 'react-hot-toast';
+import { initSystemThemeWatcher } from './theme.ts';
+
+initSystemThemeWatcher();
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <>
             <App />
-            <Toaster position="top-right" toastOptions={{ duration: 4000 }} />
+            <Toaster
+                position="top-right"
+                toastOptions={{
+                    duration: 4000,
+                    className: "bg-white text-text shadow-lg dark:!bg-slate-800 dark:!text-slate-100",
+                }}
+            />
         </>
     </StrictMode>,
 );

frontend/src/theme.ts

@@ -0,0 +1,34 @@
+const applyThemeToDocument = (isDark: boolean) => {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const theme = isDark ? "dark" : "light";
+    const root = document.documentElement;
+    const body = document.body;
+
+    root.classList.toggle("dark", isDark);
+    root.setAttribute("data-theme", theme);
+
+    if (body) {
+        body.classList.toggle("dark", isDark);
+        body.setAttribute("data-theme", theme);
+        body.style.colorScheme = isDark ? "dark" : "light";
+    }
+};
+
+export const initSystemThemeWatcher = () => {
+    if (typeof window === "undefined" || typeof window.matchMedia === "undefined") {
+        return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const applyMatch = (matches: boolean) => applyThemeToDocument(matches);
+    const handleChange = (event: MediaQueryListEvent) => applyMatch(event.matches);
+
+    applyMatch(mediaQuery.matches);
+    if (typeof mediaQuery.addEventListener === "function") {
+        mediaQuery.addEventListener("change", handleChange);
+    } else if (typeof mediaQuery.addListener === "function") {
+        mediaQuery.addListener(handleChange);
+    }
+};