diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 71f9871a9..04b32ee9a 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -132,6 +132,10 @@ export class AppComponent {
'cassandra',
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo.svg'),
);
+ this.matIconRegistry.addSvgIcon(
+ 'cassandra-dark',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo_dark.svg'),
+ );
this.matIconRegistry.addSvgIcon(
'redis',
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/redis_logo.svg'),
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
index 6b9e18fc1..994f01bfa 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
@@ -71,7 +71,7 @@ describe('ChartEditComponent', () => {
};
mockUiSettingsService = {
- editorTheme: 'vs-dark',
+ isDarkMode: true,
getUiSettings: vi.fn().mockReturnValue(of({})),
};
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
index 09ac816c7..fb31c787a 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
@@ -404,7 +404,7 @@ export class ChartEditComponent implements OnInit {
this.queryId.set(this.route.snapshot.paramMap.get('query-id') || '');
this.isEditMode.set(!!this.queryId());
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
if (this.isEditMode()) {
this.manualExpanded.set(true);
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html
index b64fef9a4..591c3a2a1 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.html
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.html
@@ -2,7 +2,7 @@
Create your own test connection
- Create first connection
+ Create your first connection
-
@@ -11,7 +11,7 @@
-
+
{{ getMainTitle(supportedDatabase) }}
diff --git a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
index 9e81f927b..b109521ff 100644
--- a/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
+++ b/frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
@@ -30,6 +30,7 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
public supportedDatabasesTitles = supportedDatabasesTitles;
public supportedOrderedDatabases = supportedOrderedDatabases;
public hasMultipleMembers: boolean = false;
+ public isDarkMode: boolean = false;
constructor(
private _uiSettings: UiSettingsService,
@@ -37,6 +38,8 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
) {}
ngOnInit() {
+ this.isDarkMode = this._uiSettings.isDarkMode;
+
this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => {
this.connectionsListCollapsed = settings?.globalSettings?.connectionsListCollapsed;
this.displayedCardCount = this.connectionsListCollapsed ? 3 : this.connections.length;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts
index 374ff7414..8c251ee7f 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.ts
@@ -133,7 +133,7 @@ export class DbTableActionsComponent implements OnInit {
this._connections
.getCurrentConnectionSigningKey()
.subscribe((signingKey) => (this.codeSnippets = codeSnippets(signingKey)));
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
try {
this.rulesData = await this.getRules();
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
index 6dffb116a..16043c049 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.ts
@@ -317,7 +317,7 @@ export class DbTableWidgetsComponent implements OnInit {
);
this.getWidgets();
});
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
get currentConnection() {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts
index b28ca295d..bc6d68e9c 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.spec.ts
@@ -12,7 +12,7 @@ describe('CodeEditComponent', () => {
let fixture: ComponentFixture;
const mockUiSettingsService = {
- editorTheme: 'vs-dark',
+ isDarkMode: true,
};
beforeEach(async () => {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts
index 0f4c1849e..1b233628b 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/code/code.component.ts
@@ -37,6 +37,6 @@ export class CodeEditComponent extends BaseEditFieldComponent {
value: this.value
}
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html
index b53c245c5..115648820 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.html
@@ -2,7 +2,7 @@
{
let component: JsonEditorEditComponent;
let fixture: ComponentFixture;
+ const mockUiSettingsService = {
+ isDarkMode: true,
+ };
+
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [JsonEditorEditComponent, BrowserAnimationsModule],
+ providers: [{ provide: UiSettingsService, useValue: mockUiSettingsService }],
})
.overrideComponent(JsonEditorEditComponent, {
remove: { imports: [CodeEditorModule] },
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts
index 5cfb4855e..04922a102 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/json-editor/json-editor.component.ts
@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
import { BaseEditFieldComponent } from '../base-row-field/base-row-field.component';
import { CodeEditorModule } from '@ngstack/code-editor';
import { CommonModule } from '@angular/common';
+import { UiSettingsService } from 'src/app/services/ui-settings.service';
@Component({
selector: 'app-edit-json-editor',
@@ -20,6 +21,13 @@ export class JsonEditorEditComponent extends BaseEditFieldComponent {
scrollBeyondLastLine: false,
wordWrap: 'on',
};
+ public codeEditorTheme = 'vs-dark';
+
+ constructor(
+ private _uiSettings: UiSettingsService,
+ ) {
+ super();
+ }
ngOnInit(): void {
super.ngOnInit();
@@ -28,5 +36,7 @@ export class JsonEditorEditComponent extends BaseEditFieldComponent {
uri: `${this.label}.json`,
value: JSON.stringify(this.value, undefined, 4) || '{}'
}
+
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
}
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts
index b52565f86..8db02d691 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.spec.ts
@@ -12,7 +12,7 @@ describe('MarkdownEditComponent', () => {
let fixture: ComponentFixture;
const mockUiSettingsService = {
- editorTheme: 'vs-dark',
+ isDarkMode: true,
};
beforeEach(async () => {
@@ -67,7 +67,7 @@ describe('MarkdownEditComponent', () => {
});
it('should use light theme when configured', () => {
- const lightThemeService = { editorTheme: 'vs' };
+ const lightThemeService = { isDarkMode: false };
TestBed.resetTestingModule();
TestBed.configureTestingModule({
imports: [MarkdownEditComponent, BrowserAnimationsModule],
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts
index 89b5eb96a..65a6fc722 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts
+++ b/frontend/src/app/components/ui-components/record-edit-fields/markdown/markdown.component.ts
@@ -37,6 +37,6 @@ export class MarkdownEditComponent extends BaseEditFieldComponent {
value: this.value
}
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts b/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts
index 03ddbcbcd..280189ed3 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/code/code.component.ts
@@ -35,6 +35,6 @@ export class CodeRecordViewComponent extends BaseRecordViewFieldComponent {
value: this.value,
}
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
}
diff --git a/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts b/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts
index e6fb6fa3c..d4f8fa809 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/json-editor/json-editor.component.ts
@@ -34,6 +34,6 @@ export class JsonEditorRecordViewComponent extends BaseRecordViewFieldComponent
value: this.value
}
- this.codeEditorTheme = this._uiSettings.editorTheme;
+ this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
}
}
diff --git a/frontend/src/app/services/ui-settings.service.ts b/frontend/src/app/services/ui-settings.service.ts
index 2a40fc1bd..5fa8ca761 100644
--- a/frontend/src/app/services/ui-settings.service.ts
+++ b/frontend/src/app/services/ui-settings.service.ts
@@ -15,25 +15,20 @@ export class UiSettingsService {
};
private uiSettings = null;
- private codeEditorTheme: 'vs' | 'vs-dark';
+ private _isDarkMode: boolean;
constructor(
private _http: HttpClient,
private _notifications: NotificationsService,
) {
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
- this.codeEditorTheme = prefersDark ? 'vs-dark' : 'vs';
+ this._isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
- // get uiSettings$(){
- // return this.uiSettings.asObservable();
- // }
-
- get editorTheme(): 'vs' | 'vs-dark' {
- return this.codeEditorTheme;
+ get isDarkMode(): boolean {
+ return this._isDarkMode;
}
- updateGlobalSetting(key: string, value: any) {
+updateGlobalSetting(key: string, value: any) {
this.settings.globalSettings[key] = value;
this.syncUiSettings().subscribe();
}
diff --git "a/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg" "b/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg"
new file mode 100644
index 000000000..4715287e9
--- /dev/null
+++ "b/frontend/src/assets/icons/db-logos/\321\201assandra_logo_dark.svg"
@@ -0,0 +1,5 @@
+