Improve Color Scheme for Template to Enhance Readability

[kristineds]

Referencing: https://wordpress.org/support/topic/two-suggestions-8?replies=1

---

I must admit, though, that I have great difficulty reading the code sections for the templates. The colors just don't stand out enough against the black background. Could you, perhaps, experiment with some other color schemes to enhance readability?

---

Templates referred to are the Email header/footer and Site templates. Perhaps something like this:
Color Scheme: [#282A36, #DA5647, #F5AB55, #71DA8C, #57AFBD]

[raamdev]

It would be nice to have a toggle somewhere that allows either changing the style, or just disabling syntax highlighting altogether. (Both would be ideal.)

[jaswrks]

Overview

This syntax highlighting is a feature provided (and themed by) CodeMirror. See theme demos to experiment with other themes. See also: this line of code in Comment Mail where the CodeMirror theme is loaded; i.e., to get a general sense of how this works in Comment Mail.

Next Actions (Pro Version)

• New feature branch in the websharks/comment-mail-pro repo.

• After this line add a new option key.

  'template_syntax_theme' => 'ambiance',

• Replace this line of code with the following:

  wp_enqueue_style('codemirror-'.$this->options['template_syntax_theme'].'-theme', set_url_scheme('//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/'.urlencode($this->options['template_syntax_theme']).'.min.css'), array('codemirror'), NULL, 'all');

• After this line add the following.

  $_panel_body .= '<table>'.
                 '  <tbody>'.
                 $form_fields->select_row(
                   array(
                       'label'           => sprintf(__('Syntax Highlighting Theme', $this->plugin->text_domain), esc_html($this->plugin->name)),
                       'placeholder'     => __('Select an Option...', $this->plugin->text_domain),
                       'name'            => 'template_syntax_theme',
                       'current_value'   => $current_value_for('template_syntax_theme'),
                       'allow_arbitrary' => FALSE,
                       'options'         => array(
                           'ambiance'      => __('Ambiance', $this->plugin->text_domain),
                           'base16-dark'   => __('Base 16 Dark', $this->plugin->text_domain),
                                       // add additional lines each for each of the available themes.
                       ),
                       'notes_after'     => '',
                   )).
                 '  </tbody>'.
                 '</table>';

  Note that a select menu will be presented which allows a site owner to choose from any of the available .min.css theme files listed here.

  You will need to modify the code snippet above to include all available theme options; i.e., add new options to the 'options' => array in the snippet above. The only two listed at the moment are ambiance (default) and base16-dark. There are many others to choose from.

  With the above in place, you should find that a new configurable option will appear here.

  

• Test your changes to be sure that it is possible to change the syntax theme as expected.

• Submit PR.

Next Actions (Lite Version)

• New feature branch in the websharks/comment-mail repo.

• In the websharks/comment-mail (lite variation) repo, after this line add the following:

  'template_syntax_theme',

• After this line add a new option key.

  'template_syntax_theme' => 'ambiance',

• Replace this line of code with the following:

  wp_enqueue_style('codemirror-'.$this->options['template_syntax_theme'].'-theme', set_url_scheme('//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/'.urlencode($this->options['template_syntax_theme']).'.min.css'), array('codemirror'), NULL, 'all');

• Delete the existing menu-page.php file in the lite version and replace it with an exact copy of the menu-page.php file that you worked on in the pro version; i.e., the one that now includes a new configurable option that allows you to choose a syntax theme.

  Note that both the lite/pro versions can use the same menu-page.php file. The file will automatically adapt accordingly. This also allows for a pro preview in the lite version. The syntax theme will only be configurable in the pro version however.

• Test your changes to be sure that this option shows up in a pro preview in the lite version.

  

• Submit PR.

[jaswrks]

@kristineds While working on this issue feel free to choose a different default theme if you find another that you feel would work better as a default syntax theme/style.

The current default is:

'template_syntax_theme' => 'ambiance',

[jaswrks]

Next Pro Release Changelog:

• (Comment Mail Pro) Theme Syntax Highlighting: This release makes it possible for the color-scheme used in template file syntax highlighting to be changed to any one of 30+ options. See: Dashboard → Comment Mail → Config. Options → Template-Related Settings. Props @kristineds. See also: this GitHub issue if you'd like additional details.

[raamdev]

Comment Mail v151224 has been released and includes changes from this GitHub Issue: See the v151224 announcement for further details.

---

This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#147).