refactor: move component into a single package (#898)

packages/component/src/styles/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './systemThemeHelper';
+export * from './localStorageThemeHelper';

packages/component/src/styles/utils/localStorageThemeHelper.ts

@@ -0,0 +1,13 @@
+import { ThemeMode } from '../types';
+
+export class LocalStorageThemeHelper {
+  name = 'Affine-theme-mode';
+  get = (): ThemeMode | null => {
+    return localStorage.getItem(this.name) as ThemeMode | null;
+  };
+  set = (mode: ThemeMode) => {
+    localStorage.setItem(this.name, mode);
+  };
+}
+
+export const localStorageThemeHelper = new LocalStorageThemeHelper();

packages/component/src/styles/utils/systemThemeHelper.ts

@@ -0,0 +1,29 @@
+import { Theme } from '../types';
+
+export class SystemThemeHelper {
+  media: MediaQueryList = window.matchMedia('(prefers-color-scheme: light)');
+  eventList: Array<(e: Event) => void> = [];
+  eventHandler = (e: Event) => {
+    this.eventList.forEach(fn => fn(e));
+  };
+
+  constructor() {
+    this.media.addEventListener('change', this.eventHandler);
+  }
+
+  get = (): Theme => {
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    return this.media.matches ? 'light' : 'dark';
+  };
+
+  onChange = (callback: () => void) => {
+    this.eventList.push(callback);
+  };
+
+  dispose = () => {
+    this.eventList = [];
+    this.media.removeEventListener('change', this.eventHandler);
+  };
+}