added theme detection

src/modules/layout/components/GridLayout/hooks/useGridLayoutPersistance.ts

@@ -51,13 +51,8 @@ export const useGridLayoutPersistance = () => {
       persistLayout();
     });
 
-    const onPanelChange = api.current.onDidActivePanelChange((event) => {
-      console.log(event);
-    });
-
     return () => {
       onLayoutChange.dispose();
-      onPanelChange.dispose();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [persistLayout, api.current]);

src/modules/settings/context/SettingsContext.ts

@@ -1,10 +1,13 @@
 import { createContext, useContext } from "react";
 
-export type SettingsValue = {
-  richEditorEnabled: boolean;
+export interface ColorSettings {
   backgroundColor: string;
   textColor: string;
   linkColor: string;
+}
+
+export type SettingsValue = ColorSettings & {
+  richEditorEnabled: boolean;
 };
 
 export const defaultSettings: SettingsValue = {

src/modules/settings/providers/SettingsProvider/index.tsx

@@ -7,9 +7,22 @@ import {
   defaultSettings,
 } from "../../context/SettingsContext";
 import { ModalPage } from "~/modules/modal/components/ModalPage";
+import { useDetectTheme } from "~/modules/theme/hooks/useDetectTheme";
+import {
+  Theme,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "~/modules/theme/constants/theme";
 
 const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [settings, setSettings] = useState(defaultSettings);
+  const theme = useDetectTheme();
+  const defaultColors =
+    theme === Theme.Dark ? defaultDarkTheme : defaultLightTheme;
+
+  const [settings, setSettings] = useState({
+    ...defaultSettings,
+    ...defaultColors,
+  });
   const [settingsModalVisible, setSettingsModalVisible] = useState(false);
 
   const show = useCallback(() => setSettingsModalVisible(true), []);

src/modules/theme/constants/theme.ts

@@ -1,3 +1,18 @@
+import { ColorSettings } from "~/modules/settings/context/SettingsContext";
+
 export enum Theme {
   Dark = "dark",
+  Light = "light",
 }
+
+export const defaultDarkTheme: ColorSettings = {
+  backgroundColor: "#2e2e2e",
+  textColor: "#eeeeee",
+  linkColor: "#25bfe6",
+};
+
+export const defaultLightTheme: ColorSettings = {
+  backgroundColor: "#eeeeee",
+  textColor: "#2e2e2e",
+  linkColor: "#25bfe6",
+};

src/modules/theme/containers/ThemeProvider/index.tsx

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren, useEffect, useState } from "react";
 import { ThemeContext, defaultTheme } from "../../context/ThemeContext";
 import { useSettings } from "~/modules/settings/context/SettingsContext";
+import { useThemeColors } from "../../hooks/useThemeColors";
 
 type ThemeProviderProps = PropsWithChildren;
 
@@ -18,15 +19,7 @@ const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
     return () => document.body.classList.remove(`theme-${theme.theme}`);
   }, [theme.theme]);
 
-  useEffect(() => {
-    document.body.style.setProperty(
-      "--color-background",
-      settings.backgroundColor
-    );
-
-    document.body.style.setProperty("--color-text", settings.textColor);
-    document.body.style.setProperty("--color-link", settings.linkColor);
-  }, [settings]);
+  useThemeColors(settings);
 
   return (
     <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>

src/modules/theme/hooks/useDetectTheme.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { Theme } from "../constants/theme";
+
+const isDark = () =>
+  window.matchMedia &&
+  window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+export const useDetectTheme = () => {
+  const [theme, setTheme] = useState(isDark() ? Theme.Dark : Theme.Light);
+
+  useEffect(() => {
+    const listener = (event: MediaQueryListEvent) => {
+      setTheme(event.matches ? Theme.Dark : Theme.Light);
+    };
+
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", listener);
+
+    return () =>
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", listener);
+  }, []);
+
+  return theme;
+};

src/modules/theme/hooks/useThemeColors.ts

@@ -0,0 +1,19 @@
+import Color from "color";
+import { useEffect } from "react";
+import { ColorSettings } from "~/modules/settings/context/SettingsContext";
+
+export const useThemeColors = (settings: ColorSettings) => {
+  useEffect(() => {
+    const background = new Color(settings.backgroundColor);
+    const isDark = background.isDark();
+
+    const border = isDark
+      ? background.mix(Color("white"), 0.1)
+      : background.mix(Color("black"), 0.1);
+
+    document.body.style.setProperty("--color-background", background.hex());
+    document.body.style.setProperty("--color-text", settings.textColor);
+    document.body.style.setProperty("--color-link", settings.linkColor);
+    document.body.style.setProperty("--color-border", border.hex());
+  }, [settings]);
+};