更改原子文本编辑器窗格滚动条颜色

Question

我刚刚从 sublime text 切换到 atom 并尝试应用我常用的主题。不幸的是，我使用的主题（spacegray eighties sublime port）没有包含正确的滚动条主题。我设法修复了树视图面板中滚动条的外观。但是，出于某种原因，我无法将其应用于原子文本编辑器。我的 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 放入原子文本编辑器中，但没有成功。

Answer 1

你很接近，你必须把你的样式包装在里面 .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;
    }
  }
}

Answer 2

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

.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

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

更改原子文本编辑器窗格滚动条颜色

Change atom-text-editor pane scrollbar colours

html

css

atom-editor