ui: mantine: respect color scheme setting (close #1091)

packages/ui-default/components/mantine.page.tsx

@@ -0,0 +1,39 @@
+import { createTheme, Notification as MantineNotification } from '@mantine/core';
+import { AutoloadPage } from 'vj/misc/Page';
+
+const colorWhite = {
+  color: 'var(--mantine-color-white)',
+} as const;
+
+export const theme = createTheme({
+  components: {
+    Notification: MantineNotification.extend({
+      classNames: {
+        closeButton: 'mantine-notifications-close-button',
+      },
+      styles: {
+        root: {
+          backgroundColor: 'var(--notification-color, var(--mantine-primary-color-filled))',
+          paddingInlineStart: 'var(--mantine-spacing-xs)',
+        },
+        title: {
+          ...colorWhite,
+          fontSize: 'var(--mantine-font-size-md)',
+        },
+        icon: {
+          fontSize: '24px',
+          marginInlineEnd: 'var(--mantine-spacing-xs)',
+        },
+        description: colorWhite,
+        closeButton: colorWhite,
+      },
+    }),
+  },
+});
+
+export default new AutoloadPage('mantine', null, () => {
+  localStorage.setItem(
+    'mantine-color-scheme-value',
+    document.documentElement.className.includes('theme--dark') ? 'dark' : 'light',
+  );
+});