Better contrast on Lighter Theme

[lucasengel]

I believe the lighter theme has a really bad contrast. It looks quite nice with that fruity look though.

Take a look at a JSON file where the green almost fades into the white background:

For testing purposes, I'm on rMBP.

[gj1118]

+1

[Arty2]

+1

[jlmakes]

With all due respect, I don’t think this has been addressed well enough.

I think there is a clear bias towards the darker themes, which look significantly better (and have better contrast) than the lighter theme. Even on my Apple display, the lighter theme is uncomfortable to use.

You’ve done great work, I want to emphasize that, but after using VS Code and some its lighter themes (particularly Quiet Light), I’ve come to realize how enjoyable they can be during the day to avoid seeing your reflection in the monitor on sunny days.

Anyway, here’s another +1 to see this revisited.

[lucasengel]

I have to agree with @jlmakes. Although this issue was very punctual and was fixed the overall contrast is a bit low making this an issue apart. I usually have to make extra effort reading as the text seems to fade into the off-white background.

[equinusocio]

It should only review some colors. In the meantime, I am open to PR and suggestions.

[lucasengel]

I don't even know where to start when it comes to sublime theming but I can work on a CSS palette, does that help? I'm guessing it's probably a matter of pushing the color a tone or two darker from the MD scale

[equinusocio]

@lucasengel this is the json used by the theme compiler. Inside the scheme.base you can set a list of HEX colors used when the Lighter theme is compiled.

https://github.com/equinusocio/material-theme/blob/develop/src/settings/specific/Material-Theme-Lighter.json

[lucasengel]

I noticed from the latest theme update you've changed yellow to purple in some scopes. That already made a huge difference. Thanks, @equinusocio.
I'll take a look if I can improve somehow later today.

[jlmakes]

Awesome! @equinusocio, is there a particular workflow you recommend for previewing changes while I work?

[lucasengel]

@jlmakes this helps: http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai

[jlmakes]

@lucasengel Thanks but tmTheme editor does not seem appropriate. It doesn‘t appear to import JSON, nor would it let me preview changes to the Sublime interface theme.

@equinusocio Is there something I’m missing? Running gulp just seems to compile; am I supposed to make changes, compile and load the theme to review? There has got to be a better workflow, seeing as I might change a single color dozens of times to get it right.

Is it possible to use the theme I’m working on, so compiling immediately shows me the updates?

[equinusocio]

@jlmakes You have to put a symlink of your local repository inside the Packages folder. Make sure you rename it Material Theme. Then you can run gulp build to launch the builder and after a seconds you will see the changes in your sublime text.

[lucasengel]

Guys, I've been trying to darken the colors as promised but nothing seems to fit. I've tried using the material palette but I that wasn't enough. In my tries I found yellow, amber, cyan and some lighter shades of gray (an any lighter shades of any color probably) will only get my eyes more tired.

I ended up with a less fruity-look using blue grays and browns, which seems to not resemble the original theme. =/

@jlmakes I've downloaded and uploaded the theme each time for testing in Sublime.

[jlmakes]

I’m still working on theme changes, but...

@lucasengel From what I understand of @equinusocio’s instructions, I believe the best way to go about it is to:

• Clone the repository (let’s say in ~/Desktop/material-theme)
• Run cd ~/Desktop/material-theme
• Run npm i to install dependencies
• Go to your Sublime Text packages folder
• Run ln -s ~/Desktop/material-theme 'Material Theme' to create a symlink

You’ll now see a "shortcut" to the repository called Material Theme in your Packages directory. From here, you should be able to enable the theme and color scheme normally—but when you run gulp build from within ~/Desktop/material-theme, it will compile your changes and show up in Sublime Text.

This way you can edit the Material-Theme-Lighter.json instead of dealing with tmEditor.

---

Note: I have Sublime Linter which duplicates the active color scheme on load, and adds specific properties for the linter. You will want to disable this, and any other packages that may interfere with the theme or color scheme.

---

Note: Also, @equinusocio changed the project structure in a recent commit, so the appropriate JSON file can be found in a slightly different location: /.src/settings/specific/Material-Theme-Lighter.json

[jlmakes]

Also @equinusocio @lucasengel

I created a .sketch file to visualize what the current Material-Theme-Lighter.json palette looks like as 16x16 squares and 1x16 lines. I’ll double check it, but I believe this is accurate and may help when exploring different colors.

You can download it here: material-theme-light.sketch

---

[equinusocio]

The new 3.1.0 release is coming. If there is a PR a will merge next time. I've made some little change on the color palette, so for now i will close this old issue until a PR.