diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index 4e69d4fbe..938d56bff 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -16,7 +16,6 @@ import {
import registerCommand from './registerCommand';
import { get } from 'svelte/store';
import AboutModal from '../modals/AboutModal.svelte';
-import SettingsModal from '../settings/SettingsModal.svelte';
import SqlGeneratorModal from '../modals/SqlGeneratorModal.svelte';
import { showModal } from '../modals/modalTools';
import newQuery, { newDiagram, newPerspective, newQueryDesign } from '../query/newQuery';
@@ -74,7 +73,14 @@ registerCommand({
category: __t('command.theme', { defaultMessage: 'Theme' }),
name: __t('command.theme.change', { defaultMessage: 'Change' }),
toolbarName: __t('command.theme.changeToolbar', { defaultMessage: 'Change theme' }),
- onClick: () => showModal(SettingsModal, { selectedTab: 'theme' }),
+ onClick: () => openNewTab({
+ title: 'Settings',
+ icon: 'icon settings',
+ tabComponent: 'SettingsTab',
+ props: {
+ selectedItem: 'theme',
+ },
+ }),
// getSubCommands: () => get(extensions).themes.map(themeCommand),
});
diff --git a/packages/web/src/elements/SettingsMenuControl.svelte b/packages/web/src/elements/SettingsMenuControl.svelte
index 7669682be..7e85e66b2 100644
--- a/packages/web/src/elements/SettingsMenuControl.svelte
+++ b/packages/web/src/elements/SettingsMenuControl.svelte
@@ -118,6 +118,10 @@
transition: background-color 0.2s ease;
}
+ .menu-item:first-child {
+ border-top: 1px solid var(--theme-border);
+ }
+
.menu-item:hover {
background-color: var(--theme-bg-hover);
}
diff --git a/packages/web/src/settings/GeneralSettings.svelte b/packages/web/src/settings/GeneralSettings.svelte
index acff0fedb..365a7587d 100644
--- a/packages/web/src/settings/GeneralSettings.svelte
+++ b/packages/web/src/settings/GeneralSettings.svelte
@@ -49,6 +49,32 @@ label={_t('settings.tabGroup.showServerName', {
})}
defaultValue={false}
/>
+
+