feat: add dark theme support

assets/App.tsx

@@ -1,4 +1,4 @@
-import {Button, Layout, Space, theme, Typography} from "antd";
+import {Button, ConfigProvider, Layout, Space, theme, Typography} from "antd";
 import {Link, Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom";
 import TextPage from "./pages/TextPage";
 import DomainSearchPage from "./pages/search/DomainSearchPage";
@@ -21,9 +21,6 @@ const ProjectLink = <Link to='https://github.com/maelgangloff/domain-watchdog'>D
 const LicenseLink = <Link to='https://www.gnu.org/licenses/agpl-3.0.txt'>AGPL-3.0-or-later</Link>
 
 export default function App() {
-    const {
-        token: {colorBgContainer, borderRadiusLG},
-    } = theme.useToken()
 
     const navigate = useNavigate()
     const location = useLocation()
@@ -32,7 +29,6 @@ export default function App() {
 
     const [isAuthenticated, setIsAuthenticated] = useState(false)
 
-
     const authenticated = useCallback((authenticated: boolean) => {
         setIsAuthenticated(authenticated)
     }, []);
@@ -42,6 +38,23 @@ export default function App() {
         setIsAuthenticated
     }), [authenticated, setIsAuthenticated])
 
+    const [darkMode, setDarkMode] = useState(false);
+
+    const windowQuery = window.matchMedia("(prefers-color-scheme:dark)");
+    const darkModeChange = useCallback((event: MediaQueryListEvent) => {
+        setDarkMode(event.matches)
+    }, [])
+
+    useEffect(() => {
+        windowQuery.addEventListener("change", darkModeChange)
+        return () => {
+            windowQuery.removeEventListener("change", darkModeChange)
+        }
+    }, [windowQuery, darkModeChange])
+
+    useEffect(() => {
+        setDarkMode(windowQuery.matches)
+    }, [])
 
     useEffect(() => {
         getUser().then(() => {
@@ -52,25 +65,27 @@ export default function App() {
             const pathname = location.pathname
             if (!['/login', '/tos', '/faq', '/privacy'].includes(pathname)) navigate('/home')
         })
-    }, []);
+    }, [])
 
 
-    return <AuthenticatedContext.Provider value={contextValue}>
+    return <ConfigProvider
+        theme={{
+            algorithm: darkMode ? theme.darkAlgorithm : theme.compactAlgorithm
+        }}
+    >
+        <AuthenticatedContext.Provider value={contextValue}>
             <Layout hasSider style={{minHeight: '100vh'}}>
                 {/* Ant will use a break-off tab to toggle the collapse of the sider when collapseWidth = 0*/}
                 <Layout.Sider collapsible breakpoint="sm" {...(sm ? {collapsedWidth: 0} : {})}>
                     <Sider isAuthenticated={isAuthenticated}/>
                 </Layout.Sider>
                 <Layout>
-                <Layout.Header style={{padding: 0, background: colorBgContainer}}/>
+                    <Layout.Header style={{padding: 0}}/>
                     <Layout.Content style={sm ? {margin: '24px 0'} : {margin: '24px 16px 0'}}>
                         <div style={{
                             padding: 24,
                             minHeight: 360,
-                        background: colorBgContainer,
-                        borderRadius: borderRadiusLG,
                         }}>
-
                             <Routes>
                                 <Route path="/" element={<Navigate to="/login"/>}/>
                                 <Route path="/home" element={<TextPage resource='home.md'/>}/>
@@ -111,4 +126,5 @@ export default function App() {
                 </Layout>
             </Layout>
         </AuthenticatedContext.Provider>
+    </ConfigProvider>
 }

assets/components/search/DomainDiagram.tsx

@@ -36,7 +36,7 @@ export function DomainDiagram({domain}: { domain: Domain }) {
     return <Flex style={{width: '100%', height: '100vh'}}>
         <ReactFlow
             fitView
-            colorMode='dark'
+            colorMode='system'
             nodesConnectable={false}
             edgesReconnectable={false}
             nodes={nodes}

src/Service/RDAPService.php

@@ -256,6 +256,7 @@ readonly class RDAPService
                     continue;
                 }
                 $entity = $this->registerEntity($rdapEntity);
+                $this->em->flush();
 
                 $domainEntity = $this->domainEntityRepository->findOneBy([
                     'domain' => $domain,
@@ -327,6 +328,7 @@ readonly class RDAPService
                         continue;
                     }
                     $entity = $this->registerEntity($rdapEntity);
+                    $this->em->flush();
 
                     $nameserverEntity = $this->nameserverEntityRepository->findOneBy([
                         'nameserver' => $nameserver,
@@ -477,7 +479,6 @@ readonly class RDAPService
         }
 
         $this->em->persist($entity);
-        $this->em->flush();
 
         if (isset($domainEntities)) {
             /** @var DomainEntity[] $domainEntities */