Platformio-atom-ide-terminal: Auto-match terminal colors with syntax theme

[joshmedeski]

I have an idea to match the terminal's colors with Atom's syntax theme. I'm not sure where to get started, but I know the current way of setting color is slow and unflexible. Maybe setting a "overwrite colors wtih syntax theme" checkbox?

I don't mind helping make a PR, I'm just not sure where to get started.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[dmytrokyrychuk]

A PR would be much appreciated!

Terminal colors are set here: https://github.com/platformio/platformio-atom-ide-terminal/blob/9ac54fbc398ee155286371af1fcef69a71d8d13e/lib/view.coffee#L300-L321
This defines standard ANSI colors You'll have to define all 16 colors for each theme manually (I don't think it's possible to extract the needed colors from theme directly, so manual work is necessary here). You'll also want to define the terminal background color at @terminal.colors[256] (source). I did play with background color recently myself, so I can give you a hint, if you need one.

You can use the atom.themes.onDidChangeActiveThemes() method to get notified when the active themes are changed and then atom.themes.getActiveThemes() to retrieve a list of active themes. Now you know the names of active themes, so you can set configure the terminal colors accordingly.

A list of built-in themes can be found right here. It's probably better to start with support of the built-in themes.

Let me know if you still want to work on this issue or need any help.

[joshmedeski]

Dmytro, I'd like to start with this one! I might submit a PR early and ask for help/feedback. I haven't really done any Atom development yet, so this will be a fun/interesting way to jump in!

Expect a starting PR from me within the next two weeks.

[joshmedeski]

Hey guys, quick update: two weeks turned into TBD. I've got some other side-project stuff I'm working on. I'd like to start this project soon but I don't have a timeline as of right now, but I'll let you know!

[joshmedeski]

Ok guys, I looked into it and it will be fruitless to try and match the terminal colors with the syntax theme since there is no proper convention for labeling colors (e.g. red, blue, yellow) in the less files.

I think it would be best to just close this issue.

[dmytrokyrychuk]

Considering #33 and #20 I'd say that there is a demand for this. So I'd leave the issue open and hope that someone else will have a time to implement this at least for built-in themes.

[joshmedeski]

My thought is maybe having a dropdown option for preset themes (matching default themes)?

Or I guess you could write custom functions that convert some of the default themes into the terminal manually?

For me, it only took 30 seconds using the eyedropper to change the colors to my color syntax of choice. But I can see how it would be helpful to have some better default options 😄

[diedsmiling]

Are there some updates regarding this issue?

[chrishough]

• 💯

[danielbibit]

I don't know if this is enough for most of you guys, but for me, adding this to styles.less this did the trick:

@import` "syntax-variables";

.platformio-ide-terminal .xterm {
  background-color: @syntax-background-color ;
}

I know that this is not the issue for most of you, but I only use 2 themes (light/dark), so this was enough for me, the catch is: finding the right colors to look nice across both themes (and in my case, windows and linux).

[plumps]

Thx @danielbibit , I added another entry for the text-color:

@import "syntax-variables";

.platformio-ide-terminal .xterm {
  background-color: @syntax-background-color ;
  color: @syntax-text-color;
}

[severity1]

+1 would be nice if ansiColors are automatically set based on theme. meantime for one-dark i add this to my ~/.atom/config.cson;

"platformio-ide-terminal":
    ansiColors:
      normal:
        black: "#282c34"
        blue: "#61afef"
        cyan: "#56b6c2"
        green: "#98c379"
        magenta: "#c678dd"
        red: "#e06c75"
        white: "#abb2bf"
        yellow: "#e5c07b"
      zBright:
        brightBlack: "#454c59"
        brightBlue: "#69bbff"
        brightCyan: "#66d9e8"
        brightGreen: "#b5e890"
        brightMagenta: "#e48aff"
        brightRed: "#ff7a85"
        brightWhite: "#cfd7e6"
        brightYellow: "#ffd68a"
    core: {}
    iconColors:
      blue: "#61afef"
      cyan: "#56b6c2"
      green: "#98c379"
      magenta: "#c678dd"
      orange: "#d19965"
      pink: "#c578dd"
      purple: "#d682f0"
      red: "#df6b75"
      yellow: "#e2c08d"
    style:
      fontFamily: "Droid Sans Mono for Powerline"
      theme: "one-dark"
    toggles:
      selectToCopy: false

[coreycosman]

How can I add a hexcode colour as the theme?

[the-j0k3r]

should be handled by https://github.com/platformio/platformio-atom-ide-terminal/commit/27a4c0460cb453d35b02c8a65ac257ed4d7f0961