From 5357821f292fd4ffdb1ad9aa4b953885779887e3 Mon Sep 17 00:00:00 2001
From: Altair-sh <altairgyg@gmail.com>
Date: Wed, 19 Mar 2025 01:09:57 +0500
Subject: [PATCH] adaptive grid theme fix

---
 src/app/page.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5803c16..0e2dac2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,13 +2,25 @@
 import { AgGridReact } from 'ag-grid-react'
 import styles from './page.module.css'
 import { AllCommunityModule, themeQuartz } from 'ag-grid-community'
-import { useMemo } from 'react'
+import { useState, useEffect } from 'react'
 import { colorSchemeDark } from 'ag-grid-community'
-import { useTheme } from 'next-themes'
 
 export default function Home() {
-    const { theme } = useTheme()
-    const agTheme = useMemo(() => (theme === 'dark' ? themeQuartz.withPart(colorSchemeDark) : themeQuartz), [theme])
+    const [agTheme, setAgTheme] = useState(themeQuartz)
+
+    useEffect(() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+        setAgTheme(prefersDark ? themeQuartz.withPart(colorSchemeDark) : themeQuartz)
+
+        const listener = (e: MediaQueryListEvent) => {
+            setAgTheme(e.matches ? themeQuartz.withPart(colorSchemeDark) : themeQuartz)
+        }
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', listener)
+        return () => {
+            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', listener)
+        }
+    }, [])
 
     return (
         <div className={styles.page} style={{ height: '500px' }}>