Stretch - Consistent look-n-feel (gtk2, gtk3, qt theme set)

Everything about X, Gnome, KDE, ... and everything running on it

Stretch - Consistent look-n-feel (gtk2, gtk3, qt theme set)

Postby ruffwoof » 2017-08-17 18:56

gtk3 has adwaita as its inbuilt default theme. Not the nicest looking, white background with blue highlight on menus, but it is one of the themes that is common to others (gtk2, qt4, qt5).

I use a base cli debian install with xorg and jwm window manager added in (together with pcmanfm file manager, that I also use as the desktop icon manager i.e. pcmanfm --desktop). For a common adwaita look and feel I've installed

Image

and left gtk3 to use its default inbuilt (adwaita) theme i.e. a ~/.config/gtk-3.0/settings.ini content of
Code: Select all
[Settings]
gtk-theme-name=
gtk-icon-theme-name=hicolor
gtk-font-name=Sans 13
gtk-cursor-theme-size=0
gtk-toolbar-style=GTK_TOOLBAR_BOTH
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=1
gtk-enable-input-feedback-sounds=1
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle=hintslight
gtk-xft-rgba=rgb

and a ~/.config/gtk-3.0/gtk.css content of
Code: Select all
/* Custom styles */

/* select-on */
@define-color selected_bg_color #4b6983;
@define-color selected_fg_color #eeeeee;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
/* select-on */

/* panel-on */
@define-color panel_bg_color #dcdad5;
@define-color panel_fg_color #333333;

PanelWidget,
PanelApplet,
PanelToplevel,
PanelSeparator,
PanelApplet > GtkMenuBar.menubar,
PanelApplet > GtkMenuBar.menubar.menuitem,
PanelMenuBar.menubar,
PanelMenuBar.menubar.menuitem,
PanelAppletFrame,
UnityPanelWidget,
.gnome-panel-menu-bar,
.unity-panel {
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,0.8)));
   color: @panel_fg_color;
}

.unity-panel.menuitem,
.unity-panel .menuitem {
   color: @panel_fg_color;
}

.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
   border-color: shade(@panel_bg_color, 0.7);
   border-image: none;
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color, 0.97)),to(shade(@panel_bg_color, 0.82)));
   color: @panel_fg_color;
}

PanelApplet .button {
   border-color: transparent;
   border-image: none;
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,0.8)));
   color: @panel_fg_color;
   box-shadow: none;
   text-shadow: none;
   -unico-inner-stroke-width: 0;
}

PanelApplet .button:active {
   border-color: shade(@panel_bg_color,0.8);
   border-image: none;
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(shade(@panel_bg_color,1.02),0.9)),to(shade(shade(@panel_bg_color,1.02),0.95)));
   color: @panel_fg_color;
   box-shadow: none;
   text-shadow: none;
   -unico-inner-stroke-width: 0;
}

PanelApplet .button:hover {
   border-color: transparent;
   border-image: none;
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(@panel_bg_color,1.2)),to(shade(@panel_bg_color,1.0)));
   color: @panel_fg_color;
   box-shadow: none;
   text-shadow: none;
   -unico-inner-stroke-width: 0;
}

PanelApplet .button:active:hover {
   border-color: shade(@panel_bg_color,0.8);
   border-image: none;
   background-image: -gtk-gradient(linear,left top,left bottom,from(shade(shade(@panel_bg_color,1.02),1.0)),to(shade(shade(@panel_bg_color,1.02),1.05)));
   color: @panel_fg_color;
   box-shadow: none;
   text-shadow: none;
   -unico-inner-stroke-width: 0;
}

WnckPager,
WnckTasklist {
   background-color: @panel_bg_color;
}

/* panel-on */

/* menu-on */
/* @define-color menu_bg_color #dcdad5; */
@define-color menu_bg_color #ffffff;
@define-color menu_fg_color #333333;

GtkTreeMenu.menu,
GtkMenuToolButton.menu,
GtkComboBox .menu {
   background-color: @menu_bg_color;
}

.primary-toolbar .button .menu,
.toolbar .menu,
.toolbar .primary-toolbar .menu,
.menu {
   border-style: none;
   background-image: none;
   background-color: @menu_bg_color;
   color: @menu_fg_color;
   box-shadow: none;
   text-shadow: none;
   -unico-inner-stroke-width: 0;
}

.menu.button:hover,
.menu.button:active,
.menu.button:active:disabled,
.menu.button:disabled,
.menu.button {
   background-color: @menu_bg_color;
   background-image: none;
}

GtkTreeMenu .menuitem * {
   color: @menu_fg_color;
}

.menuitem,
.menu .menuitem {
   background-color: transparent;
}

.menu .menuitem:active,
.menu .menuitem:hover {
   background-color: @theme_selected_bg_color;
}

.menuitem.check,
.menuitem.radio,
.menuitem.check:hover,
.menuitem.radio:hover,
.menuitem.check:active,
.menuitem.radio:active {
   background-color: transparent;
}

.menu .menuitem:disabled,
.menu .menuitem *:disabled {
   color: mix(@menu_fg_color,@menu_bg_color,0.5);
}

.menuitem.arrow {
   color: alpha(@menu_fg_color, 0.6);
}

.menuitem .entry {
   border-color: shade(@menu_bg_color,0.7);
   border-image: none;
   background-color: @menu_bg_color;
   background-image: none;
   color: @menu_fg_color;
}

.menuitem .accelerator {
   color: alpha(@menu_fg_color,0.6);
}

.menuitem .accelerator:disabled {
   color: alpha(mix(@menu_fg_color,@menu_bg_color,0.5),0.6);
   text-shadow: none;
}

.menuitem.separator {
   background-color: transparent;
   color: shade(@menu_bg_color, 0.9);
}

.menuitem GtkCalendar,
.menuitem GtkCalendar.button,
.menuitem GtkCalendar.header,
.menuitem GtkCalendar.view {
   border-color: shade(@menu_bg_color,0.8);
   border-image: none;
   background-color: @menu_bg_color;
   background-image: none;
   color: @menu_fg_color;
}

.menuitem GtkCalendar:indeterminate {
   color: mix(@menu_fg_color,@menu_bg_color,0.5);
}

/* menu-on */


For gtk2 my ~/.gtkrc-2.0 contains
Code: Select all
gtk-theme-name="Adwaita"
gtk-icon-theme-name="Adwaita"
gtk-font-name="Sans 13"
gtk-cursor-theme-size=18
gtk-toolbar-style=GTK_TOOLBAR_BOTH_HORIZ
gtk-toolbar-icon-size=GTK_ICON_SIZE_LARGE_TOOLBAR
gtk-button-images=1
gtk-menu-images=1
gtk-enable-event-sounds=1
gtk-enable-input-feedback-sounds=1
gtk-xft-antialias=1
gtk-xft-hinting=1
gtk-xft-hintstyle="hintslight"
gtk-xft-rgba="rgb"

style "scroll"
{
    GtkScrollbar::slider-width        = 26
}

class "*" style "scroll"


In ~/.profile I've set qt5 to use adwaita by including the line
Code: Select all
export QT_STYLE_OVERRIDE=Adwaita


and in ~/.config/Trolltech.conf my [Qt] section looks like
Code: Select all
[Qt]
style=Adwaita
font="Sans Serif,13,-1,5,50,0,0,0,0,0"
Palette\active=#000000, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #000000, #ffffff, #000000, #ffffff, #dcdad5, #a9a8a4, #4b6983, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
Palette\inactive=#000000, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #000000, #ffffff, #000000, #ffffff, #dcdad5, #a9a8a4, #9c9a94, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
Palette\disabled=#6e6d6a, #dcdad5, #ffffff, #cbc7c4, #b8b6b2, #b8b5b2, #6e6d6a, #ffffff, #6e6d6a, #ffffff, #dcdad5, #a9a8a4, #838383, #ffffff, #0000ff, #ff00ff, #efefef, #000000, #ffffdc, #000000
fontPath=@Invalid()
embedFonts=true
doubleClickInterval=400
cursorFlashTime=1000
wheelScrollLines=3
resolveSymlinks=false
globalStrut\width=0
globalStrut\height=0
useRtlExtensions=false
XIMInputStyle=On The Spot
DefaultInputMethod=xim
audiosink=Auto
videomode=Auto
GUIEffects=none


I've also set jwm to have a common adwaita type look i.e. a section in ~/.jwmrc that looks like
Code: Select all
    <WindowStyle>
        <Font>Sans-11:bold</Font>
        <Width>8</Width>
        <Height>32</Height>
        <Corner>0</Corner>
        <Foreground>#FFFFFF</Foreground>
        <Background>gray60:gray10</Background>
        <Outline>#000000</Outline>
        <Opacity>0.5</Opacity>
        <Active>
            <Foreground>white</Foreground>
            <Background>blue:#0077CC</Background>
            <Outline>blue</Outline>
            <Opacity>1.0</Opacity>
        </Active>
    </WindowStyle>
   <TaskListStyle>
      <Font>Sans-11</Font>
      <Active>
             <Foreground>white</Foreground>
             <Background>#0077CC:blue</Background>
      </Active>
      <Foreground>white</Foreground>
      <Background>gray60:gray10</Background>
    </TaskListStyle>
    <TrayStyle group="false" list="all">
        <Font>Sans-12</Font>
        <Background>#333333</Background>
        <Foreground>#FFFFFF</Foreground>
        <Outline>#000000</Outline>
        <Opacity>0.75</Opacity>
    </TrayStyle>
    <PagerStyle> <!-- Using brightside hot corner to show desktop so not used -->
        <Outline>#000000</Outline>
        <Foreground>#555555</Foreground>
        <Background>#333333</Background>
        <Text>#FFFFFF</Text>
        <Active>
            <Foreground>#0077CC</Foreground>
            <Background>#004488</Background>
        </Active>
    </PagerStyle>
    <MenuStyle>
        <Font>Sans-13</Font>
        <Foreground>#000000</Foreground>
        <Background>#FFFFFF</Background>
        <Outline>#000000</Outline>
        <Active>
            <Foreground>#FFFFFF</Foreground>
            <Background>#4A90D9</Background>
        </Active>
        <Opacity>0.85</Opacity>
    </MenuStyle>
    <PopupStyle>
        <Font>Sans-13</Font>
        <Foreground>#000000</Foreground>
        <Background>#999999</Background>
    </PopupStyle>


Tweaking the font size across all of those involves editing the Font values in each of the files to be similar ... as desired.

So now if I open leafpad, or galculator, or kcheckers, Libre, Firefox ... etc. they all have the same (similar) look and feel.

Of course if you use a desktop installation and fire up its theme manager and make changes then that will screw up the setup i.e. I avoid changing things once set up.

GTK2
Image

GTK3
Image

Qt4
Image
ruffwoof
 
Posts: 211
Joined: 2016-08-20 21:00

Return to Desktop & Multimedia

Who is online

Users browsing this forum: No registered users and 5 guests

fashionable