diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index bc9702019..5ecd0c91b 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -24,8 +24,8 @@ import { autocompleteEmoji } from './autocompleteEmoji.js';
 import { searchKeymap, search } from '@codemirror/search';
 
 import * as themesImport from '@uiw/codemirror-themes-all';
-import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js';
-import darkbrewery from '../../../themes/codeMirror/customThemes/darkbrewery.js';
+import defaultCM5Theme from '@themes/codeMirror/default.js';
+import darkbrewery from '@themes/codeMirror/darkbrewery.js';
 
 const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport };
 const themeCompartment = new Compartment();
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 8b7a52824..3d489de4a 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -25,8 +25,8 @@ const ThemeSnippets = {
 
 //import EditorThemes from '../../../../build/homebrew/codeMirror/editorThemes.json';
 import * as themesImport from '@uiw/codemirror-themes-all';
-import defaultCM5Theme from '@themes/codeMirror/customThemes/default.js';
-import darkbrewery from '../../../../themes/codeMirror/customThemes/darkbrewery.js';
+import defaultCM5Theme from '@themes/codeMirror/default.js';
+import darkbrewery from '@themes/codeMirror/darkbrewery.js';
 
 const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport };
 
diff --git a/themes/codeMirror/customEditorStyles.less b/themes/codeMirror/customEditorStyles.less
deleted file mode 100644
index b6e95d14b..000000000
--- a/themes/codeMirror/customEditorStyles.less
+++ /dev/null
@@ -1,83 +0,0 @@
-.editor .codeEditor .cm-editor {
-	// Themes with dark backgrounds
-	&.cm-s-3024-night,
-	&.cm-s-abbott,
-	&.cm-s-abcdef,
-	&.cm-s-ambiance,
-	&.cm-s-ayu-dark,
-	&.cm-s-ayu-mirage,
-	&.cm-s-base16-dark,
-	&.cm-s-bespin,
-	&.cm-s-blackboard,
-	&.cm-s-cobalt,
-	&.cm-s-colorforth,
-	&.cm-s-darcula,
-	&.cm-s-dracula,
-	&.cm-s-duotone-dark,
-	&.cm-s-erlang-dark,
-	&.cm-s-gruvbox-dark,
-	&.cm-s-hopscotch,
-	&.cm-s-icecoder,
-	&.cm-s-isotope,
-	&.cm-s-lesser-dark,
-	&.cm-s-liquibyte,
-	&.cm-s-lucario,
-	&.cm-s-material,
-	&.cm-s-material-darker,
-	&.cm-s-material-ocean,
-	&.cm-s-material-palenight,
-	&.cm-s-mbo,
-	&.cm-s-midnight,
-	&.cm-s-monokai,
-	&.cm-s-moxer,
-	&.cm-s-night,
-	&.cm-s-nord,
-	&.cm-s-oceanic-next,
-	&.cm-s-panda-syntax,
-	&.cm-s-paraiso-dark,
-	&.cm-s-pastel-on-dark,
-	&.cm-s-railscasts,
-	&.cm-s-rubyblue,
-	&.cm-s-seti,
-	&.cm-s-shadowfox,
-	&.cm-s-the-matrix,
-	&.cm-s-tomorrow-night-bright,
-	&.cm-s-tomorrow-night-eighties,
-	&.cm-s-twilight,
-	&.cm-s-vibrant-ink,
-	&.cm-s-xq-dark,
-	&.cm-s-yonce,
-	&.cm-s-zenburn {
-		.CodeMirror-code {
-			.block:not(.cm-comment) { color : magenta; }
-			.columnSplit {
-				color            : black;
-				background-color : rgba(35,153,153,0.5);
-			}
-			.pageLine {
-				background-color : rgba(255,255,255,0.5);
-				& ~ pre.CodeMirror-line { color : black; }
-			}
-		}
-	}
-	// Themes with light backgrounds
-	&.cm-s-default,
-	&.cm-s-3024-day,
-	&.cm-s-ambiance-mobile,
-	&.cm-s-base16-light,
-	&.cm-s-duotone-light,
-	&.cm-s-eclipse,
-	&.cm-s-elegant,
-	&.cm-s-juejin,
-	&.cm-s-neat,
-	&.cm-s-neo,
-	&.cm-s-paraiso-lightm
-	&.cm-s-solarized,
-	&.cm-s-ssms,
-	&.cm-s-ttcn,
-	&.cm-s-xq-light,
-	&.cm-s-yeti {
-		// Future styling for themes with light backgrounds
-		--dummyVar : 'currently unused';
-	}
-}
diff --git a/themes/codeMirror/customThemes/darkbrewery.js b/themes/codeMirror/darkbrewery.js
similarity index 74%
rename from themes/codeMirror/customThemes/darkbrewery.js
rename to themes/codeMirror/darkbrewery.js
index 4bc1aadd8..4dca1e466 100644
--- a/themes/codeMirror/customThemes/darkbrewery.js
+++ b/themes/codeMirror/darkbrewery.js
@@ -20,15 +20,15 @@ export default EditorView.theme({
 		backgroundColor : '#293134',
 		whiteSpace      : 'nowrap',
 	},
-    '.cm-foldGutter' : {
-		borderLeft    : '1px solid #555',
+	'.cm-foldGutter' : {
+		borderLeft      : '1px solid #555',
 		backgroundColor : '#293134',
 	},
-    '.cm-foldGutter:hover' : {
-        backgroundColor : '#555',
+	'.cm-foldGutter:hover' : {
+		backgroundColor : '#555',
 	},
-    '.cm-gutterElement' : {
-        color: '#81969a',
+	'.cm-gutterElement' : {
+		color : '#81969a',
 	},
 	'.cm-linenumber' : {
 		padding    : '0 3px 0 5px',
@@ -48,41 +48,41 @@ export default EditorView.theme({
 	'.cm-activeLine' : {
 		backgroundColor : '#868c9323',
 	},
-    '.cm-gutterElement.cm-activeLineGutter' : {
+	'.cm-gutterElement.cm-activeLineGutter' : {
 		backgroundColor : '#868c9323',
 	},
-    '.cm-activeLine' : {
+	'.cm-activeLine' : {
 		backgroundColor : '#868c9323',
 	},
 	'.cm-selected' : {
 		backgroundColor : '#d7d4f0',
 	},
-    '.cm-pageLine' : {
-        backgroundColor: '#7ca97c',
-        color: '#000',
-        fontWeight: 'bold',
-        letterSpacing: '.5px',
-        borderTop: '1px solid #ff0',
+	'.cm-pageLine' : {
+		backgroundColor : '#7ca97c',
+		color           : '#000',
+		fontWeight      : 'bold',
+		letterSpacing   : '.5px',
+		borderTop       : '1px solid #ff0',
 	},
-    '.cm-columnSplit' : {
-        backgroundColor: '#7ca97c',
-        color: 'black',
-        fontWeight: 'bold',
-        letterSpacing: '1px',
-        borderBottom: '1px solid #ff0',
+	'.cm-columnSplit' : {
+		backgroundColor : '#7ca97c',
+		color           : 'black',
+		fontWeight      : 'bold',
+		letterSpacing   : '1px',
+		borderBottom    : '1px solid #ff0',
 	},
-    '.cm-line.cm-block, .cm-line .cm-inline-block' : {
-        color: '#E3E3E3',
+	'.cm-line.cm-block, .cm-line .cm-inline-block' : {
+		color : '#E3E3E3',
 	},
-    '.cm-definitionList .cm-definitionTerm' : {
-        color: '#E3E3E3',
+	'.cm-definitionList .cm-definitionTerm' : {
+		color : '#E3E3E3',
 	},
-    '.cm-definitionList .cm-definitionColon' : {
-        backgroundColor: '#0000',
-        color: '#e3FF00',
+	'.cm-definitionList .cm-definitionColon' : {
+		backgroundColor : '#0000',
+		color           : '#e3FF00',
 	},
-    '.cm-definitionList .cm-definitionDesc' : {
-        color: '#b5858d',
+	'.cm-definitionList .cm-definitionDesc' : {
+		color : '#b5858d',
 	},
 
 	// Semantic classes
diff --git a/themes/codeMirror/customThemes/darkvision.css b/themes/codeMirror/darkvision.css
similarity index 91%
rename from themes/codeMirror/customThemes/darkvision.css
rename to themes/codeMirror/darkvision.css
index 40a17ec2b..c88455c91 100644
--- a/themes/codeMirror/customThemes/darkvision.css
+++ b/themes/codeMirror/darkvision.css
@@ -1,3 +1,8 @@
+/*This document is old, from back when Codemirror was version 5, 
+if someone wants to update it, feel free, it needs to be like default.js or darkbrewery.js
+Then imported in snippetbar.jsx and codeEditor.jsx.
+*/
+
 .CodeMirror {
 	background: #0C0C0C;
 	color: #B9BDB6;
diff --git a/themes/codeMirror/customThemes/default.js b/themes/codeMirror/default.js
similarity index 100%
rename from themes/codeMirror/customThemes/default.js
rename to themes/codeMirror/default.js