Correct some errors/annoyances in ide colour schemes

Hi,
I have found that some of the colour schemes in Zerynth don’t work very well. These are the problems I have encountered.
Ambience: line numbers are nearly invisible, line highlighting is invisible, find/change hard to read
Blackboard: highlighted line almost invisible
Chaos: line numbers barely visible, line highlight barely visible, find/change hard to read.
Chrome: highlighted line could use a bit more contrast.
Clouds: good but I prefer a dark theme
Clouds midnight: Line highlight invisible
Cobalt: Find/change text invisible
Crimson editor: highlighted line could use a bit more contrast.
Dawn: colour highlighting shows almost no differentiation, line highlight needs more contrast
Dreamweaver: good for a light theme
Eclipse: nearly identical to Dreamweaver. Same comment.
Github: Line highlight nearly invisible
Idle-Fingers: Line highlight invisible, find/change text invisible
Iplastic: okay for a light theme but colour differentiation could be more contrasty
Katzenmilch: hardly any colour differentiation, line highlight might as well be invisible.
KR_theme: find/change text invisible
Kuroir: okay for a light theme, colours a bit bland for my taste
Merbivore: find/change text hard to read, line highlight nearly invisible
Merbivore soft: find/change text hard to read, line highlight nearly invisible
Mono_industrial: find/change text invisible, highlighted line invisible, comments barely readable
Monokai: find/change text invisible, highlighted line invisible, comments barely readable
Pastel_on_dark: highlighted line invisible.
Solarized_dark: highlighted line nearly invisible
Solarized_light: okay for a light theme
Sqlserver: okay for a light theme
Terminal: highlighted line nearly invisible, find/change text hard to read.
Textmate: good for a light theme
Tomorrow: nearly as good as Textmate
Tomorrow_night_blue: find/change text invisible
Tomorrow_night_bright: find/change text hard to read, line highlight almost invisible, invisibles nearly invisible
Tomorrow_night_eighties: find/change text hard to read, line highlight almost invisible, invisibles nearly invisible
Tomorrow_night: find/change text hard to read, line highlight almost invisible, invisibles nearly invisible
Twilight: find/change text invisible, highlighted line invisible, invisibles nearly invisible
Vibrant_ink: Good! but find/change text invisible, highlighted line nearly invisible
x_code: okay for a light theme, highlighted line could be more contrasty.

Some of the light themes are okay, but I prefer a dark theme (much easier on the eyes, especially at night), and none of them work well. The only usable ones, in my opinion, are Blackboard and Terminal. With Terminal the colour highlighting is clear, I can just read the find/change text if I squint hard enough, and I can generally find the highlighted line in less than 30 seconds. Blackboard has good find/change text but it can take me up to a minute to find the highlighted line. The rest just don’t cut it for me, and in my opinion, some are just unusable, especially the ones where the find/change text is white text on a white background.

I’d be happy to set up my own colour scheme if that were possible. I asked the same question a couple of years ago but received no responses. Create my own editor colour scheme

Thanks.

Hi @mogplus8
Thanks for these suggestions.

If you are familiar with JS, you can modify the colors in the theme files in install_directory/dist/r2.4.1/studio/bower_components/ace-builds/src-min-noconflict/ theme-ambiance for instance.
Edit the file then restart Zerynth studio to see the effects.

We are always working on adding new features for Zerynth studio, Stay tuned in the coming updates for them. :smile:

Hi @karimhamdy1 thanks for the quick response.
Problem number one is I don’t know the first thing about JS (I assume you mean JavaScript?), but I’m guessing I can find the relevant colour definitions in the file and update them.
Problem number two is I couldn’t find that directory structure in my install. There is no “studio” dir but there is a “bower_components” under /zerynth-2.4.0, which is where I installed Zerynth. However there is no src-min-noconflict or theme-ambiance anywhere in the install directory.
I found a file in /proc/31546/cwd/bower_components/ace-builds/source-min-noconflict, so would that be the one? Guess I’ll find out, with my standard trial and (lots of) error methodology.
I’m using Linux Mint 19.3 BTW
Thanks, Ian
*** EDIT ***
Well, so much for that idea. I tried editing the theme-Vibrant_ink.js file, then closed Zerynth and opened it again, and the file vanished! There was no more /proc/31546 at all! Searched for the file again and it was in /proc/1848. Closed Zerynth and opened it again, and now /proc/1848 was gone, and /proc/6981 had appeared. It seems that Zerynth builds the theme files on the fly, or recreates them or something, whenever it is started, and in a random folder name in /proc.
There is nothing in the Zerynth install folder related to themes that I can see.
Any other ideas?..
Thanks, Ian
*** EDIT 2 ***
Found another bunch of theme files in .zerynth2 hidden folder in my home directory. Exploring those now.
:wink: Ina

Hi All,
Well I found that by editing the ~/.zerynth2/dist/r3.4.1/studio/bower_components/ace-builds/src-min-noconfilct/theme-mytheme.js file I was able to change the colour settings in Zerynth. Only two small problems.

  1. I can’t figure out which settings (if any…) control the background and foreground of the find/change dialog, and
  2. I have found the when I try to use my theme the find/change dialog doesn’t appear when I hit ctrl-F or ctrl-H.
    This latter behaviour is a bit odd. I have found that if I start Zerynth with one of the standard themes, the find/change dialog works perfectly. However if I close the dialog then change to my theme, ctrl-F or H does nothing. If I open the find/change dialog with a standard theme, then leave the dialog open, then change to my theme, the dialog stays open and works. However if I close it I cannot open it again. On top of that if I change back to a standard theme the find/change dialog box still does not appear with ctrl-F/H.
    I think there is still a bug in my theme file though, as some of the settings that I think should do something don’t. I can’t see it though, and I’ve been through it a dozen times. I’ve attached it so if anybody feels like having a look and advising me where the bug is I’d appreciate it. Below is the file. It’s a copy of theme-vibrant_ink, with a few changes and reformatted so I could understand it. The only changes I’ve made are to colour values.

Thanks,

ace.define("ace/theme/mytheme",["require","exports","module","ace/lib/dom"], function(require, exports, module) {

exports.isDark = true;
exports.cssClass = "ace-mytheme";
exports.cssText = "\
.ace-mytheme .ace_gutter {background: #1A1A1A; color: #BEBEBE}\
.ace-mytheme .ace_print-margin {width: 1px; background: #FF00FF}\
.ace-mytheme {background-color: #1F1F1F; color: #F0F0F0}\
.ace-mytheme .ace_cursor {color: #F8F8F0}\
.ace-mytheme .ace_marker-layer .ace_selection {background: #5588CC}\
.ace-mytheme .ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FF00FF;}\
.ace-mytheme .ace_marker-layer .ace_step {background: rgb(102, 82, 0)}\
.ace-mytheme .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid red}\
.ace-mytheme .ace_marker-layer .ace_active-line {background: #335588}\
.ace-mytheme .ace_gutter-active-line {background-color: #335588}\
.ace-mytheme .ace_marker-layer .ace_selected-word {border: 1px solid #225588}\
.ace-mytheme .ace_invisible {color: #808080}\
.ace-mytheme .ace_entity.ace_name.ace_tag,\
.ace-mytheme .ace_keyword,{color: #FFFF00}\
.ace-mytheme .ace_meta.ace_tag,\
.ace-mytheme .ace_storage {color: #ddc52b}\
.ace-mytheme .ace_punctuation,\
.ace-mytheme .ace_punctuation.ace_tag {color: #fff !important}\
.ace-mytheme .ace_constant.ace_character,\
.ace-mytheme .ace_constant.ace_language,\
.ace-mytheme .ace_constant.ace_numeric {color: #99CC99}\
.ace-mytheme .ace_constant.ace_other {color: #FFCC00}\
.ace-mytheme .ace_invalid {color: #F8F8F0;background-color: #F92672}\
.ace-mytheme .ace_invalid.ace_deprecated {color: #CCFF33;background-color: #000000}\
.ace-mytheme .ace_support.ace_constant,\
.ace-mytheme .ace_support.ace_function {color: #ff6400}\
.ace-mytheme .ace_fold {background-color: #A6E22E; border-color: #F8F8F2}\
.ace-mytheme .ace_storage.ace_type,\
.ace-mytheme .ace_support.ace_class,\
.ace-mytheme .ace_support.ace_type {font-style: italic; color: #66D9EF}\
.ace-mytheme .ace_entity.ace_name.ace_function,\
.ace-mytheme .ace_entity.ace_other,\
.ace-mytheme .ace_entity.ace_other.ace_attribute-name {font-style: italic;color: #99CC99}\
.ace-mytheme .ace_variable {color: #FFCC00}\
.ace-mytheme .ace_variable.ace_parameter {font-style: italic; color: #FD971F}\
.ace-mytheme .ace_string {color: #66FF00}\
.ace-myTheme .ace_string .ace_regexp {color: #44B4CC} \
.ace-mytheme .ace_comment {color: #3388FF}\
.ace-mytheme .ace_indent-guide {\
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWPQ0FD0ZXBzd/wPAAjVAoxeSgNeAAAAAElFTkSuQmCC) right repeat-y\
}";

var dom = require("../lib/dom");
dom.importCssString(exports.cssText, exports.cssClass);
});