s1e2b3i4 / onenord-vscode Goto Github PK

Hey @s1e2b3i4 @rmehri01 ,
as you might know, I have recently been working in order to improve this theme. I am here to make a sort of proposal.

The theme here is defined using JSON. However, JSON does not have the concept of "placeholders", thus every color is duplicated on every rule. This not only makes the theme very hard to read (well, it's harder to read something like #ff0000 than red), but also makes it hard to maintain (if we modify one color, all the occurrences of that colour have to be changed accordingly).

I have done a few researches, and in particular my attention was caught by how the dracula theme originators defined the theme.

As you see, they first define the theme using a yaml file and leveraging placeholders (in src/dracula.yml). Then, they (probably??) convert the theme into a JSON (the only format vs-code understand, I guess?) by using some JavaScript (inside of scripts/).

I guess it would be cool if we were able to make the same here. This will make the theme very readable and possibly attract more maintainers!

Unfortunately, I have no experience with writing JavaScript, thus I don't think I can help much when it comes to writing the js code that converts the yaml into JSON (well, I could look at the dracula code, but I had some issues understanding what was happening xD). I would however be glad to help in converting the JSON file into a YAML, if somebody was down to help :)

WDYT?

I have text selected inside input.background, but it is hardly visible.

Find widget uses selection.background, but input in SCM view uses editor.selectionBackground which affects editor selection as well.

While I was working on #10 fix I noticed that highlighting for find match and words aren't good and hard to see. I checked VS Code's dark theme and GitHub theme and they are doing better job.

Keys:

      "editor.findMatchBackground": "#ff0000",
      "editor.findMatchHighlightBackground": "#ff0000",
      "searchEditor.findMatchBackground": "#ff0000",
      "editorOverviewRuler.findMatchForeground": "#ff0000",
      "editor.wordHighlightBackground": "#ff0000",
      "editor.wordHighlightStrongBackground": "#ff0000",
      "editor.wordHighlightTextBackground": "#ff0000",
      "editorOverviewRuler.wordHighlightForeground": "#ff0000",
      "editorOverviewRuler.wordHighlightStrongForeground": "#ff0000",
      "editorOverviewRuler.wordHighlightTextForeground": "#ff0000"
     // Also, there are borders, but they look weird - we should use it only in case if there's no way to fix it properly

I tried to fix it, but it isn't so easy, because it's hard to find color + opacity which matches theme colors and looks easy to read. So for now let's keep this issue open as a tracker.

1. I'm not sure if it's okay to use meta.function-call since it takes this, maybe it should have a separate color?
2. Also, why properties are the same color as functions? Is it intentional?
3. Take a look at 26 line you will see that this is white, because it doesn't have theme selector.

Maybe @rmehri01 could help and say what actual colors it should be? I could try to fix it by creating a PR.

BTW: Theme is amazing, I loved Nord and at the same time One Dark Pro, but now it is combined into one ❤️

Maybe it would be better to change background color of error view to editor background or another one? Same goes for foreground color since it's too white. But that's my opinion.

terminal.ansi* colors should be updated to match original theme, could be picked up from this file: https://github.com/rmehri01/onenord.nvim/blob/main/extras/warp/onenord.yaml