diff --git a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-autocompletion.css b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-autocompletion.css
deleted file mode 100644
index 43eb5e5f59..0000000000
--- a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-autocompletion.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-.cm-tooltip.cm-tooltip-autocomplete {
-  background: unset;
-  border: none;
-
-  & > ul {
-    border-radius: var(--theme-form-element-radius);
-  }
-
-  & li {
-    display: flex;
-    align-items: center;
-  }
-
-  & .cm-completionIcon {
-    opacity: 1;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    margin-right: 0.6em;
-
-    &:not([src]) {
-      opacity: 0;
-    }
-  }
-
-  & li:hover {
-    background: var(--theme-sub-secondary) !important;
-    color: var(--theme-on-secondary) !important;
-  }
-
-  & li[aria-selected='true'] {
-    background: var(--theme-secondary) !important;
-    color: var(--theme-text-primary-on-light) !important;
-  }
-}
-
-.cm-tooltip.cm-completionInfo {
-  margin-left: 8px;
-}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-tooltip.css b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-tooltip.css
deleted file mode 100644
index 2014daa496..0000000000
--- a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-tooltip.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-.cm-tooltip {
-  font-family: var(--theme-font-family);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: var(--theme-typography-body2-font-size);
-  line-height: var(--theme-typography-body2-line-height);
-  font-weight: var(--theme-typography-body2-font-weight);
-  letter-spacing: var(--theme-typography-body2-letter-spacing);
-  text-decoration: inherit;
-  text-transform: inherit;
-
-  box-shadow:
-    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-
-  background-color: var(--theme-surface);
-  color: var(--theme-on-surface);
-  border: none;
-  border-radius: var(--theme-form-element-radius);
-}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.css b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.css
deleted file mode 100644
index b1fd9a47a8..0000000000
--- a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.css
+++ /dev/null
@@ -1,353 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-.editor,
-.cm-editor,
-.cm-mergeView,
-.cm-mergeViewEditors,
-.cm-scroller,
-.ReactCodemirror {
-  width: 100%;
-  height: 100% !important;
-}
-
-.editor,
-.ReactCodemirror,
-.cm-mergeView,
-.cm-mergeViewEditors,
-.cm-editor,
-.cm-gotoLine {
-  font-family: var(--theme-font-family);
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: var(--theme-typography-body2-font-size);
-  line-height: var(--theme-typography-body2-line-height);
-  font-weight: var(--theme-typography-body2-font-weight);
-  letter-spacing: var(--theme-typography-body2-letter-spacing);
-  text-decoration: inherit;
-  text-transform: inherit;
-}
-
-.cm-mergeViewEditor:first-child {
-  border-right: 1px solid;
-  border-color: var(--theme-background);
-}
-
-.editor .cm-highlightTab {
-  opacity: 0.6;
-  color: var(--theme-text-hint-on-light);
-  pointer-events: none;
-}
-
-.editor .cm-newline {
-  color: var(--theme-text-hint-on-light);
-  opacity: 0.6;
-  margin-left: 4px;
-  cursor: default;
-  pointer-events: none;
-}
-
-.editor .cm-highlightSpace {
-  background-image: radial-gradient(circle at 50% 55%, var(--theme-text-hint-on-light) 15%, transparent 5%);
-  opacity: 0.6;
-  background-position: center;
-}
-
-.editor {
-  background-color: var(--theme-surface);
-  color: var(--theme-on-surface);
-}
-
-.editor .cm-scroller {
-  outline: none;
-  line-height: unset;
-}
-
-.editor .cm-content {
-  caret-color: var(--editor-cursor);
-}
-
-.editor .cm-cursor {
-  border-left-color: var(--editor-cursor);
-}
-
-.editor .cm-link {
-  &.cm-link-loaded {
-    color: var(--theme-primary);
-    text-decoration: underline;
-    cursor: pointer;
-  }
-}
-
-.editor .cm-dropCursor {
-  border-left: 1.2px solid var(--editor-cursor);
-}
-
-.editor .cm-gutters,
-.cm-panel {
-  background-color: var(--theme-surface);
-  color: var(--theme-text-hint-on-light);
-  border-color: var(--theme-background);
-}
-
-.cm-panels-top,
-.cm-panels-bottom {
-  border-color: var(--theme-background) !important;
-}
-
-.editor .cm-activeLine {
-  box-shadow: 0 0 0 2px var(--theme-sub-secondary);
-}
-
-.editor .cm-activeLineGutter {
-  color: var(--theme-on-surface);
-}
-
-.ͼ2 .cm-activeLine:not(.cm-changedLine, .cm-deletedLine),
-.ͼ2 .cm-activeLineGutter:not(.cm-changedLineGutter, .cm-deletedLineGutter) {
-  background-color: unset;
-}
-
-.editor .cm-gotoLine.cm-panel {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  padding: 4px 8px;
-  gap: 8px;
-  min-width: 160px;
-  container-type: inline-size;
-
-  & label {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    text-transform: uppercase;
-    letter-spacing: -0.1px;
-    gap: 4px;
-  }
-
-  & input {
-    font-family: var(--theme-font-family);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-size: var(--theme-typography-body2-font-size);
-    line-height: var(--theme-typography-body2-line-height);
-    font-weight: var(--theme-typography-body2-font-weight);
-    letter-spacing: var(--theme-typography-body2-letter-spacing);
-    text-decoration: inherit;
-    text-transform: inherit;
-    max-width: 60px;
-    height: 24px;
-    padding-inline: 8px;
-
-    &:focus {
-      border-color: var(--theme-primary);
-    }
-  }
-  & .cm-button {
-    font-family: var(--theme-font-family);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-size: var(--theme-typography-body2-font-size);
-    line-height: var(--theme-typography-body2-line-height);
-    font-weight: var(--theme-typography-body2-font-weight);
-    letter-spacing: var(--theme-typography-body2-letter-spacing);
-    text-decoration: inherit;
-    text-transform: inherit;
-    background: transparent;
-    height: 24px;
-    padding-block: 0;
-    margin-right: 24px;
-
-    font-weight: 500;
-    text-transform: uppercase;
-
-    color: var(--theme-primary);
-    border-radius: 4px;
-    border-color: var(--theme-primary);
-
-    &:hover {
-      background: color-mix(in srgb, transparent, var(--theme-primary) 5%);
-    }
-
-    @container (width < 240px) {
-      display: none;
-    }
-  }
-
-  & button[name='close'] {
-    margin-left: auto;
-    padding: 0 8px;
-    top: 4px;
-    height: 24px;
-    width: 24px;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--theme-on-surface);
-    border-color: var(--theme-on-surface);
-    font-size: 16px;
-
-    &:hover {
-      background: color-mix(in srgb, transparent, var(--theme-on-surface) 5%);
-    }
-  }
-}
-
-.editor .cm-content ::selection {
-  background: var(--theme-primary);
-  color: white;
-}
-
-.editor .cm-lineNumbers .cm-gutterElement {
-  min-width: 3ch;
-  box-sizing: content-box;
-}
-
-.editor .cm-gutters .cm-foldGutter .cm-gutterElement {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.editor .cm-gutters .cm-foldGutter .cm-gutterElement-icon {
-  padding: 0 3px 0 5px;
-  width: 20px;
-  height: 12px;
-  display: flex;
-
-  &.cm-foldGutter-folded svg {
-    transform: rotate(-90deg);
-  }
-}
-
-.editor .cm-gutters .query-status .cm-gutterElement {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-
-  .running-query-line {
-    display: flex;
-    height: 8px;
-    width: 8px;
-    border-radius: 100%;
-    background: var(--theme-primary);
-  }
-
-  .running-query-error-line {
-    display: flex;
-    height: 8px;
-    width: 8px;
-    border-radius: 100%;
-    background: var(--theme-negative);
-  }
-}
-
-.editor .tok-keyword {
-  color: var(--editor-keyword);
-  font-weight: bold;
-}
-
-.editor .tok-operator {
-  color: var(--editor-operator);
-}
-
-.editor .tok-variable-2 {
-  color: var(--editor-variable-2);
-}
-
-.editor .tok-variable-3,
-.editor .tok-type {
-  color: var(--editor-variable-3);
-}
-
-.editor .tok-builtin {
-  color: var(--editor-builtin);
-}
-
-.editor .tok-atom {
-  color: var(--editor-atom);
-}
-
-.editor .tok-number {
-  color: var(--editor-number);
-}
-
-.editor .tok-def {
-  color: var(--editor-def);
-}
-
-.editor .tok-string {
-  color: var(--editor-string);
-}
-
-.editor .tok-string2 {
-  color: var(--editor-string-2);
-}
-
-.editor .tok-comment {
-  color: var(--editor-comment);
-}
-
-.editor .tok-variable {
-  color: var(--editor-variable);
-}
-
-.editor .tok-tag {
-  color: var(--editor-tag);
-}
-
-.editor .tok-meta {
-  color: var(--editor-meta);
-}
-
-.editor .tok-attribute {
-  color: var(--editor-attribute);
-}
-
-.editor .tok-property {
-  color: var(--editor-property);
-}
-
-.editor .tok-qualifier {
-  color: var(--editor-qualifier);
-}
-
-.editor .tok-variable-3,
-.editor .tok-type {
-  color: var(--editor-variable-3);
-}
-
-.editor .tok-typeName {
-  color: var(--editor-type-name);
-}
-
-.editor .tok-punctuation {
-  color: var(--editor-punctuation);
-}
-
-.editor .tok-propertyName {
-  color: var(--editor-property-name);
-}
-
-.editor .tok-className {
-  color: var(--editor-class-name);
-}
-
-.editor .tok-bool {
-  color: var(--editor-bool);
-}
-
-.editor .tok-variableName {
-  color: var(--editor-variable-name);
-}
-
-.editor .tok-labelName {
-  color: var(--editor-label-name);
-}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-autocompletion.scss b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-autocompletion.scss
new file mode 100644
index 0000000000..85bbf8d766
--- /dev/null
+++ b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-autocompletion.scss
@@ -0,0 +1,49 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+@mixin base-code-editor-autocompletion() {
+  .cm-tooltip.cm-tooltip-autocomplete {
+    background: unset;
+    border: none;
+
+    & > ul {
+      border-radius: var(--theme-form-element-radius);
+    }
+
+    & li {
+      display: flex;
+      align-items: center;
+    }
+
+    & .cm-completionIcon {
+      opacity: 1;
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      margin-right: 0.6em;
+
+      &:not([src]) {
+        opacity: 0;
+      }
+    }
+
+    & li:hover {
+      background: var(--theme-sub-secondary);
+      color: var(--theme-on-secondary);
+    }
+
+    & li[aria-selected='true'] {
+      background: var(--theme-secondary);
+      color: var(--theme-text-primary-on-light);
+    }
+  }
+
+  .cm-tooltip.cm-completionInfo {
+    margin-left: 8px;
+  }
+}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-tooltip.scss b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-tooltip.scss
new file mode 100644
index 0000000000..be8821b66f
--- /dev/null
+++ b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor-tooltip.scss
@@ -0,0 +1,31 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+@mixin base-code-editor-tooltip() {
+  .cm-tooltip {
+    font-family: var(--theme-font-family);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-size: var(--theme-typography-body2-font-size);
+    line-height: var(--theme-typography-body2-line-height);
+    font-weight: var(--theme-typography-body2-font-weight);
+    letter-spacing: var(--theme-typography-body2-letter-spacing);
+    text-decoration: inherit;
+    text-transform: inherit;
+
+    box-shadow:
+      0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+      0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+      0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+    background-color: var(--theme-surface);
+    color: var(--theme-on-surface);
+    border: none;
+    border-radius: var(--theme-form-element-radius);
+  }
+}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/base-code-editor.scss b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor.scss
new file mode 100644
index 0000000000..fc3e49bc36
--- /dev/null
+++ b/webapp/packages/plugin-codemirror6/src/theme/base-code-editor.scss
@@ -0,0 +1,355 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+@mixin base-code-editor() {
+  .editor,
+  .cm-editor,
+  .cm-mergeView,
+  .cm-mergeViewEditors,
+  .cm-scroller,
+  .ReactCodemirror {
+    width: 100%;
+    height: 100% !important;
+  }
+
+  .editor,
+  .ReactCodemirror,
+  .cm-mergeView,
+  .cm-mergeViewEditors,
+  .cm-editor,
+  .cm-gotoLine {
+    font-family: var(--theme-font-family);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-size: var(--theme-typography-body2-font-size);
+    line-height: var(--theme-typography-body2-line-height);
+    font-weight: var(--theme-typography-body2-font-weight);
+    letter-spacing: var(--theme-typography-body2-letter-spacing);
+    text-decoration: inherit;
+    text-transform: inherit;
+  }
+
+  .cm-mergeViewEditor:first-child {
+    border-right: 1px solid;
+    border-color: var(--theme-background);
+  }
+
+  .editor .cm-highlightTab {
+    opacity: 0.6;
+    color: var(--theme-text-hint-on-light);
+    pointer-events: none;
+  }
+
+  .editor .cm-newline {
+    color: var(--theme-text-hint-on-light);
+    opacity: 0.6;
+    margin-left: 4px;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .editor .cm-highlightSpace {
+    background-image: radial-gradient(circle at 50% 55%, var(--theme-text-hint-on-light) 15%, transparent 5%);
+    opacity: 0.6;
+    background-position: center;
+  }
+
+  .editor {
+    background-color: var(--theme-surface);
+    color: var(--theme-on-surface);
+  }
+
+  .editor .cm-scroller {
+    outline: none;
+    line-height: unset;
+  }
+
+  .editor .cm-content {
+    caret-color: var(--editor-cursor);
+  }
+
+  .editor .cm-cursor {
+    border-left-color: var(--editor-cursor);
+  }
+
+  .editor .cm-link {
+    &.cm-link-loaded {
+      color: var(--theme-primary);
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .editor .cm-dropCursor {
+    border-left: 1.2px solid var(--editor-cursor);
+  }
+
+  .editor .cm-gutters,
+  .cm-panel {
+    background-color: var(--theme-surface);
+    color: var(--theme-text-hint-on-light);
+    border-color: var(--theme-background);
+  }
+
+  .cm-panels-top,
+  .cm-panels-bottom {
+    border-color: var(--theme-background);
+  }
+
+  .editor .cm-activeLine {
+    box-shadow: 0 0 0 2px var(--theme-sub-secondary);
+  }
+
+  .editor .cm-activeLineGutter {
+    color: var(--theme-on-surface);
+  }
+
+  .ͼ2 .cm-activeLine:not(.cm-changedLine, .cm-deletedLine),
+  .ͼ2 .cm-activeLineGutter:not(.cm-changedLineGutter, .cm-deletedLineGutter) {
+    background-color: unset;
+  }
+
+  .editor .cm-gotoLine.cm-panel {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    padding: 4px 8px;
+    gap: 8px;
+    min-width: 160px;
+    container-type: inline-size;
+
+    & label {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      text-transform: uppercase;
+      letter-spacing: -0.1px;
+      gap: 4px;
+    }
+
+    & input {
+      font-family: var(--theme-font-family);
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      font-size: var(--theme-typography-body2-font-size);
+      line-height: var(--theme-typography-body2-line-height);
+      font-weight: var(--theme-typography-body2-font-weight);
+      letter-spacing: var(--theme-typography-body2-letter-spacing);
+      text-decoration: inherit;
+      text-transform: inherit;
+      max-width: 60px;
+      height: 24px;
+      padding-inline: 8px;
+
+      &:focus {
+        border-color: var(--theme-primary);
+      }
+    }
+    & .cm-button {
+      font-family: var(--theme-font-family);
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      font-size: var(--theme-typography-body2-font-size);
+      line-height: var(--theme-typography-body2-line-height);
+      font-weight: var(--theme-typography-body2-font-weight);
+      letter-spacing: var(--theme-typography-body2-letter-spacing);
+      text-decoration: inherit;
+      text-transform: inherit;
+      background: transparent;
+      height: 24px;
+      padding-block: 0;
+      margin-right: 24px;
+
+      font-weight: 500;
+      text-transform: uppercase;
+
+      color: var(--theme-primary);
+      border-radius: 4px;
+      border-color: var(--theme-primary);
+
+      &:hover {
+        background: color-mix(in srgb, transparent, var(--theme-primary) 5%);
+      }
+
+      @container (width < 240px) {
+        display: none;
+      }
+    }
+
+    & button[name='close'] {
+      margin-left: auto;
+      padding: 0 8px;
+      top: 4px;
+      height: 24px;
+      width: 24px;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--theme-on-surface);
+      border-color: var(--theme-on-surface);
+      font-size: 16px;
+
+      &:hover {
+        background: color-mix(in srgb, transparent, var(--theme-on-surface) 5%);
+      }
+    }
+  }
+
+  .editor .cm-content ::selection {
+    background: var(--theme-primary);
+    color: white;
+  }
+
+  .editor .cm-lineNumbers .cm-gutterElement {
+    min-width: 3ch;
+    box-sizing: content-box;
+  }
+
+  .editor .cm-gutters .cm-foldGutter .cm-gutterElement {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .editor .cm-gutters .cm-foldGutter .cm-gutterElement-icon {
+    padding: 0 3px 0 5px;
+    width: 20px;
+    height: 12px;
+    display: flex;
+
+    &.cm-foldGutter-folded svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .editor .cm-gutters .query-status .cm-gutterElement {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+
+    .running-query-line {
+      display: flex;
+      height: 8px;
+      width: 8px;
+      border-radius: 100%;
+      background: var(--theme-primary);
+    }
+
+    .running-query-error-line {
+      display: flex;
+      height: 8px;
+      width: 8px;
+      border-radius: 100%;
+      background: var(--theme-negative);
+    }
+  }
+
+  .editor .tok-keyword {
+    color: var(--editor-keyword);
+    font-weight: bold;
+  }
+
+  .editor .tok-operator {
+    color: var(--editor-operator);
+  }
+
+  .editor .tok-variable-2 {
+    color: var(--editor-variable-2);
+  }
+
+  .editor .tok-variable-3,
+  .editor .tok-type {
+    color: var(--editor-variable-3);
+  }
+
+  .editor .tok-builtin {
+    color: var(--editor-builtin);
+  }
+
+  .editor .tok-atom {
+    color: var(--editor-atom);
+  }
+
+  .editor .tok-number {
+    color: var(--editor-number);
+  }
+
+  .editor .tok-def {
+    color: var(--editor-def);
+  }
+
+  .editor .tok-string {
+    color: var(--editor-string);
+  }
+
+  .editor .tok-string2 {
+    color: var(--editor-string-2);
+  }
+
+  .editor .tok-comment {
+    color: var(--editor-comment);
+  }
+
+  .editor .tok-variable {
+    color: var(--editor-variable);
+  }
+
+  .editor .tok-tag {
+    color: var(--editor-tag);
+  }
+
+  .editor .tok-meta {
+    color: var(--editor-meta);
+  }
+
+  .editor .tok-attribute {
+    color: var(--editor-attribute);
+  }
+
+  .editor .tok-property {
+    color: var(--editor-property);
+  }
+
+  .editor .tok-qualifier {
+    color: var(--editor-qualifier);
+  }
+
+  .editor .tok-variable-3,
+  .editor .tok-type {
+    color: var(--editor-variable-3);
+  }
+
+  .editor .tok-typeName {
+    color: var(--editor-type-name);
+  }
+
+  .editor .tok-punctuation {
+    color: var(--editor-punctuation);
+  }
+
+  .editor .tok-propertyName {
+    color: var(--editor-property-name);
+  }
+
+  .editor .tok-className {
+    color: var(--editor-class-name);
+  }
+
+  .editor .tok-bool {
+    color: var(--editor-bool);
+  }
+
+  .editor .tok-variableName {
+    color: var(--editor-variable-name);
+  }
+
+  .editor .tok-labelName {
+    color: var(--editor-label-name);
+  }
+}
diff --git a/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss b/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
index 9e8eb0a042..ebcf852d7a 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
+++ b/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
@@ -7,8 +7,14 @@
  */
 
 @import '@cloudbeaver/core-theming/src/styles/theme-dark';
+@import './base-code-editor';
+@import './base-code-editor-autocompletion';
+@import './base-code-editor-tooltip';
 
 :global .#{$theme-class} {
+  @include base-code-editor;
+  @include base-code-editor-autocompletion;
+  @include base-code-editor-tooltip;
   --editor-meta: #ff1717;
   --editor-keyword: rgb(115, 158, 202);
   --editor-atom: #56c8d8;
diff --git a/webapp/packages/plugin-codemirror6/src/theme/light.module.scss b/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
index 5637d30d66..1dcecf34a7 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
+++ b/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
@@ -7,8 +7,14 @@
  */
 
 @import '@cloudbeaver/core-theming/src/styles/theme-light';
+@import './base-code-editor';
+@import './base-code-editor-autocompletion';
+@import './base-code-editor-tooltip';
 
 :global .#{$theme-class} {
+  @include base-code-editor;
+  @include base-code-editor-autocompletion;
+  @include base-code-editor-tooltip;
   --editor-meta: #ff1717;
   --editor-keyword: #07a;
   --editor-atom: #905;
diff --git a/webapp/packages/plugin-codemirror6/src/theme/styles.ts b/webapp/packages/plugin-codemirror6/src/theme/styles.ts
index 60aee721ba..0c4b60881b 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/styles.ts
+++ b/webapp/packages/plugin-codemirror6/src/theme/styles.ts
@@ -7,9 +7,6 @@
  */
 import type { ThemeSelector } from '@cloudbeaver/core-theming';
 
-import './_base-code-editor.css';
-import './_base-code-editor-tooltip.css';
-import './_base-code-editor-autocompletion.css';
 import type Dark from './dark.module.scss';
 import type Light from './light.module.scss';