diff --git a/packages/core/client/src/system-settings/SystemSettingsProvider.tsx b/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
index 6f735fd04..8a6af20a4 100644
--- a/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
+++ b/packages/core/client/src/system-settings/SystemSettingsProvider.tsx
@@ -10,9 +10,25 @@ export const useSystemSettings = () => {
};
export const SystemSettingsProvider: React.FC = (props) => {
- const result = useRequest({
- url: 'systemSettings:get/1?appends=logo',
- });
+ const result = useRequest(
+ {
+ url: 'systemSettings:get/1?appends=logo',
+ },
+ {
+ onSuccess(data) {
+ const localTheme = localStorage.getItem('NOCOBASE_THEME');
+ if (!localTheme) {
+ const theme = data?.data?.options?.theme;
+ localStorage.setItem('NOCOBASE_THEME', theme || 'default');
+ window.location.reload();
+ }
+ },
+ },
+ );
+ const localTheme = localStorage.getItem('NOCOBASE_THEME');
+ if (!localTheme) {
+ return
;
+ }
if (result.loading) {
return
;
}
diff --git a/packages/core/client/src/system-settings/SystemSettingsShortcut.tsx b/packages/core/client/src/system-settings/SystemSettingsShortcut.tsx
index 5d5484b99..2a6172da0 100644
--- a/packages/core/client/src/system-settings/SystemSettingsShortcut.tsx
+++ b/packages/core/client/src/system-settings/SystemSettingsShortcut.tsx
@@ -192,6 +192,19 @@ const schema2: ISchema = {
// accept: 'jpg,png'
},
},
+ 'options.theme': {
+ type: 'string',
+ title: '{{t("Theme")}}',
+ 'x-component': 'Select',
+ 'x-component-props': {
+ // mode: 'multiple',
+ },
+ 'x-decorator': 'FormItem',
+ enum: [
+ { label: '{{t("Default theme")}}', value: 'default' },
+ { label: '{{t("Compact theme")}}', value: 'compact' },
+ ],
+ },
enabledLanguages: {
type: 'array',
title: '{{t("Enabled languages")}}',
diff --git a/packages/core/client/src/user/CurrentUser.tsx b/packages/core/client/src/user/CurrentUser.tsx
index c16045d9d..6d55f5cad 100644
--- a/packages/core/client/src/user/CurrentUser.tsx
+++ b/packages/core/client/src/user/CurrentUser.tsx
@@ -9,6 +9,7 @@ import { ChangePassword } from './ChangePassword';
import { EditProfile } from './EditProfile';
import { LanguageSettings } from './LanguageSettings';
import { SwitchRole } from './SwitchRole';
+import { ThemeSettings } from './ThemeSettings';
const ApplicationVersion = () => {
const data = useCurrentAppInfo();
@@ -43,6 +44,7 @@ export const CurrentUser = () => {
+
{
setOpen(true);
}}
>
- {t('Language')}{' '}
-
);
};
diff --git a/packages/core/client/src/user/SwitchRole.tsx b/packages/core/client/src/user/SwitchRole.tsx
index 48d1165ac..a5d0c828e 100644
--- a/packages/core/client/src/user/SwitchRole.tsx
+++ b/packages/core/client/src/user/SwitchRole.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
import { Menu, Select } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
@@ -36,23 +37,31 @@ export const SwitchRole = () => {
}
return (
- {t('Switch role')}{' '}
- {
- api.auth.setRole(roleName);
- await api.resource('users').setDefaultRole({ values: { roleName } });
- history.push('/');
- window.location.reload();
- }}
- />
+
+ {t('Switch role')}{' '}
+ {
+ api.auth.setRole(roleName);
+ await api.resource('users').setDefaultRole({ values: { roleName } });
+ history.push('/');
+ window.location.reload();
+ }}
+ />
+
);
};
diff --git a/packages/core/client/src/user/ThemeSettings.tsx b/packages/core/client/src/user/ThemeSettings.tsx
new file mode 100644
index 000000000..0bf6322e4
--- /dev/null
+++ b/packages/core/client/src/user/ThemeSettings.tsx
@@ -0,0 +1,47 @@
+import { css } from '@emotion/css';
+import { Menu, Select } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAPIClient } from '../api-client';
+import { useCurrentUserContext } from './CurrentUserProvider';
+
+export const ThemeSettings = () => {
+ const { t } = useTranslation();
+ const ctx = useCurrentUserContext();
+ const api = useAPIClient();
+ return (
+
+
+ {t('Theme')}{' '}
+ {
+ await api.resource('users').update({
+ filterByTk: ctx.data.data.id,
+ values: {
+ systemSettings: {
+ ...ctx.data.data.systemSettings,
+ theme: value,
+ },
+ },
+ });
+ localStorage.setItem('NOCOBASE_THEME', value);
+ window.location.reload();
+ }}
+ />
+
+
+ );
+};
diff --git a/packages/plugins/client/src/server.ts b/packages/plugins/client/src/server.ts
index 1776339ca..af8c6a89c 100644
--- a/packages/plugins/client/src/server.ts
+++ b/packages/plugins/client/src/server.ts
@@ -48,6 +48,7 @@ export class ClientPlugin extends Plugin {
},
version: await ctx.app.version.get(),
lang,
+ theme: currentUser?.systemSettings?.theme || systemSetting?.options?.theme || 'default',
};
await next();
},
diff --git a/packages/plugins/system-settings/src/collections/systemSettings.ts b/packages/plugins/system-settings/src/collections/systemSettings.ts
index 057e42857..d21cc39d5 100644
--- a/packages/plugins/system-settings/src/collections/systemSettings.ts
+++ b/packages/plugins/system-settings/src/collections/systemSettings.ts
@@ -37,5 +37,10 @@ export default defineCollection({
type: 'string',
name: 'appLang',
},
+ {
+ type: 'json',
+ name: 'options',
+ defaultValue: {},
+ },
],
});
diff --git a/packages/plugins/users/src/collections/users.ts b/packages/plugins/users/src/collections/users.ts
index adaad637f..74af63552 100644
--- a/packages/plugins/users/src/collections/users.ts
+++ b/packages/plugins/users/src/collections/users.ts
@@ -80,5 +80,10 @@ export default {
unique: true,
hidden: true,
},
+ {
+ type: 'json',
+ name: 'systemSettings',
+ defaultValue: {},
+ },
],
} as CollectionOptions;