Added outline:none for input field

[suryanisaac]

Outlines on the input look bad and don't go with the themes (amazing themes btw)
I'll add pictures for comparison in a comment.

Edit: This does not affect tab navigation for accessibility

[suryanisaac]

Eclipse

When focused:

When focused with no outline:

9009

Default:

When focused:

When focused with no outline:

1976

When Focused:

When focused with no outline:

Solarized Dark

When Focused:

When focused with no outline:

[jakergrossman]

Edit: This does not affect tab navigation for accessibility

While this may not affect tab navigation, this does affect accessibility for those who have a visual impairment. A better solution (IMHO) is to fade the outline after a period of time, so as to still indicate focus. Maybe something like:

@keyframes fade-outline {
  to { outline-color: rgba(0,0,0,0); }
}

#input-field:focus {
  animation: fade-outline 0.375s linear 2s both;
  outline-style: solid;
}

[suryanisaac]

I never thought of that, it solves both problems I worried about.

I don't think it would be too much work to sync the outline colour to a colour included in the theme and fade it. That would look good too, but i'm not sure how it would work for accessibility.

I've never coded for accessibility because most of my projects are for my own use. If you think that it doesn't work, then the blue fade is probably fine too.

[jakergrossman]

You could customize the outline color, but seeing that the themes are disorganized CSS stylesheets, that would require either:

1. Modifying every theme to include the outline color for #input-field:focus, or

2. Grabbing an appropriate color from the page via JavaScript.

These aren't impossible hurdles by any means, but I just opted to let the user agent stylesheet define the color for input:focus.

---

One solution that would require only modification of CSS stylesheets without messing with the JavaScript implementation of theme selections would be to refactor the themes to use custom CSS properties that are semantically named.

This can be seen in action in the implementation of themes for my portfolio, where each color of the theme is attached to a named custom CSS property (--background-color, --caret-color, etc.). Then it would be as simple as:

#input-field:focus {
  animation: fade-outline 0.375s linear 2s both;
  outline-color: var(--foo-bar);
  outline-style: solid;
}

---

Approaching the problem from a JavaScript perspective, you could set the outline-color property of #input-field when inside of the setTheme() function (maybe pull from .highlight class). This seems like the best "design first" solution.

That said, by far the simplest solution is to let the browser define the outline-color property. This would also let users who have custom focus styles (specific colors to assist with colorblindness, for example) continue to use those styles.