[SOLVED] Grammar with custom colour text adapting to DARK / LIGHT theme


#1

Hello,

I am busy with a language grammar. There is a particular element that I can not fit into the standard scopes. It is a comment that should be clearly visible; not like the other comments. I am hoping to colourize this section in a special way.

I used the following as reference:

In the CSON rule file for the grammar lines like -
(not being exact with the actual coding)

'match': 'TITLE = (.*)'
capture:
  1:
     'name': 'style0

In the LESS styles file of the grammar -

atom-text-editor {
    .style0 {
      color: red;
    }
}

Am I missing something? It does not seem to update yet develop tool gives:
Try change grammar text colour

Do I need to copy from one style into the new one?
Regards.


#2

I think you need .syntax--style0. Also, your picture doesn’t seem to have uploaded.


#3

Hello.

Thank you for your answer.

Not sure what happened to the picture… it did show before. It is back however.

What you suggest, I have tried before. But it was on a known scope which got overriden by the theme. Now I have made a new one which works!

language grammar CSON…
:smile: {CSON allows commentary!! not like JSON}

repository:
  network_title:
    # Network title spans two code lines.
    # Syntax identifier loads only one code line at a time.
    # ... unless using the begin/end hack
    begin: '^(NETWORK)\\s*$'
    beginCaptures:
      '1': 
        name: 'storage.type.function.stl'
    end: '^(TITLE =)\\s*(.*)$'
    endCaptures:
      '1': # This is not so important.. could be left out
        name: 'storage.type.function.stl'
      '2': # "Title" is a new scope name
        name: 'title.comment.stl'   # <<<<<<<<<<

language grammar - LESS

@import "syntax-variables";

.syntax--title.syntax--comment.syntax--stl{
  color: #E2C08D;
}

Good Result:
Result

Thanks to you.

Best regards,
  dP


#4

Question cancelled: British spelling colour should not be used.


Hello.

An extension on my question - please.

How to have the LESS see that the theme used is dark or light and then adapt the text colour accordingly?

Test code:
language grammar - LESS

@import "syntax-variables";

.theme() when (luma(@syntax-background-color) <= 50%) {
  colour: white;
}

.theme() when (default()) {
  color: black;
}

.syntax--title.syntax--comment.syntax--stl{
  //color: #E2C08D;
  .theme()
}

The failed result is as follows…
Note the correct selection is not used. (yellow triangle)
Colour override not work

But the “default” selection works ?!
Swap for LIGHT theme does as expected

Some thoughts please.
Best regards,
  dP


#5

I retract my above question. :blush:

colour and color are not both recognised!!!

My spelling is British style not American. :stuck_out_tongue_winking_eye:

LESS code would be:

@import "syntax-variables";
.theme() when (luma(@syntax-background-color) > 50%) {
  color: blue;
}

.theme() when (default()) {
  color: #E2C08D;
}

.syntax--title.syntax--comment.syntax--stl{
  // font-style: italic; // already part of 'comment'
  font-weight: bold;
  .theme()
}

Result of self adapting colours:
DARK ONE
dark version

LIGHT ONE
light version

Hopefully others will find these notes helpful.

Best regards,
  dP