diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss b/webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
similarity index 94%
rename from webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss
rename to webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
index fb38268922..00f246af2e 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/dark.scss
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/dark.module.scss
@@ -32,11 +32,11 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #fff;
 
-.CodeMirror-hints {
+:global .CodeMirror-hints {
   @include mdc-elevation(3);
   @include mdc-typography(caption);
 }
 
-.theme-dark {
+:global .theme-dark {
   @include base-code-editor;
 }
diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/light.scss b/webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
similarity index 93%
rename from webapp/packages/sql-editor/src/SqlEditor/theme/light.scss
rename to webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
index cee2230969..2e1ded399e 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/light.scss
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/light.module.scss
@@ -32,11 +32,11 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #000;
 
-.CodeMirror-hints {
+:global .CodeMirror-hints {
   @include mdc-elevation(3);
   @include mdc-typography(caption);
 }
 
-.theme-light {
+:global .theme-light {
   @include base-code-editor;
 }
diff --git a/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts b/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
index 51d5dc90e3..130eac43a7 100644
--- a/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
+++ b/webapp/packages/sql-editor/src/SqlEditor/theme/styles.ts
@@ -9,6 +9,16 @@
 import { ThemeSelector } from '@dbeaver/core/theming';
 
 export const SqlEditorStyles: ThemeSelector = async (theme) => {
-  const styles = await import(`./${theme}.scss`);
+  let styles: any;
+
+  switch (theme) {
+    case 'dark':
+      styles = await import('./dark.module.scss');
+      break;
+    default:
+      styles = await import('./light.module.scss');
+      break;
+  }
+
   return styles.default;
 };