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

Question

我刚刚从 sublime text 切换到 atom 并尝试应用我常用的主题。不幸的是，我使用的主题（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;
  }
}

这里是我的问题的预览：

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

Answer 1

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

::-webkit-scrollbar {
    width: 50px;
    height: 18px;

    &-track {
         border: 0px;
         border-radius: 0px;
         background-color: transparent !important;
     }

     &-thumb {
         background-color: rgba(213, 213, 213, 0.4) !important;
         border: 0px;
         border-radius: 0px;
     }
}

// for new opened files
.vertical-scrollbar {
    width: 50px !important;
}

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;
    }
  }
}