Skip to content

Increase visibility of sidebar icons in dark mode #7

@iccir

Description

@iccir

The use of highly-saturated colors over a dark gray background is a longstanding problem with dark themes. It's often hard to distinguish the boundary of the two colors. This affects several of the file icons:

Image

A common solution is to add an inner shadow or border to help with visibility:

Image

The colors can also have their saturation reduced and/or lightness increased to further help:

Image

Unfortunately, Sublime Text has no easy way of specifying different icons for dark mode. Timeless Dark would need to be moved to its own package.

What we can do is:

  1. Create a base icon image without a border. Use this image for layer0.
  2. Make a transparent rounded rect with a black inner shadow. Use this for layer1 in light mode.
  3. Make a transparent rounded rect with a white inner shadow. Use this for layer1 in dark mode.
Image

Using this technique, we could also darken the outer shadow in dark mode (which could further increase visibility).

Metadata

Metadata

Assignees

No one assigned

    Labels

    blockedBlocked by Sublime Text bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions