So i found a way that is nowhere in the internet to theme GTK4 apps to Manjaros Breath dark theme. Just wanted to save it somewhere so here it goes.
Remember to always backup your files in the case something goes wrong.
You need to copy ~/.config/gtk-3.0/assets/ folders contents to ~/.config/gtk-4.0/assets/ and set the folders permissions to read only so that the .svg images won’t get deleted.
Then modify gtk.css file in ~/.config/gtk-4.0/gtk.css to following:
@import 'colors.css';
@define-color window_bg_color @theme_bg_color_breeze;
@define-color window_fg_color @theme_fg_color_breeze;
@define-color view_bg_color @theme_base_color_breeze;
@define-color view_fg_color @theme_fg_color_breeze;
@define-color accent_color @theme_button_decoration_focus_breeze;
@define-color accent_bg_color @theme_button_decoration_focus_breeze;
@define-color accent_fg_color @theme_fg_color_breeze;
@define-color headerbar_bg_color @theme_header_background_breeze;
@define-color headerbar_backdrop_color @theme_header_background_backdrop_breeze;
@define-color headerbar_fg_color @theme_header_foreground_breeze;
@define-color headerbar_border_color @borders_breeze;
@define-color headerbar_shade_color @borders_breeze;
@define-color popover_bg_color @tooltip_background_breeze;
@define-color popover_fg_color @tooltip_text_breeze;
@define-color dialog_bg_color @popover_bg_color;
@define-color dialog_fg_color @popover_fg_color;
@define-color card_bg_color @theme_header_background_breeze;
@define-color card_fg_color @theme_fg_color_breeze;
@define-color card_shade_color @borders_breeze;
@define-color sidebar_bg_color @theme_bg_color_breeze;
@define-color sidebar_fg_color @theme_fg_color_breeze;
@define-color sidebar_backdrop_color @theme_bg_color_breeze;
@define-color sidebar_shade_color @borders_breeze;
@define-color sidebar_border_color @borders_breeze;
@define-color secondary_sidebar_bg_color @sidebar_bg_color;
@define-color secondary_sidebar_fg_color @sidebar_fg_color;
@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
@define-color secondary_sidebar_shade_color @sidebar_shade_color;
@define-color secondary_sidebar_border_color @sidebar_border_color;
@define-color shade_color rgba(0, 0, 0, 0.36);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
window {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-right-radius:1%;
border-top-left-radius:1%;
}
:root {
box-shadow: 0 8px 24px 0 rgba(0,0,0,1);
}
:root:backdrop {
box-shadow: 0 8px 24px 0 rgba(0,0,0,1);
}
windowcontrols button image {
background-color: transparent;
}
headerbar .close:hover{
color:black;
}
headerbar .minimize:hover{
color:black;
}
headerbar .maximize:hover{
color:black;
}
/* Basic buttons style*/
windowcontrols button {
min-width: 24px;
min-height: 24px;
margin: 0;
padding: 4;
background-position: center;
background-repeat: no-repeat;
background-size: 24px 24px;
border-radius: 50%;
}
/* Minimize button */
windowcontrols button.minimize {
background-image: url('assets/minimize-normal.svg');
}
windowcontrols button.minimize:hover {
background-image: url('assets/minimize-hover.svg');
}
windowcontrols button.minimize:active {
background-image: url('assets/minimize-active.svg');
}
windowcontrols button.minimize:backdrop {
background-image: url('assets/minimize-backdrop-normal.svg');
}
windowcontrols button.minimize:backdrop:hover {
background-image: url('assets/minimize-backdrop-hover.svg');
}
windowcontrols button.minimize:backdrop:active {
background-image: url('assets/minimize-backdrop-active.svg');
}
/* Maximize button */
windowcontrols button.maximize {
background-image: url('assets/maximize-normal.svg');
}
windowcontrols button.maximize:hover {
background-image: url('assets/maximize-hover.svg');
}
windowcontrols button.maximize:active {
background-image: url('assets/maximize-active.svg');
}
windowcontrols button.maximize:backdrop {
background-image: url('assets/maximize-backdrop-normal.svg');
}
windowcontrols button.maximize:backdrop:hover {
background-image: url('assets/maximize-backdrop-hover.svg');
}
windowcontrols button.maximize:backdrop:active {
background-image: url('assets/maximize-backdrop-active.svg');
}
/* Close button */
windowcontrols button.close {
background-image: url('assets/close-normal.svg');
}
windowcontrols button.close:hover {
background-image: url('assets/close-hover.svg');
}
windowcontrols button.close:active {
background-image: url('assets/close-active.svg');
}
windowcontrols button.close:backdrop {
background-image: url('assets/close-backdrop-normal.svg');
}
windowcontrols button.close:backdrop:hover {
background-image: url('assets/close-backdrop-hover.svg');
}
windowcontrols button.close:backdrop:active {
background-image: url('assets/close-backdrop-active.svg');
}
If there is no colors.css in folder ~/.config/gtk-4.0/colors.css then create one with these in it:
@define-color borders_breeze #565a5e;
@define-color content_view_bg_breeze #18191d;
@define-color error_color_backdrop_breeze #da4453;
@define-color error_color_breeze #da4453;
@define-color error_color_insensitive_backdrop_breeze #58262e;
@define-color error_color_insensitive_breeze #58262e;
@define-color insensitive_base_color_breeze #17181c;
@define-color insensitive_base_fg_color_breeze #595a5c;
@define-color insensitive_bg_color_breeze #262c31;
@define-color insensitive_borders_breeze #353b3f;
@define-color insensitive_fg_color_breeze #63676a;
@define-color insensitive_selected_bg_color_breeze #262c31;
@define-color insensitive_selected_fg_color_breeze #63676a;
@define-color insensitive_unfocused_bg_color_breeze #262c31;
@define-color insensitive_unfocused_fg_color_breeze #63676a;
@define-color insensitive_unfocused_selected_bg_color_breeze #262c31;
@define-color insensitive_unfocused_selected_fg_color_breeze #63676a;
@define-color link_color_breeze #1d99f3;
@define-color link_visited_color_breeze #9b59b6;
@define-color success_color_backdrop_breeze #27ae60;
@define-color success_color_breeze #27ae60;
@define-color success_color_insensitive_backdrop_breeze #1c4a32;
@define-color success_color_insensitive_breeze #1c4a32;
@define-color theme_base_color_breeze #18191d;
@define-color theme_bg_color_breeze #282e33;
@define-color theme_button_background_backdrop_breeze #363d43;
@define-color theme_button_background_backdrop_insensitive_breeze #333a40;
@define-color theme_button_background_insensitive_breeze #333a40;
@define-color theme_button_background_normal_breeze #363d43;
@define-color theme_button_decoration_focus_backdrop_breeze #00897b;
@define-color theme_button_decoration_focus_backdrop_insensitive_breeze #215453;
@define-color theme_button_decoration_focus_breeze #00897b;
@define-color theme_button_decoration_focus_insensitive_breeze #215453;
@define-color theme_button_decoration_hover_backdrop_breeze #009886;
@define-color theme_button_decoration_hover_backdrop_insensitive_breeze #215956;
@define-color theme_button_decoration_hover_breeze #009886;
@define-color theme_button_decoration_hover_insensitive_breeze #215956;
@define-color theme_button_foreground_active_backdrop_breeze #dedede;
@define-color theme_button_foreground_active_backdrop_insensitive_breeze #63676a;
@define-color theme_button_foreground_active_breeze #fcfcfc;
@define-color theme_button_foreground_active_insensitive_breeze #63676a;
@define-color theme_button_foreground_backdrop_breeze #dedede;
@define-color theme_button_foreground_backdrop_insensitive_breeze #6c7074;
@define-color theme_button_foreground_insensitive_breeze #6c7074;
@define-color theme_button_foreground_normal_breeze #dedede;
@define-color theme_fg_color_breeze #dedede;
@define-color theme_header_background_backdrop_breeze #2a2e32;
@define-color theme_header_background_breeze #31363b;
@define-color theme_header_background_light_breeze #282e33;
@define-color theme_header_foreground_backdrop_breeze #fcfcfc;
@define-color theme_header_foreground_breeze #fcfcfc;
@define-color theme_header_foreground_insensitive_backdrop_breeze #fcfcfc;
@define-color theme_header_foreground_insensitive_breeze #fcfcfc;
@define-color theme_hovering_selected_bg_color_breeze #009886;
@define-color theme_selected_bg_color_breeze #006e62;
@define-color theme_selected_fg_color_breeze #fcfcfc;
@define-color theme_text_color_breeze #dedede;
@define-color theme_titlebar_background_backdrop_breeze #2a2e32;
@define-color theme_titlebar_background_breeze #31363b;
@define-color theme_titlebar_background_light_breeze #282e33;
@define-color theme_titlebar_foreground_backdrop_breeze #fcfcfc;
@define-color theme_titlebar_foreground_breeze #fcfcfc;
@define-color theme_titlebar_foreground_insensitive_backdrop_breeze #fcfcfc;
@define-color theme_titlebar_foreground_insensitive_breeze #fcfcfc;
@define-color theme_unfocused_base_color_breeze #18191d;
@define-color theme_unfocused_bg_color_breeze #282e33;
@define-color theme_unfocused_fg_color_breeze #dedede;
@define-color theme_unfocused_selected_bg_color_alt_breeze #09403c;
@define-color theme_unfocused_selected_bg_color_breeze #09403c;
@define-color theme_unfocused_selected_fg_color_breeze #dedede;
@define-color theme_unfocused_text_color_breeze #dedede;
@define-color theme_unfocused_view_bg_color_breeze #17181c;
@define-color theme_unfocused_view_text_color_breeze #595a5c;
@define-color theme_view_active_decoration_color_breeze #009886;
@define-color theme_view_hover_decoration_color_breeze #009886;
@define-color tooltip_background_breeze #282e33;
@define-color tooltip_border_breeze #4f5357;
@define-color tooltip_text_breeze #c2c2c2;
@define-color unfocused_borders_breeze #565a5e;
@define-color unfocused_insensitive_borders_breeze #353b3f;
@define-color warning_color_backdrop_breeze #f67400;
@define-color warning_color_breeze #f67400;
@define-color warning_color_insensitive_backdrop_breeze #613612;
@define-color warning_color_insensitive_breeze #613612;
There you have it. This is themed for KDE so if you want rounded corners off or anything like that then just modify the gtk.css file to your liking.
Here is a snippet on how the theme looks.
Where i got the theming/tinting was from here. Just did some modifications to it.
https://discuss.kde.org/t/simple-hack-to-tinting-theming-libadwaita-gtk4-apps-in-kde-plasma/29444