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',
+  );
+});

packages/ui-default/components/notification/index.ts

@@ -1,39 +1,10 @@
-import { createTheme, MantineProvider, Notification as MantineNotification } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { Notifications, notifications } from '@mantine/notifications';
 import $ from 'jquery';
 import React from 'react';
+import { theme } from 'vj/components/mantine.page';
 import { tpl, zIndexManager } from 'vj/utils/base';
 
-const colorWhite = {
-  color: 'var(--mantine-color-white)',
-} as const;
-
-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,
-      },
-    }),
-  },
-});
-
 document.body.append(tpl(
   React.createElement(MantineProvider, { theme },
     React.createElement(Notifications, { position: 'bottom-left', zIndex: 99999 }),

packages/ui-default/templates/layout/html5.html

@@ -5,7 +5,8 @@
 {% import "components/noscript_note.html" as noscript_note with context %}
 {% import "components/user.html" as user with context %}
 <!DOCTYPE html>
-<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} theme--{{ (handler.user|default({})).theme|default('default') }} nojs" lang="{{ UserContext.viewLang }}" data-app="Hydro">
+{% set theme = (handler.user|default({})).theme|default('default') %}
+<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} theme--{{ theme }} nojs" data-mantine-color-scheme="{{ 'dark' if theme.includes('dark') else 'light' }}" lang="{{ UserContext.viewLang }}" data-app="Hydro">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>