New Tesselate Syntax Theme

New dark theme I have been working on. Tell me what you think! I hope some people use it! :smile:

1 Like

I’m into the colors. Nice and muted, but very distinct from one another and attractive hues overall. I’ll give it a spin for a little while.

Initial assessment:

  1. The background is lighter than I’m used to for dark themes. With the pale text colors, it ends up being kind of low-contrast. It doesn’t hinder readability for me, but the text doesn’t pop. I might darken it through CSS.

  2. Ignore the awkward gutter shadow. That’s custom-defined in styles.less and I can change or remove it.

  3. The markers for invisible characters look less visible than I want them to, and they’ll be even less visible if I darken the background. I can color them the same as the line numbers, but I think that would actually be a change worth making in the theme itself.

Thanks for the feedback!

It is a bit dark on my monitors and then the colors are very vivid on my macbook pro… I’m still struggling with what to do about that.

As for the excess gutter junk, I need to fix that for sure. It doesn’t show up n my screen, but I know what variables to change so I’ll do that in the next revision.

Thanks for checking it out!

how did you create the invisible character markers? I want to see them so I can create a good color for it.

It’s under Settings -> Editor.

I did some messing around and found a combination that works for me. Here’s my custom styling right now. You can see that the gutter is the normal background color, and I darkened the editor by a shade, then told the gutter shadow to gradient into that new background color. The invisibles are the same color as the line numbers, but appear brighter because of contrast, and the reading issues disappear with most of the text sitting on top of #32353c. I think I might brighten the active line number to make it pop, but for now I like having most of them be grey and out of the way.

Oof, the way your background looks now looks exactly like what I have for my macbook pro on another device. I don’t think I’ll change it, but anyone who sees this thread who doesn’t use a retina display will know what to do.

Thanks for the help, made some minor fixes. I don’t have a gutter so I’ll keep it simple for now and make it the same as the invisibles.

In Atom’s UI, the gutter is the entire space on the left of the editor, including the line numbers. I just called the decoration I made the “gutter shadow” because it’s attached to .gutter-container.

1 Like