I am working on a Notepad++ theme and i would like feedback.

[wormeyman]

https://github.com/wormeyman/npp

I have come to realize that npp has some really basic color choices and not everything will match with how codemirror does things. I have tested this with HTML,CSS,and JS. and it's nearly 100% the same.

[MiguelCastillo]

It looks neat. I will give it a try a bit later today

[wormeyman]

I used npp for ~10 years and before that Crimson Editor, i always liked the CE theme better but after 10 years i really got used to npp theme. Of course now i prefer brackets with my ruby blue theme but i'm sure other npp converts would like an easier transition.

[MiguelCastillo]

Cool, I know the feeling. That's why the very first theme I created was a VisualStudio theme :D

[Denisov21]

I think it's a classic theme that can not miss the collection Brackets-Themes. Fantastic!

[wormeyman]

Any feedback? Should I Launch it, I see that there is already another npp theme on the market, any ideas on what i should call mine?

[mackenza]

NotePad +++ ? ;)

[MiguelCastillo]

@wormeyman how similar is the other theme? I generally prefer to reduce duplication so if there is something already, I would probably not create just another one... But if they are different enough or you think there is value is releasing another one, then GO for it.

I created a Monokai Dark Soda, and then realized that there was one in the registry already... I decided not to publish the one a spent time creating because duplication tends to confuse people.

But if you must have a name, go for a sweet name and add the fact it is a notepad++ theme in the description. Maybe something like "OldSchool++" and add NodePad++ to the description :)

[wormeyman]

I don't know how similar it is because the old themes don't work in v42, his code is waaaay more extensive though :O.

https://github.com/EssamManzilak/NotepadPlusThemeForBrackets/blob/master/notepadplus.css

[MiguelCastillo]

@wormeyman i had already asked the author of that theme if he would like to make it part of themes org. He responded saying yes. Would you like to lead this one? Don't be shy about suggesting changes... https://github.com/EssamManzilak/NotepadPlusThemeForBrackets/issues/2

I will be happy to add him to brackets org if we want to transfer his theme. What do you think?

[MiguelCastillo]

Correction; not brackets org... Brackets-Themes org.

[EssamManzilak]

Thank you very much,

now we need to support javascript theme like notepad++ , i dont know how to create custom style for file type (.php , .js , .css )

[mackenza]

@EssamManzilak the way that CodeMirror modes work is that the mode determines the style that is applied to a particular token type. So for example, in the PHP mode definition you can see:

 if (stream.match(/\$[a-zA-Z_][a-zA-Z0-9_]*/)) {
      // After the variable name there may appear array or object operator.
      if (stream.match("[", false)) {
        // Match array operator
        state.tokenize = matchSequence([
          [["[", null]],
          [[/\d[\w\.]*/, "number"],
           [/\$[a-zA-Z_][a-zA-Z0-9_]*/, "variable-2"],
           [/[\w\$]+/, "variable"]],
          [["]", null]]
        ]);
      }
      if (stream.match(/\-\>\w/, false)) {
        // Match object operator
        state.tokenize = matchSequence([
          [["->", null]],
          [[/[\w]+/, "variable"]]
        ]);
      }
      return "variable-2";
    }

so you can see in the above code that PHP arrays and objects are given the variable type and other, simple variables like $foo are assigned to variable-2 type.

The token types are then referenced in the CSS for a theme... such as: .cm-variable and .cm-variable-2

Therefore, you don't need to (or want to) create custom styles for php, css, js, etc. files as they are taken care of in an abstract way through the token type styles.

[wormeyman]

The thing is, that for example .cm-atom is styled differently in css and html with notepad++

[mackenza]

The way NP++ does themes is totally different than the way CM does them. In CM, the mode determines how the language in question is tokenized and applies a type to each token, which then emits a specific class in the HTML code for the editor and CSS is applied to those codes.

In Notepad++ each theme actually defines their own CSS for each token type. So a PHP variable can be totally different styling than a JS variable.

There is no doubt that the way NP++ does it allows for greater customization and visually tailoring colors for a language. The downside is that a theme needs to include styles for every language and some more for other elements of the UI. This NP++ theme is over 750 lines long!

That's the issue with theme porting across editors. Most of will look fine, but some will look different simply because of the different approaches the editors have to themes.

[MiguelCastillo]

I had added support for tokens per language in Brackets themes but it was pulled out right before we went live :/

Open up an issue requesting this feature.

[mackenza]

How did you do that? Would cm not need to be altered to send mode info in the css?

[MiguelCastillo]

It's simpler than you think... :) Here https://github.com/MiguelCastillo/Brackets-Themes/blob/master/ThemeView.js#L122

[MiguelCastillo]

@wormeyman Are you looking into bringing the notepad++ over to Brachets-Themes?

[mackenza]

@MiguelCastillo what does adding the mode to the doctype do? i.e. how do I then write the css to be mode-aware?

[MiguelCastillo]

Bingo! You write css such as

.doctype-css .cm-atom { color: blue; }

.doctype-javascript .cm-atom { color: black; }

[EssamManzilak]

excuse me if I am not in the conversation, because my english is not good, and I am a bigginer in Github

i will start to create javascript style ..

(Using google translate :no_mouth: )

[MiguelCastillo]

@EssamManzilak No worries!! We will try our best to work with ya :)

So, native themes in brackets don't support doctypes. That feature was removed before we released sprint 42. This means that adding javascript style will not work. :/

[wormeyman]

@EssamManzilak @MiguelCastillo I think we are ready to bring it over.

[EssamManzilak]

@MiguelCastillo thank you i will work with @wormeyman to find solution