Minimal install of Manjaro Flatpak not using system theme

Support Snap/Flatpak
21

Also what ive noticed is that even some repo apps theming is off. Timeshift for example has Breeze theme.

22

timeshift is a gtk-based application, while Plasma is a qt-based environment.

gtk is notoriously incooperative with anything qt, and so if you want gtk applications to have a look similar to that of Plasma, then you’re going to have to install a matching gtk theme via Plasma’s System Settings.

Colors & Themes → Application Style → Configure GNOME/GTK Application Style

Unfortunately, there aren’t many gtk themes that match Plasma/qt theming. breeze-gtk is one of the very few.

Furthermore, there are several different versions of gtk going round — some applications are still using gtk2, some are gtk3 — like the recently released gimp 3.x — and some are gtk4. And they’re all different, but especially so gtk4, which is very difficult (if not impossible) to sway away from its hard-coded libadwaita style.

The discrepancy in styling is unfortunately a consequence of the intransigent and arrogant insistence of the GNOME and gtk developers that their software is the only thing that counts, and to hell with everything else. :man_shrugging:

1 Like
23

Managed to at least fix partly the GTK4 apps with modifying ~/.config/gtk-4.0/gtk.css file.

What i modified in it was this:

@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:not(:hover) {
    background-color: transparent;
}

Now all is themed, but hovering colors for the maximize, minimize and close buttons.

Kuvakaappaus_20250620_001639
Kuvakaappaus_20250620_0016391801×1379 273 KB

24

I now got OBS skinned with a theme made by AI and me. You can make a file that ends with .ovt into ~/.var/app/com.obsproject.Studio/config/obs-studio/themes/ also create a folder themes in there if it does not exist. Then add this to the file:

@OBSThemeMeta {
    name: 'Manjaro Deep Teal';
    id: 'com.obsproject.Yami.DeepTeal';
    extends: 'com.obsproject.Yami';
    author: 'Manjaro User';
    dark: 'true';
}

@OBSThemeVars {
    --grey1: #1a1f23;
    --grey2: #1f2429;
    --grey3: #23292e;
    --grey4: #252b31;
    --grey5: #2a3036;
    --grey6: #2f353c;
    --grey7: #343b42;
    --grey8: #394148;

    --primary: #003e3a;
    --primary_light: #00524d;
    --primary_lighter: #007065;
    --primary_dark: #002f2c;
    --primary_darker: #001f1d;

    --bg_base: var(--grey6);
    --bg_window: var(--grey4);
    --bg_preview: #111514;

    --border_color: var(--grey5);

    --input_bg: var(--grey6);
    --input_bg_hover: var(--grey7);
    --input_bg_focus: var(--grey7);

    --list_item_bg_selected: var(--primary);
    --list_item_bg_hover: var(--primary_light);

    --input_border: var(--grey1);
    --input_border_hover: var(--primary);
    --input_border_focus: var(--primary);

    --spacing_input: var(--spacing_base);

    --button_bg: var(--primary);
    --button_bg_hover: var(--primary_light);
    --button_bg_down: var(--primary_dark);
    --button_bg_disabled: var(--grey6);

    --button_bg_red: #581624;
    --button_bg_red_hover: #742031;
    --button_bg_red_down: #3f151e;

    --button_border: var(--primary);
    --button_border_hover: var(--button_bg_hover);
    --button_border_focus: var(--button_bg_hover);

    --tab_bg: var(--input_bg);
    --tab_bg_hover: var(--grey3);
    --tab_bg_down: var(--grey7);
    --tab_bg_disabled: var(--grey6);

    --tab_border: var(--grey3);
    --tab_border_hover: var(--grey1);
    --tab_border_focus: var(--grey1);
    --tab_border_selected: var(--primary_light);

    --scrollbar: var(--grey2);
    --scrollbar_hover: var(--primary_light);
    --scrollbar_down: var(--grey3);
    --scrollbar_border: var(--primary_light);

    --toolbutton_bg: var(--grey3);
    --toolbutton_bg_hover: var(--primary_light);
    --toolbutton_bg_down: var(--primary_dark);
    --toolbutton_bg_disabled: var(--grey4);
}

QDockWidget::title {
    background-color: var(--bg_base);
}

QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
    background: var(--grey3);
}

QComboBox,
QDateTimeEdit,
QLineEdit,
QPlainTextEdit,
QTextEdit,
QSpinBox,
QDoubleSpinBox {
    border-width: 2px;
    border-color: var(--input_border);
}

QMenu::item:selected,
QListWidget::item:selected,
SceneTree::item:selected,
SourceTree::item:selected {
    background-color: var(--primary_dark);
}

QMenu::item:hover,
QListWidget::item:hover,
SceneTree::item:hover,
SourceTree::item:hover,
QMenu::item:selected:hover,
QListWidget::item:selected:hover,
SceneTree::item:selected:hover,
SourceTree::item:selected:hover {
    background-color: var(--primary);
}

QToolBar {
    background-color: var(--grey4);
    padding: var(--padding_large);
    margin: 0;
}

QPushButton:disabled {
    border-color: var(--grey3);
}

QToolButton,
QPushButton[toolButton="true"] {
    background-color: var(--toolbutton_bg);
    border-color: var(--toolbutton_bg);
}

QToolButton:hover,
QToolButton:focus {
    border-color: var(--primary_light);
    background-color: var(--primary_light);
}

QToolButton:pressed,
QToolButton:pressed:hover {
    background-color: var(--toolbutton_bg_down);
    border-color: var(--toolbutton_bg_down);
}

.indicator-mute::indicator,
.indicator-mute::indicator:unchecked,
.indicator-mute::indicator:focus {
    background-color: var(--toolbutton_bg);
    border: 1px solid var(--toolbutton_bg);
}

.indicator-mute::indicator:hover,
.indicator-mute::indicator:unchecked:hover {
    background-color: var(--toolbutton_bg_hover);
    border: 1px solid var(--toolbutton_bg_hover);
}

.indicator-mute::indicator:pressed,
.indicator-mute::indicator:pressed:hover {
    background-color: var(--toolbutton_bg_down);
    border-color: var(--toolbutton_bg_down);
}

#stackedMixerArea QPushButton,
#stackedMixerArea QPushButton:!hover {
    background-color: var(--toolbutton_bg);
    border-color: var(--toolbutton_bg);
}

#stackedMixerArea QPushButton:hover {
    background-color: var(--toolbutton_bg_hover);
}

#stackedMixerArea QPushButton:pressed {
    background-color: var(--toolbutton_bg_down);
}

QToolButton:disabled,
QPushButton[toolButton="true"]:disabled {
    background-color: var(--toolbutton_bg_disabled);
    border-color: transparent;
}

QTabBar::tab {
    background-color: var(--grey5);
}

QTabBar::tab:top:selected {
    border-bottom: 2px solid var(--primary_light);
}

QTabBar QToolButton {
    background-color: var(--grey5);
}

QGroupBox {
    background-color: var(--grey3);
}

OBSBasicSettings #PropertiesContainer {
    background-color: var(--grey3);
}

QGroupBox::title {
    color: var(--primary_lighter);
}

QSlider::groove {
    background-color: var(--grey2);
}

VolumeMeter {
    qproperty-backgroundNominalColor: #001f1d;
    qproperty-backgroundWarningColor: #804900;
    qproperty-backgroundErrorColor: #801200;
    qproperty-foregroundNominalColor: #007065;
    qproperty-foregroundWarningColor: #ffb400;
    qproperty-foregroundErrorColor: #ff4040;
    qproperty-magnitudeColor: palette(window);
    qproperty-majorTickColor: palette(window-text);
    qproperty-minorTickColor: palette(mid);
}

/* Primary Control Button Checked Coloring */
#streamButton:!hover:!pressed:checked,
#recordButton:!hover:!pressed:checked,
#replayBufferButton:!hover:!pressed:checked,
#virtualCamButton:!hover:!pressed:checked,
#modeSwitch:!hover:!pressed:checked,
#broadcastButton:!hover:!pressed:checked {
    background: var(--primary_light);
}

/* Slider custom styles */
QSlider::groove:horizontal {
    background: var(--grey2);
    height: 6px;
    border-radius: 3px;
}

QSlider::handle:horizontal {
    background: var(--primary_lighter);
    border: 1px solid var(--primary);
    width: 12px;
    height: 12px;
    margin: -4px 0;
    border-radius: 6px;
}

QSlider::sub-page:horizontal {
    background: var(--primary_lighter);
    border-radius: 3px;
}

That should give you a theme that is at least pretty close to Manjaros theme with crappy OBS that doesn’t support system theming anymore.

1 Like