Skip to content

Instantly share code, notes, and snippets.

@eilx
Last active November 19, 2023 09:53
Show Gist options
  • Save eilx/2e1346472598ddac5e2ec20f40695dfe to your computer and use it in GitHub Desktop.
Save eilx/2e1346472598ddac5e2ec20f40695dfe to your computer and use it in GitHub Desktop.
firefox-gnome-theme: adaptive tab bar color support w/ alternative container tab display
/*
PROBLEMS
1 - URL text's 'https://www.' and such appear as a darker shade of the main color.
I don't know how to change the shade of those parts to how it would be on a light theme,
so on a 'light' background the URL is currently just all black :(
2 - There's no way to view a tab's container without being on that tab. I'm using
simple tab groups for my containers which 'fixes' this, but that's not really a solution :/
*/
:root {
--gnome-toolbar-color: var(--lwt-text-color);
/* I think it makes sense with the adaptive colors to 'blend'
* in by hiding these borders? Otherwise the alternative works decently
* enough but kinda falls apart with high color e.g. npmjs.com
*/
/* --gnome-toolbar-border-color: rgb(125 125 125 / .3); */
--gnome-toolbar-border-color: transparent;
--gnome-toolbar-background: var(--lwt-accent-color-inactive);
--gnome-toolbar-icon-fill: var(--toolbarbutton-icon-fill);
--gnome-inactive-toolbar-icon-fill: var(--toolbarbutton-icon-fill);
--gnome-menu-background: var(--gnome-toolbar-background);
--gnome-menu-button-hover-background: var(--gnome-button-hover-background);
--gnome-headerbar-background: var(--lwt-accent-color);
--gnome-button-hover-background: var(--toolbarbutton-hover-background);
--gnome-button-active-background: var(--toolbarbutton-active-background);
--gnome-button-flat-hover-background: var(--gnome-button-hover-background);
--gnome-button-flat-active-background: var(--gnome-button-active-background);
/* See problem 1 */
--gnome-entry-color: var(--lwt-text-color);
--gnome-inactive-entry-color: var(--gnome-entry-color);
--gnome-tabbar-tab-hover-background: var(--toolbarbutton-hover-background);
--gnome-tabbar-tab-active-background: var(--toolbarbutton-active-background);
/* Maybe there's a better option for this? */
--gnome-tabbar-tab-active-hover-background: var(--toolbarbutton-hover-background);
--gnome-tabbar-fade-background: var(--lwt-accent-color);
}
/* Gives the tabbar a transition matching the headerbar */
#TabsToolbar {
transition: var(--ext-theme-background-transition);
}
/* == Container tab text readability issues (see issue #464) ==
* Naturally this issue is 1000% worse with coloured backgrounds,
* Can't think of a way to keep the nice-looking tab text color and have any contrast
* so decided instead to make the url bar container identifier way more visible as a compromise
*/
.tab-text {
color: var(--lwt-text-color);
transition: color 100ms;
}
#userContext-icons {
margin: .4em 0;
border-radius: 1em;
padding: 0 .5em;
background-color: var(--identity-tab-color);
}
#userContext-indicator {
fill: var(--lwt-text-color) !important;
}
#userContext-label {
color: var(--lwt-text-color) !important;
filter: contrast(140%);
}
@peterlobster
Copy link

@eilx Great theme. The only thing is that it doesn't work that great in Private Windows. Is there a way to fix that?

Also some of the context menus, are transparent and don't look great.

@Radical4ever
Copy link

@eilx this is awesome!!. I'm thinking if it is possible to make the window buttons (close, min, maximize) change from black or white depending on the headerbar color?

@Khraut
Copy link

Khraut commented Feb 22, 2023

How do I apply this?

@Radical4ever
Copy link

@eilx Great theme. The only thing is that it doesn't work that great in Private Windows. Is there a way to fix that?

Also some of the context menus, are transparent and don't look great.

on the gnome-theme.css file at the bottm of it srry for late response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment