更改原子文本编辑器窗格滚动条颜色 [英] Change atom-text-editor pane scrollbar colours

问题描述

我刚刚从崇高的文本转向原子，并试图应用我平常的主题。不幸的是我使用的主题（

我试着用！important 语句将相同的 :: - webkit-scrollbar CSS放入原子文本编辑器，但没有运气。

解决方案

你很近，你必须在 .scrollbars - 可见 - 总是：

  .scrollbars-visible-always {
 ::  - webkit-scrollbar {
 background-color：＃262626; 
 
& -track {} 
 
& -thumb {
背景颜色：＃404040; 
 
&：window-inactive {
 background-color：rgb（116，115，105）; 
} 
} 
 
& -corner {
 background-color：＃262626; 
} 
} 
} 
  

I have just switched to atom from sublime text and tried to apply my usual themes. Unluckily the theme that I use (spacegray eighties sublime port) does not incorporate the correct theme for the scrollbars. I managed to fix the look of the scrollbars in the tree-view panel. However, I cannot apply the same to the atom-text-editor for some reason. My styles.less is the following:

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

And here a preview of my problem:

I tried putting the same ::-webkit-scrollbar CSS into the atom-text-editor with !important statements, but with no luck.

解决方案

You were close, you have to wrap your styles inside .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;
    }
  }
}

这篇关于更改原子文本编辑器窗格滚动条颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！