Fixing selectors

First, very happy to see dark mode! I was working on an update to https://github.com/poychang/github-dark-theme and have compiled a list of overriding css selectors that had to be used because instead of using a color “type” (e.g. “–color-bg-canvas”), those elements were using colors directly (e.g. “–color-scale-red-7”).

Hope these can be helpful to fix, if not done already.

// For anything that aren't achieveable through css variables:
//  - when css variables aren't used
//  - when colors are used directly (e.g. --color-scale-gray-2).

.repository-content {
  // All grey-light backgrounds
  .bg-gray-light {
    // background-color: $background-primary !important;
  }

  // Small triangle to the left of timeline items
  .timeline-comment--caret, .timeline-comment--caret.current-user {
    &:after {
      border-right-color: $background-tertiary;
    }
    &:before {
      border-right-color: $border-primary;
    }
  }
}

.file-diff-split .blob-code + .blob-num {
    border-left: 1px solid $border-primary !important;
    border-right: 1px solid $border-primary !important;
}

// "Viewed" file toggles in PR reviews (could be .border-blue-light)
.js-reviewed-toggle.bg-blue-2 {
  background-color: $background-secondary !important;
  border-color: $border-primary !important;
}

// "Search or jump to" results
.jump-to-suggestions-path {
  color: $text-secondary !important;
}

// Hovering over notifications
.notifications-list-item:hover {
  box-shadow: 2px 0 0 $info-blue inset !important;
}

// File find (tree-finder) top result
.tree-browser .tree-browser-result[aria-selected=true] {
  background-color: $background-secondary !important;
}

// Timeline links between items
.TimelineItem:before {
  background-color: $timeline-links !important;
}

// Keyboard shortcuts
kbd {
  color: #{$text-primary} !important;
}

// https://github.com/explore
main > div {
  // background-color: #{$background-tertiary} !important;
}
a.subnav-link, a.subnav-link.selected {
  color: #{$link} !important;
}