☰

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

tag-icon • tag-icon 12.04 colors scrollbar
使滚动条可见（改变颜色）

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

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

http://placerdigital.net/up/Dropbox_003.png

http://placerdigital.net/up/Nuvola.png

http://placerdigital.net/up/Ubuntu%20Software%20Center_004.png

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

在此处输入图片描述

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

答案1

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

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

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

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

您在/usr/share/主题将是全系统的，并且变化〜/.主题将是用户特定的。

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

我的覆盖滚动条

编辑：如果使用传统的滚动条，则为了增加 gtk-3.0 应用程序（如 gedit）中滑块和槽之间的对比度，可以编辑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-color: red; 可能会产生出色的对比度。

我的代码如下：

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

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

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

最后一次编辑（我希望）： 用户铬合金或者铬可以通过编辑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"

（引号是必需的。）

答案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

GTK2：韓國

要小心。请做好备份。

享受！ ：）

答案3

为了Ubuntu 14.04（可信塔尔羊）需要稍微不同的修改。

GTK 3：gtk-widgets.css转到：/usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

GTK2：韓國转到：/usr/share/themes/Ambiance/gtk-2.0/gtkrc

事先做好备份：

sudo cp /usr/share/themes/Ambiance/gtk-2.0/gtkrc /usr/share/themes/Ambiance/gtk-2.0/gtkrc.bak
sudo cp gtkrc /usr/share/themes/Ambiance/gtk-2.0/
sudo cp /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css.bak
sudo cp gtk-widgets.css /usr/share/themes/Ambiance/gtk-3.0/

这些命令需要下载的文件gtkrc并gtk-widgets.css位于当前目录中。

相关内容