Brave browser has a black new tab button.

SamuelBorn commented 1 year ago

Describe the issue

I am using Brave Browser (flatpak) with the "Use GTK" theme option. The button areas around the "+" for new tab and the "v" in the titlebar are black instead of a shade of gray.

Screenshot(s)

Versions

OS and version: Fedora 36
GNOME Version: 42
Brave Browser (flatpak): Version 1.45.116 Chromium: 107.0.5304.91
adw-gtk3: latest from COPR (I assume v4.0, couldnt figure that out, sorry)

Settings

[ ] I installed the theme from the tar.xz file.
[ ] I installed the theme from git with ninja-build.
[x] I installed the theme from elsewhere. (Where?) COPR: nickavem/adw-gtk3
[x] The theme is the latest available version/git commit.
[x] I've installed the light flatpak theme: org.gtk.Gtk3theme.adw-gtk3
[x] I've installed the dark flatpak theme: org.gtk.Gtk3theme.adw-gtk3-dark
[x] The file ~/.config/gtk-3.0/gtk.css does not exist or is empty.
[x] Dark theme only: I've changed the theme to adw-gtk3-dark in gnome-tweaks AND set the appearance to dark in gnome-control-center.
[x] Before opening this issue I logged out of GNOME and then logged back in again.

lassekongo83 commented 1 year ago

Can't find any documentation about brave chromium gtk classes, so I'm not sure if there's any fix for this.

SamuelBorn commented 1 year ago

I'm not entirely sure. So correct me if I am wrong. But Brave is a Chromium based browser. Normal Chrome themes also work on Brave. Could the documentation for Chrome themes be helpful?

lassekongo83 commented 1 year ago

That's where I first looked, but the buttons have the default button color from Brave which I can't find any information about.

SamuelBorn commented 1 year ago

By analyzing this themes manifest.json.

The color of the background in the browser with the theme applied is (34,34,34).

This narrows the options to the following classes:

"background_tab": [34, 34, 34],
"frame": [34, 34, 34],
"omnibox_background": [34, 34, 34],

Maybe some of these could be added to the theme?

Here is the mentioned manifest.json:

{
    "manifest_version": 2,
    "name": "Old Brave Dark Theme",
    "version": "1.0.0",

    "author": "James Martindale",
    "description": "Brave's old dark theme, ported to Chrome and Chromium-based browsers",
    "homepage_url": "https://github.com/jkmartindale/brave-dark-chromium",
    "icons": {
        "128": "icon.png"
    },

    "theme": {
        "colors": {
            "background_tab": [34, 34, 34],
            "background_tab_inactive": [78, 78, 78],
            "background_tab_incognito": [27, 14, 44],
            "background_tab_incognito_inactive": [50, 38, 65],
            "bookmark_text": [255, 255, 255],
            "frame": [34, 34, 34],
            "frame_inactive": [78, 78, 78],
            "frame_incognito": [27, 14, 44],
            "frame_incognito_inactive": [50, 38, 65],
            "ntp_background": [59, 59, 59],
            "omnibox_background": [34, 34, 34],
            "omnibox_text": [255, 255, 255],
            "tab_background_text": [255, 255, 255],
            "tab_text": [243, 243, 243],
            "toolbar": [57, 57, 57],
            "toolbar_button_icon": [237, 237, 237]
        },
        "images": {
            "theme_ntp_background": "new_tab_page1440.png"
        },
        "properties": {
            "ntp_background_alignment": "center",
            "ntp_background_repeat": "no-repeat",
            "ntp_logo_alternate": 1
        }
    }
}

lassekongo83 commented 1 year ago

Using gtk inspector and adding a wildcard: window.background.chromium * { background: pink; } doesn't do anything to the button. So it looks like it can't be styled.

SamuelBorn commented 1 year ago

Okay. That's a bummer. Then I am out of ideas. You may close this if you want to, but if you want to also leave it open. Maybe some other guy has an idea.

diegopvlk commented 1 year ago

The color changes accordingly to the tab color. Light text: dark button; Dark text: light button. You can make the toolbar/tab active darker so it doesn't look too out of place, add to .config/gtk-3.0/gtk.css:

window.background.chromium {
  background-color: @view_bg_color;
}

for the border bellow toolbar:

window.background.chromium button {
  border-color: darker(@view_bg_color);
}

SamuelBorn commented 1 year ago

I can reproduce this (only the non-flatpak version). Still looks kinda out of place though.

SamuelBorn commented 1 year ago

One of the last update fixed the issue as you can see. Ypu can mark the issue as fixed.

lassekongo83 / adw-gtk3