如何在 Ubuntu 12.04 中更改非覆盖滚动条的颜色和宽度

Question

我知道很多人都抱怨最近版本的 Ubuntu 中几乎不可见且不可用的滚动条，即使在删除或禁用默认覆盖滚动条之后也是如此。我想知道如何轻松更改它们的颜色和宽度。

我有一台分辨率为 1600*900 的 13.3 英寸显示器，我几乎看不到它们，正如您在这些图片中看到的：

我已经使用 GNOME 颜色选择器更改了 Firefox、LibreOffice 和其他一些软件的滚动条：

顺便说一下，我正在使用 Unity。谢谢！

Answer 1

我假设您指的是覆盖滚动条，因为您提到了 Unity。我不知道如何改变宽度，但你当然可以改变颜色。如果颜色足够明显，我觉得宽度不是什么大问题，因为在悬停时它会变得相当宽。

您需要在主题文件夹中查找名为gtkrc（在 gtk-2.0 文件夹中）和gtk-widgets.css（在 gtk-3.0 文件夹中）的文件。使用文本编辑器打开这些文件。如果您的主题在 /usr/share/themes 而不是在 ~/.themes 中，您可能需要使用gksudo gedit而不仅仅是使用gedit。然后，搜索覆盖滚动条或覆盖滚动条或类似的东西，并使用这些部分中指定的颜色。您甚至可以在十六进制代码中指定自己的颜色。

显然，如果您愿意，您可以在两个文件中设置不同的颜色。

要可视化更改，您可能需要在对这些文件进行更改并保存更改后切换到另一个主题并返回。

您在/usr/share/themes 中所做的更改将是系统范围的，而~/.themes 中的更改将是特定于用户的。

这就是我的覆盖滚动条在 PCManFM 中的样子。

编辑：如果使用传统的滚动条，那么为了增加gedit等gtk-3.0应用程序中滑块和槽之间的对比度，可以编辑上面提到的gtk-widgets.css文件。为此，搜索标题为滚动条（或类似内容）的部分并查找具有以下内容的行：

.scrollbar.slider,
.scrollbar.slider:hover,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.slider.vertical:hover,
.scrollbar.button.vertical {
    background-image: -gtk-gradient (linear, left top, right top,
                                 from (shade (@bg_color, 1.08)),
                                 to (shade (@bg_color, 0.92)));
    border-style: solid;
    border-width: 1px;

在这里，可以通过更改阴影来调整背景图像的值。值越高越亮，值越低越暗。

我更喜欢做一些更简单的事情：我将 background-image 更改为 background- color并且只使用我喜欢的颜色。因此，例如，背景颜色：红色；可能会给出突出的对比。

我的代码如下所示：

.scrollbar.slider,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.button.vertical {
    background-color: #003263; /*@theme_bg_color;*/
    /**/
    /**/

显然，建议在编辑之前进行备份，并且可以注释掉 gtk-widgets.css 文件中的内容，而不是使用/*和删除内容*/。

（我无法在发布答案时使块引号的格式起作用。如果有人能清理一下，我将不胜感激。）

最后一次编辑（我希望）：Chrome或Chromium 的 用户可以通过编辑他们的gtk-2.0/apps/chromium.rc文件（如果他们的主题提供）或通过编辑（gtk-2.0/gtkrc如果那里存在所需内容）来增加对比度。在这两种情况下，都应该搜索标题为 "chrome-gtk-frame" 的部分。在这里，再次使用此（或类似）行中的阴影值：

ChromeGtkFrame::scrollbar-slider-normal-color = shade (1.4, @panel_bg)

或者可以简单地指定一种颜色，如下所示：

ChromeGtkFrame::scrollbar-slider-normal-color = "#003263"

或者

ChromeGtkFrame::scrollbar-slider-normal-color = "blue"

（引号是必需的。）

Answer 2

笔记：

此答案中的格式仅适用于精确（Ubuntu 12.04），请参阅下一个答案以了解可信赖的改进格式（Ubuntu 14.04）。

使滚动条可见（改变颜色）

根据上面提供的 vasa1 信息，我将经典滚动条的颜色更改为默认选择颜色 - 与覆盖滚动条使用的颜色相同。

对于 GTK 3 应用程序修改：

gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

从第 1580 行开始，如下所示：

.scrollbar.slider,
.scrollbar.slider:hover,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.button.vertical {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@selected_bg_color, 1.38)),
                                     to (shade (@selected_bg_color, 1.22)));
    border-style: solid;
    border-width: 1px;

    -unico-border-gradient: -gtk-gradient (linear, left top, right top,
                                           from (shade (@selected_bg_color, 1.14)),
                                           to (shade (@selected_bg_color, 1.14)));
    -unico-centroid-texture:  url("assets/scrollbar_handle_vertical.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
                                                 from (shade (@selected_bg_color, 1.46)),
                                                 to (shade (@selected_bg_color, 1.3)));
    -unico-inner-stroke-width: 1px;
}

.scrollbar.slider.vertical:hover {
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@selected_bg_color, 1.28)),
                                     to (shade (@selected_bg_color, 1.02)));
    border-style: solid;
    border-width: 1px;

    -unico-border-gradient: -gtk-gradient (linear, left top, right top,
                                           from (shade (@selected_bg_color, 0.94)),
                                           to (shade (@selected_bg_color, 0.94)));
    -unico-centroid-texture:  url("assets/scrollbar_handle_vertical.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
                                                 from (shade (@selected_bg_color, 1.36)),
                                                 to (shade (@selected_bg_color, 1.1)));
    -unico-inner-stroke-width: 1px;
}

.scrollbar.slider.horizontal,
.scrollbar.button.horizontal {                                   
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.38)),
                                     to (shade (@selected_bg_color, 1.22)));

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@selected_bg_color, 1.14)),
                                           to (shade (@selected_bg_color, 1.14)));
    -unico-centroid-texture:  url("assets/scrollbar_handle.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
                                                 from (shade (@selected_bg_color, 1.46)),
                                                 to (shade (@selected_bg_color, 1.3)));
}

.scrollbar.slider.horizontal:hover {
    background-image: -gtk-gradient (linear, left top, left bottom,
                                     from (shade (@selected_bg_color, 1.28)),
                                     to (shade (@selected_bg_color, 1.02)));

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@selected_bg_color, 0.94)),
                                           to (shade (@selected_bg_color, 0.94)));
    -unico-centroid-texture:  url("assets/scrollbar_handle.png");
    -unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
                                                 from (shade (@selected_bg_color, 1.36)),
                                                 to (shade (@selected_bg_color, 1.1)));
}


.scrollbar.button,
.scrollbar.button:insensitive {
    -unico-outer-stroke-width: 0;
}

这应该是默认的。

对于 GTK 2 应用程序修改：

gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc

从第 223 行开始，如下所示：

style "scrollbar" = "button" {
    xthickness = 2
    ythickness = 2

    bg[NORMAL] = shade(1.3, @selected_bg_color)
    bg[PRELIGHT] = shade (1.04, @selected_bg_color)

    bg[ACTIVE] = shade (0.96, @selected_bg_color)

    engine "murrine"
    {
        border_shades = {1.15, 1.1}
        roundness = 20
        contrast = 1.0
        trough_shades = {0.92, 0.98}
        lightborder_shade = 1.3
        glowstyle = 5
        glow_shade = 1.02
        gradient_shades = {1.2, 1.0, 1.0, 0.86}
        trough_border_shades = {0.9, 0.98}
    }
}

它看起来与 GTK 3 格式并不 100% 相同，因此请随意改进它。

使滚动条可点击（增加宽度）

为了增加从未在生产中使用的愚蠢的小宽度，我假设，对相同的文件进行以下更改。

对于 GTK 3 应用程序：

gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

修改第 1550 行，使其看起来像：

.scrollbar {
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
    -GtkRange-slider-width: 16;

    border-radius: 20px;

    -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                           from (shade (@bg_color, 0.74)),
                                           to (shade (@bg_color, 0.74)));
}

对于 GTK 2 应用程序修改：

gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc

修改第 34 行，使其看起来像：

GtkScrollbar::slider-width = 16

对于那些喜欢已编辑的完整文件的人，您可以从这里下载我的文件：

GTK 3：gtk-widgets.css

GTK 2：gtkrc

当心。进行备份。

享受！:)