更改atom-text-editor窗格滚动条颜色

Question

我刚刚从崇高文本切换到原子，并尝试应用我常用的主题。不幸的是，我使用的主题（spacegray eighties sublime port）没有包含滚动条的正确主题。我设法在树视图面板中修复滚动条的外观。但是，出于某种原因，我不能将它应用于atom-text-editor。我的styles.less是以下：

atom-text-editor {
  // Apply same scrollbar color fix.
}

// Scrollbar color fix for SpaceGray
::-webkit-scrollbar {
  background-color: #262626;

  &-track {}

  &-thumb {
    background-color: #404040;

    &:window-inactive {
      background-color: rgb(116, 115, 105);
    }
  }

  &-corner {
    background-color: #262626;
  }
}

在这里预览我的问题：

我尝试使用::-webkit-scrollbar语句将相同的!important CSS放入atom-text-editor中，但没有运气。

Answer 1

在Atom 1.18.0中，以下适用于所有滚动条：

{{1}}

Answer 2

实际上，对于Atom的当前版本，这似乎不再起作用。使用以下代码，我可以在树视图和编辑器窗口中设置滚动条的样式：

.tree-view-resizer, atom-text-editor::shadow  {
  ::-webkit-scrollbar {
    background-color: #262626;

    &-track {}

    &-thumb {
      background-color: #404040;

      &:window-inactive {
        background-color: rgb(116, 115, 105);
      }
    }

    &-corner {
      background-color: #262626;
    }
  }
}

Answer 3

你很亲密，你必须将你的风格包裹在.scrollbars-visible-always：

中

.scrollbars-visible-always {
  ::-webkit-scrollbar {
    background-color: #262626;    

    &-track {}    

    &-thumb {
      background-color: #404040;    

      &:window-inactive {
        background-color: rgb(116, 115, 105);
      }
    }    

    &-corner {
      background-color: #262626;
    }
  }
}