feat: system light/dark theme

Add a third "system" theme to follow the system theme configuration.

Discussion

This change was split off from !176 (merged). Marcos (!176 (comment 296033)) rightfully mentioned three theme versions may be a bit confusing.

Preview

Screen_Recording_2024-07-26_at_15.25.03

apps/web/src/app/App.tsx

@@ -7,6 +7,7 @@ import {
   useQuerybuilderSettings,
   useSessionCache,
 } from '@graphpolaris/shared/lib/data-access';
+import { setCurrentTheme } from '@graphpolaris/shared/lib/data-access/store/configSlice';
 import { resetGraphQueryResults, queryingBackend } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
 import { Query2BackendQuery, QueryMultiGraph } from '@graphpolaris/shared/lib/querybuilder';
 import { Navbar } from '../components/navbar/navbar';
@@ -52,6 +53,10 @@ export function App(props: App) {
     }
   }, [props]);
 
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    dispatch(setCurrentTheme(event.matches));
+  });
+
   const [authCheck, setAuthCheck] = useState(false);
   const [tab, setTab] = useState<SideNavTab>('Schema');
   // const [visFullSize, setVisFullSize] = useState<boolean>(false);