You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#111872 Customize Code Editor Theme

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by dagroupinc on Friday, 23 September 2022 15:25 BST

dagroupinc
I'm not a big fan of the themes in Code Editor and would like to create my own custom theme (Sublime has some great ones). Whats the best way to creat my own custom theme so it doesn't get overwritten with updates to JCE?

Ryan
There isn't currently a way to use a custom theme without modifying the existing themes (you can choose from a small selection in Editor Profiles -> Plugin Parameters -> Code Editor), but I will add an override option in the next update, where you can add a theme.css file to a media/jce/css/codemirror/ folder to use instead of the selected theme.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan
Please try JCE Pro 2.9.31 Beta 2 - https://www.joomlacontenteditor.net/downloads/editor/pro/development You can now select a "Custom" option in the Code Editor Theme, and then use a codemirror.css file in media/jce/css/ to set the custom theme, for example, a theme based on Eclipse (not the use of the "cm-s-custom" selector to coincide with the "Custom" theme selection) :

.cm-s-custom span.cm-meta {color: #FF1717;}
.cm-s-custom span.cm-keyword { font-weight: bold; color: #7F0055; }
.cm-s-custom span.cm-atom {color: #219;}
.cm-s-custom span.cm-number {color: #164;}
.cm-s-custom span.cm-def {color: #00f;}
.cm-s-custom span.cm-variable {color: black;}
.cm-s-custom span.cm-variable-2 {color: #0000C0;}
.cm-s-custom span.cm-variable-3 {color: #0000C0;}
.cm-s-custom span.cm-property {color: black;}
.cm-s-custom span.cm-operator {color: black;}
.cm-s-custom span.cm-comment {color: #3F7F5F;}
.cm-s-custom span.cm-string {color: #2A00FF;}
.cm-s-custom span.cm-string-2 {color: #f50;}
.cm-s-custom span.cm-error {color: #f00;}
.cm-s-custom span.cm-qualifier {color: #555;}
.cm-s-custom span.cm-builtin {color: #30a;}
.cm-s-custom span.cm-bracket {color: #cc7;}
.cm-s-custom span.cm-tag {color: #170;}
.cm-s-custom span.cm-attribute {color: #00c;}

.CodeMirror-matchingbracket{
	border:1px solid gray;
	color:black !important;;
}
.cm-s-custom .CodeMirror-activeline-background {
    background: none repeat scroll 0 0 #e8f2ff !important;
}
.cm-s-custom .cm-matchhighlight { background: #e9e9e9 }
.cm-s-custom .cm-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);
}
You can also edit and override any other selected theme by including the styles in the codemirror.css file.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

dagroupinc
Thanks — we'll give this a try!