With a minimal install of Manjaro; flatpak not using system theme

[NZXT]

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

[Aragorn]

@NZXT

Timeshift for example has Breeze theme.

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.

[NZXT]

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.

[NZXT]

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 värit kommentoitu pois --- */
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); */
}

#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);
}

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.

[linux-aarhus]

The title has been somewhat misleading as the minimal installation of Manjaro Linux is not causing the issue at hand - the minimal edition does not claim to have all packages needed for any given usecase.

The title has been slightly modified to reflect the above fact.

On contrary the issue is rather related to one or more package not synced by the user - which may or may not indicate lack of knowledge to have the expected functionality.

This will eventually lead to the user needing to research what may be needed to achieve the desired system coherence.

An any case it is not a flaw of the minimal edition - as one would think it the subject came up within a search result for flatpak integration.