Change default theme in code editor

[FifthHorseman93]

Hey guys,

I do a lot of work in the cPanel code editor, and I have to open the preferences menu and change the color scheme every time I open a file (see picture). Is there a way I can set this "Pastel on Dark" color scheme to a default so I don't have to go through these steps every time?



I have the paper_lantern Dark theme set on my home menu (see second picture), but this doesn't affect the File Manager or code editor.



Any way I can set a default color scheme in the File Manager and/or code editor? The white light is a bit harsh on the eyes after a while.

 

[cPanelLauren]

This doesn't go off of the same theme as Paper Lanter does but, I do very much agree that it would be nice if the change you make in there was persistent. There was another thread about this not too long ago: SOLVED - Does cPanel Offer a dark theme for the code editor

I really think this could benefit from a feature request if you'd be up to making one, you can add them using the link in my signature. If you do end up creating one update this thread

Thanks!

 

[FifthHorseman93]

UPDATE: I created a Feature Request, please go like it and give it attention so hopefully it gets noticed! Thanks!

https://features.cpanel.net/topic/set-default-theme-in-code-editor

 

[cPanelLauren]

Awesome, @FifthHorseman93 thanks for that, I'm glad its got one added now

 

[markomo]

Hey guys,

I do a lot of work in the cPanel code editor, and I have to open the preferences menu and change the color scheme every time I open a file (see picture). Is there a way I can set this "Pastel on Dark" color scheme to a default so I don't have to go through these steps every time?

View attachment 63357

I have the paper_lantern Dark theme set on my home menu (see second picture), but this doesn't affect the File Manager or code editor.

View attachment 63361

Any way I can set a default color scheme in the File Manager and/or code editor? The white light is a bit harsh on the eyes after a while.

Hi guys, I was looking for same thing. After days of switching theme to dark, I've found a way to do it automatically.

I am using chrome and installed extension which can add CSS into specific page (by domain).
You can use this Extension is: Javascript & Css auto injection
Than open and add profile to it, enter your domain etc.

When ever you change theme, different javascript file is loaded.

If you want another theme, just replace JS styles (but keep class names .ace-chrome names for classes). On the top corner select Inject On Page Init.

Theme javascript:

ace.define("ace/theme/chrome", ["require", "exports", "module", "ace/lib/dom"], function(e, t, n) {

    t.isDark = !1, t.cssClass = "ace-chrome", t.cssText = '.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}';

    var r = e("../lib/dom");

    r.importCssString(t.cssText, t.cssClass)

})

Guide to change to different style:
1. Change to desired theme by pressing Ctrl + , (comma) and switch theme to what you want.
2. Open code inspector and look for Javascript with applied CSS style
3. Copy that JS and change all it's class names to .ace-chrome
4. Save new javascript fine somewhere you can load it from (like your public html folder / assets).
5. On the chome extension, add that file to load it On Page Init

To do: insert button with js to change theme between different file types. Or detect filetype of opened file and change theme you specify for each fine type