Set Default Theme in Code Editor
Open Discussion
As a cPanel User, and one who often uses the cPanel Code Editor to develop websites, I would like to be able to set a default Theme in the editor, so that I don't have to change it to my preferred theme every time I open a file.
The default theme is set to "Chrome" whenever a file opens in the Code Editor, and the bright background hurts my eyes after a while. It gets annoying having to manually change it every time I open the editor.
A default dark theme for the File Manager would be nice too, if it's not too hard :)
Files:
code_editor_opt...
This is still on request and not sure if it has been implemented. I have found a way to change theme using chrome extension which replaces default style on editor load. Extension is: https://chrome.google.com/webstore/detail/javascript-css-auto-injec/oakjdafonfdgbgbcofjpaecngfimohno
What you have to do is load load your CSS but keeping .ace-chrome names for classes. Example of Dracula theme is below:
.ace-chrome .ace_gutter {background: #282a36;color: rgb(144,145,148)}.ace-chrome .ace_print-margin {width: 1px;background: #44475a}.ace-chrome {background-color: #282a36;color: #f8f8f2}.ace-chrome .ace_cursor {color: #f8f8f0}.ace-chrome .ace_marker-layer .ace_selection {background: #44475a}.ace-chrome.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #282a36;border-radius: 2px}.ace-chrome .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-chrome .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #a29709}.ace-chrome .ace_marker-layer .ace_active-line {background: #44475a}.ace-chrome .ace_gutter-active-line {background-color: #44475a}.ace-chrome .ace_marker-layer .ace_selected-word {box-shadow: 0px 0px 0px 1px #a29709;border-radius: 3px;}.ace-chrome .ace_fold {background-color: #50fa7b;border-color: #f8f8f2}.ace-chrome .ace_keyword {color: #ff79c6}.ace-chrome .ace_constant.ace_language {color: #bd93f9}.ace-chrome .ace_constant.ace_numeric {color: #bd93f9}.ace-chrome .ace_constant.ace_character {color: #bd93f9}.ace-chrome .ace_constant.ace_character.ace_escape {color: #ff79c6}.ace-chrome .ace_constant.ace_other {color: #bd93f9}.ace-chrome .ace_support.ace_function {color: #8be9fd}.ace-chrome .ace_support.ace_constant {color: #6be5fd}.ace-chrome .ace_support.ace_class {font-style: italic;color: #66d9ef}.ace-chrome .ace_support.ace_type {font-style: italic;color: #66d9ef}.ace-chrome .ace_storage {color: #ff79c6}.ace-chrome .ace_storage.ace_type {font-style: italic;color: #8be9fd}.ace-chrome .ace_invalid {color: #F8F8F0;background-color: #ff79c6}.ace-chrome .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #bd93f9}.ace-chrome .ace_string {color: #f1fa8c}.ace-chrome .ace_comment {color: #6272a4}.ace-chrome .ace_variable {color: #50fa7b}.ace-chrome .ace_variable.ace_parameter {font-style: italic;color: #ffb86c}.ace-chrome .ace_entity.ace_other.ace_attribute-name {color: #50fa7b}.ace-chrome .ace_entity.ace_name.ace_function {color: #50fa7b}.ace-chrome .ace_entity.ace_name.ace_tag {color: #ff79c6}.ace-chrome .ace_invisible {color: #626680;}.ace-chrome .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y}
This is still on request and not sure if it has been implemented. I have found a way to change theme using chrome extension which replaces default style on editor load. Extension is: https://chrome.google.com/webstore/detail/javascript-css-auto-injec/oakjdafonfdgbgbcofjpaecngfimohno
What you have to do is load load your CSS but keeping .ace-chrome names for classes. Example of Dracula theme is below:
.ace-chrome .ace_gutter {background: #282a36;color: rgb(144,145,148)}.ace-chrome .ace_print-margin {width: 1px;background: #44475a}.ace-chrome {background-color: #282a36;color: #f8f8f2}.ace-chrome .ace_cursor {color: #f8f8f0}.ace-chrome .ace_marker-layer .ace_selection {background: #44475a}.ace-chrome.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #282a36;border-radius: 2px}.ace-chrome .ace_marker-layer .ace_step {background: rgb(198, 219, 174)}.ace-chrome .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #a29709}.ace-chrome .ace_marker-layer .ace_active-line {background: #44475a}.ace-chrome .ace_gutter-active-line {background-color: #44475a}.ace-chrome .ace_marker-layer .ace_selected-word {box-shadow: 0px 0px 0px 1px #a29709;border-radius: 3px;}.ace-chrome .ace_fold {background-color: #50fa7b;border-color: #f8f8f2}.ace-chrome .ace_keyword {color: #ff79c6}.ace-chrome .ace_constant.ace_language {color: #bd93f9}.ace-chrome .ace_constant.ace_numeric {color: #bd93f9}.ace-chrome .ace_constant.ace_character {color: #bd93f9}.ace-chrome .ace_constant.ace_character.ace_escape {color: #ff79c6}.ace-chrome .ace_constant.ace_other {color: #bd93f9}.ace-chrome .ace_support.ace_function {color: #8be9fd}.ace-chrome .ace_support.ace_constant {color: #6be5fd}.ace-chrome .ace_support.ace_class {font-style: italic;color: #66d9ef}.ace-chrome .ace_support.ace_type {font-style: italic;color: #66d9ef}.ace-chrome .ace_storage {color: #ff79c6}.ace-chrome .ace_storage.ace_type {font-style: italic;color: #8be9fd}.ace-chrome .ace_invalid {color: #F8F8F0;background-color: #ff79c6}.ace-chrome .ace_invalid.ace_deprecated {color: #F8F8F0;background-color: #bd93f9}.ace-chrome .ace_string {color: #f1fa8c}.ace-chrome .ace_comment {color: #6272a4}.ace-chrome .ace_variable {color: #50fa7b}.ace-chrome .ace_variable.ace_parameter {font-style: italic;color: #ffb86c}.ace-chrome .ace_entity.ace_other.ace_attribute-name {color: #50fa7b}.ace-chrome .ace_entity.ace_name.ace_function {color: #50fa7b}.ace-chrome .ace_entity.ace_name.ace_tag {color: #ff79c6}.ace-chrome .ace_invisible {color: #626680;}.ace-chrome .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHB3d/8PAAOIAdULw8qMAAAAAElFTkSuQmCC) right repeat-y}
Replies have been locked on this page!