CSS solution

[ghost]

Since @mdo has completely lost the plot:

For now! Not trying to be a jerk, but that extra class will be going away soon. Just how we shipped v1 of it.

It might be a good idea to implement a CSS solution, as the JavaScript solution is likely to break. Here is one I came up with:

http://github.com/svnpenn/dotfiles/blob/cf47bf9/stylish/github.css#L2-L32

[adamschwartz]

Here’s a more complete CSS solution:

.header.header-dark {
  color: #333;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5
}

.header-dark .read-only-mode-banner {
  background-color: #f8e45f;
  border-bottom-color: #f6dc2e
}

.header-dark .header-logo-invertocat, .header-dark .header-logo-wordmark {
  color: #555
}

.header-dark .header-logo-invertocat:hover, .header-dark .header-logo-wordmark:hover {
  color: #4078c0
}

.header-dark .notification-indicator .mail-status {
  color: #fff;
  background-image: -webkit-linear-gradient(#1cafff, #0086ce);
  background-image: linear-gradient(#1cafff, #0086ce);
  border: 2px solid #f3f3f3
}

.header-dark .notification-indicator:hover .mail-status {
  background-color: #4078c0
}

.header-dark .header-search-scope {
  color: #767676;
  border-right: 1px solid #eee;
}

.header-dark .scoped-search .form-control.focus .header-search-scope {
  color: #4078c0;
  background-color: #edf2f9;
  border-color: #c6d7ec
}

.header-dark .header-nav-link {
  color: #555
}

.header-dark .header-nav-link:hover, .header-dark .header-nav-link:focus {
  color: #4078c0
}

.header-dark .header-nav-link:hover .dropdown-caret, .header-dark .header-nav-link:focus .dropdown-caret {
  border-top-color: #4078c0
}

.header-dark .header-search {
  font-size: 14px
}

.header-dark .header-search-wrapper {
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
  border: 1px solid #ddd;
  font-size: 14px;
  min-height: 0;
}

.header-dark .header-search-wrapper.focus {
  background: #fff;
  border-color: #51a7e8;
  outline: none;
  color: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}

.header-dark .header-search-scope {
  font-size: 12px;
  line-height: inherit;
  min-height: 0;
}

.header-dark .header-search-input {
  min-height: 26px;
}

.header-dark .header-search-input::-webkit-input-placeholder {
  color: rgba(0,0,0,.5)
}

.header-dark .header-search-input::placeholder {
  color: rgba(0,0,0,.5)
}

Once they drop .header-dark just find and replace remove that from the above.

[ghost]

@adamschwartz thanks for the input, but I wasnt really speaking to the specific CSS rules, rather that CSS be used over JavaScript to prevent future breakage

[KeizerDev]

@adamschwartz A smaller version here:

.header.header-dark {
  color: #333;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5
}

.header-dark .read-only-mode-banner {
  background-color: #f8e45f;
  border-bottom-color: #f6dc2e
}

.header-dark .header-logo-invertocat, .header-dark .header-logo-wordmark {
  color: #555
}

.header-dark .notification-indicator .mail-status {
  color: #fff;
  background-image: -webkit-linear-gradient(#1cafff, #0086ce);
  background-image: linear-gradient(#1cafff, #0086ce);
  border: 2px solid #f3f3f3
}

.header-dark .notification-indicator:hover .mail-status {
  background-color: #4078c0
}

.header-dark .header-search-scope {
  color: #767676;
  border-right: 1px solid #eee;
}

.header-dark .scoped-search .form-control.focus .header-search-scope {
  color: #4078c0;
  background-color: #edf2f9;
  border-color: #c6d7ec
}

.header-dark .header-nav-link {
  color: #555
}
.header-dark .header-logo-invertocat:hover, .header-dark .header-logo-wordmark:hover,
.header-dark .header-nav-link:hover, .header-dark .header-nav-link:focus {
  color: #4078c0
}

.header-dark .header-nav-link:hover .dropdown-caret, .header-dark .header-nav-link:focus .dropdown-caret {
  border-top-color: #4078c0
}

.header-dark .header-search {
  font-size: 14px
}

.header-dark .header-search-wrapper {
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
  border: 1px solid #ddd;
  font-size: 14px;
  min-height: 0;
}

.header-dark .header-search-wrapper.focus {
  background: #fff;
  border-color: #51a7e8;
  outline: none;
  color: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}

.header-dark .header-search-scope {
  font-size: 12px;
  line-height: inherit;
  min-height: 0;
}

.header-dark .header-search-input {
  min-height: 26px;
}

.header-dark .header-search-input::-webkit-input-placeholder,
.header-dark .header-search-input::placeholder {
  color: rgba(0,0,0,.5)
}

[DennisSnijder]

CSS is now being overwritten since Github removed the "header-dark" class. Thanks for the classes all 💯