feat(mobile): pwa and browser theme-color optimization (#8168)

[AF-1325](https://linear.app/affine-design/issue/AF-1325/优化-pwa-体验), [AF-1317](https://linear.app/affine-design/issue/AF-1317/优化：-pwa-的顶部-status-bar-颜色应与背景保持一致), [AF-1318](https://linear.app/affine-design/issue/AF-1318/优化：pwa-的底部应当有符合设备安全高度的padding), [AF-1321](https://linear.app/affine-design/issue/AF-1321/更新一下-fail-的-pwa-icon)

- New `<SafeArea />` ui component
- New `useThemeColorV1` / `useThemeColorV2` hook:
    - to modify `<meta name="theme-color" />` with given theme key

packages/frontend/component/src/hooks/use-theme-value.ts

@@ -0,0 +1,19 @@
+import { type AffineTheme, darkTheme, lightTheme } from '@toeverything/theme';
+import {
+  type AffineThemeKeyV2,
+  darkThemeV2,
+  lightThemeV2,
+} from '@toeverything/theme/v2';
+import { useTheme } from 'next-themes';
+
+export const useThemeValueV2 = (key: AffineThemeKeyV2) => {
+  const { resolvedTheme } = useTheme();
+
+  return resolvedTheme === 'dark' ? darkThemeV2[key] : lightThemeV2[key];
+};
+
+export const useThemeValueV1 = (key: keyof Omit<AffineTheme, 'editorMode'>) => {
+  const { resolvedTheme } = useTheme();
+
+  return resolvedTheme === 'dark' ? darkTheme[key] : lightTheme[key];
+};