Adwaita-manjaro

Currently, we have packagesadwaita-maia-gtk3 and adwaita-manjaro-themes. While not yet terribly broken, they are very much outdated and display an older version of adwaita. Since

  1. both of the packages are just about changing the highlight color of adwaita
  2. adwaita is now inbuilt and the alternative color version has gotten more difficult to maintain,

I propose that we drop there packages. Instead, this file accomplishes pretty much the same thing better and does not require maintenance:

~/.config/gtk-3.0/gtk.css

@define-color theme_selected_fg_color #16A085;

*:selected{
    background-color: @theme_selected_bg_color;
}

*.view:selected {
    background-color: @theme_selected_bg_color;
}

textview selection {
    background-color: @theme_selected_bg_color;
}

selection {
    background-color: @theme_selected_bg_color;
 } 

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

switch:checked {
   background-color: @theme_selected_bg_color;
}

 notebook > header.top > tabs > tab:checked { 
    box-shadow: inset 0 -3px  @theme_selected _bg_color;
}
4 Likes

How will this affect other themes the user selects?

Could it be added somewhere on the system as a "child theme" or something similar?

With the default matcha theme, it just sets the highlight color as it already is. With adapta, it makes some selected buttons unreadable. I think adding a few parameters in the file should fix it for that theme. I have not tried it yet with other themes.

Placing it outside $HOME as a separate package would be ideal. However, there is another option: Add an option to change highlight color to gnome-layout-switcher. It would do this by writing this file and setting the highlight color in it.

1 Like

The file is not yet complete though, there are a few blue strips left:

I'll have to dig through the sources to find all of them.

@Ste74, I think that for gnome, it would be more stable to use branded Adwaita instead of a custom theme like Matcha. One less thing to worry about when the next gnome update comes.

2 Likes

Don t see how the adwaita is now but if is coded with sass is easy to tweak..In the sass code is defined one or two blue variant and the other present in the CSS files result comes automatically..

Edit: Seem i don t read all tread..

Adapta is not maintained anymore so don t spend time into it.. If you use this file by default; warning because all themes are tweaked by this file.. If you want this approach is needed a check if adwaita is in use and also if User want the manjarization...

There is the "Toggle manjaro branding" button on the same tab where I planned to put the theme editor. That would also delete the css file.

Probably wise. Maybe we should drop it and other unmaintained themes from the repos?

It seems to work fine with matcha too.

Ya we should drop outdated themes.

4 Likes

Okay, I seem to have hit some problems with the css model: gedit tabs, file selector "select" button and a few other places remain blue. I tried adding every line that contained that shade of blue from this file, but still it yields no results.

My file thusfar:

@define-color theme_selected_bg_color #16A085;
@define-color theme_selected_fg_color #16A085;

*:selected{
    background-color: @theme_selected_bg_color;
}

*.view:selected {
    background-color: @theme_selected_bg_color;
}

textview selection {
    background-color: @theme_selected_bg_color;
}

selection {
    background-color: @theme_selected_bg_color;
 } 

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

switch:checked {
   background-color: @theme_selected_bg_color;
}

* { -gtk-secondary-caret-color: @theme_selected_bg_color; }

.gtkstyle-fallback:selected { background-color: @theme_selected_bg_color; }

.content-view .tile:active, .content-view .tile:selected { background-color: @theme_selected_bg_color; }

label selection { background-color: @theme_selected_bg_color; }

spinbutton:focus:not(.vertical), spinbutton.vertical text:focus, entry:focus { box-shadow: inset 0 0 0 1px @theme_selected_bg_color; }

spinbutton:not(.vertical) > image:active, spinbutton.vertical text > image:active, entry > image:active { color: @theme_selected_bg_color; }

.osd spinbutton:focus:not(.vertical), .osd spinbutton.vertical text:focus, spinbutton.vertical .osd text:focus, .osd entry:focus { border-color: @theme_selected_bg_color; box-shadow: inset 0 0 0 1px @theme_selected_bg_color; }

spinbutton:not(.vertical) progress > trough > progress, spinbutton.vertical text progress > trough > progress, entry progress > trough > progress { border-color: @theme_selected_bg_color; }

treeview entry.flat:focus, treeview entry:focus { border-color: @theme_selected_bg_color; }

.selection-mode button.titlebutton, button.suggested-action.flat { color: @theme_selected_bg_color; }

.selection-mode button.titlebutton:backdrop, button.suggested-action:backdrop, button.suggested-action.flat:backdrop { background-image: image(@theme_selected_bg_color); }

.osd button.suggested-action:active:backdrop, .osd button.suggested-action:active, .osd button.suggested-action:checked:backdrop, .osd button.suggested-action:checked { background-image: image(@theme_selected_bg_color); }

button:link > label:backdrop:backdrop:hover, button:visited > label:backdrop:backdrop:hover, button:link > label:backdrop:backdrop:hover:selected, button:visited > label:backdrop:backdrop:hover:selected, button:link > label:backdrop, button:visited > label:backdrop, *:link:backdrop:backdrop:hover, button:backdrop:backdrop:hover:link, button:backdrop:backdrop:hover:visited, *:link:backdrop:backdrop:hover:selected, button:backdrop:backdrop:hover:selected:link, button:backdrop:backdrop:hover:selected:visited, .selection-mode .titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, .selection-mode.titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link, .selection-mode headerbar .subtitle:backdrop:backdrop:hover:link, headerbar.selection-mode .subtitle:backdrop:backdrop:hover:link, *:link:backdrop, button:backdrop:link, button:backdrop:visited { color: @theme_selected_bg_color; }

.selection-mode .titlebar:not(headerbar), .selection-mode.titlebar:not(headerbar), .selection-mode headerbar, headerbar.selection-mode { background: @theme_selected_bg_color linear-gradient(to top, #185cb0, #1961b9); }

.selection-mode .titlebar:backdrop:not(headerbar), .selection-mode.titlebar:backdrop:not(headerbar), .selection-mode headerbar:backdrop, headerbar.selection-mode:backdrop { background-color: @theme_selected_bg_color; }

.selection-mode .titlebar:not(headerbar) button, .selection-mode.titlebar:not(headerbar) button, .selection-mode headerbar button, headerbar.selection-mode button { background-image: linear-gradient(to top, #155099 2px, @theme_selected_bg_color); }

.selection-mode .titlebar:not(headerbar) button:backdrop.flat, .selection-mode .titlebar:not(headerbar) button:backdrop, .selection-mode.titlebar:not(headerbar) button:backdrop.flat, .selection-mode.titlebar:not(headerbar) button:backdrop, .selection-mode headerbar button:backdrop.flat, .selection-mode headerbar button:backdrop, headerbar.selection-mode button:backdrop.flat, headerbar.selection-mode button:backdrop { background-image: image(@theme_selected_bg_color); }

treeview.view.progressbar { background-color: @theme_selected_bg_color; background-image: image(@theme_selected_bg_color); }

treeview.view button.dnd:active, treeview.view button.dnd:selected, treeview.view button.dnd:hover, treeview.view button.dnd, treeview.view header.button.dnd:active, treeview.view header.button.dnd:selected, treeview.view header.button.dnd:hover, treeview.view header.button.dnd { background-color: @theme_selected_bg_color; }

treeview.view acceleditor > label { background-color: @theme_selected_bg_color; }

menubar > box > menuitem:hover, .menubar > box > menuitem:hover { box-shadow: inset 0 -3px @theme_selected_bg_color; }

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

notebook box > header.top > tabs > tab:checked { box-shadow: inset 0 -3px @theme_selected_bg_color; }

notebook box > header.bottom > tabs > tab:checked { box-shadow: inset 0 3px @theme_selected_bg_color; }

notebook box > header.left > tabs > tab:checked { box-shadow: inset -3px 0 @theme_selected_bg_color; }

notebook box > header.right > tabs > tab:checked { box-shadow: inset 3px 0 @theme_selected_bg_color; }

switch:checked { background-color: @theme_selected_bg_color; }

switch:backdrop:checked { background-color: @theme_selected_bg_color; }

scale highlight, progressbar progress { background-color: @theme_selected_bg_color; }

levelbar block.high, levelbar block:not(.empty) { border-color: @theme_selected_bg_color; background-color: @theme_selected_bg_color; }

levelbar block.high:backdrop, levelbar block:not(.empty):backdrop { border-color: @theme_selected_bg_color; }

row.activatable:selected:backdrop { background-color: @theme_selected_bg_color; }

placessidebar row.sidebar-new-bookmark-row { color: @theme_selected_bg_color; }

paned > separator:selected { background-image: image(@theme_selected_bg_color); }

.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { background-color: @theme_selected_bg_color; }

button.emoji-section:checked { border-color: @theme_selected_bg_color; }

popover.emoji-picker .emoji :hover { background: @theme_selected_bg_color; }

menubar > item:selected { box-shadow: inset 0 -3px @theme_selected_bg_color; }

popover.menu button.flat.image-button.model:selected { background: @theme_selected_bg_color; }

popover.menu modelbutton:selected { background-color: @theme_selected_bg_color; }

scrollbar slider:hover:active { background-color: @theme_selected_bg_color; }

button:link > label:visited, button:visited > label:visited, *:link:visited, button:visited { color: @theme_selected_bg_color; }

The problem is visible in this screenshot:

If I don't find where those remaining parts are set, then this hack probably can't serve in any official capacity.

I tried regenerating the css from sass. It is much more difficult to get the right color like that. Also, it did not end up changing the blue parts. It seems that those colors might be set somehow else?

I'll look into how current adwaita-manjaro does it, since it seems to get those colors right.

I think, it would be nice to use find and replace method with sed command in order to change blue color.

It's basically what I did at first, but some blue parts remain. I'll need to figure out where they are set to change them too.

For the tabs of GTK3 applications you can try

notebook > header.top > tabs > tab:checked {
    box-shadow: inset 0 -2px @theme_selected_bg_color;
}

and tweak the value of -2px if needed.
This CSS style is from Matcha theme, not from Adwaita. I don't know if that's OK with you, it seems to work though.


To change the buttons in the Save/Open dialog windows you can try:

button.suggested-action {
    color: white;
    outline-color: rgba(255, 255, 255, 0.3);
    border-color: @theme_selected_bg_color;
    border-bottom-color: @theme_selected_bg_color;
    background-image: linear-gradient(to top, @theme_selected_bg_color 2px, @theme_selected_bg_color);
    text-shadow: 0 -1px rgba(0, 0, 0, 0.719216);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.719216);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
}

button.suggested-action:disabled {
    color: white;
    outline-color: rgba(255, 255, 255, 0.3);
    border-color: #1b1b1b;
    border-bottom-color: #1b1b1b;
    background-image: linear-gradient(to top, #323232 2px, #323232);
    text-shadow: 0 -1px rgba(0, 0, 0, 0.719216);
    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.719216);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07);
}

Hope that helps!

2 Likes

Yay! It works! There is much rejoicing.

1 Like

Okay, I have been testing the file. I think there is still use for adwaita-maila package. I'll look into updating the package when I have time.

1 Like

Does someone want to help with writing the new PKGBUILD for adwaita-maia? @Ste74 do you want to take a look at it if I get a skeleton written? I'm thinking of editing the sass to get the css, but then using it as such instead of recompiling the whole gtk3.

Do you mean? I can look into it..

Next step is the PKGBUILD

2 Likes

Is the meson.build missing a project() array?

build() {
	cd "$pkgname/theme/$pkgname/gtk-3.0"
	mkdir build && cd build
	meson . build --prefix /usr
	ninja -C build
}
==> Starting build()...
The Meson build system
Version: 0.51.2
Source dir: /home/yochanan/Documents/pkgbuilds/adwaita-maia/src/adwaita-maia/theme/adwaita-maia/gtk-3.0
Build dir: /home/yochanan/Documents/pkgbuilds/adwaita-maia/src/adwaita-maia/theme/adwaita-maia/gtk-3.0/build
Build type: native build

ERROR: First statement must be a call to project

Is there any benefit to building it instead of just placing it to the themes directory? Or, can I build just the gtk theme and not the whole gtk3, because I don't want to do the latter.

Forum kindly sponsored by Bytemark