Firefox-gnome-theme-maia

I've been using a modified version (maia green instead of adwaita blue) of this Firefox theme

I was hoping to package it, but I'm not sure how to go about it. Where in the filesystem should the theme files be placed so that they be oma available for all users? I could theoretically use /etc/skel, but that seems a bit problematic (static Firefox profile name). Does anybody know of a good way to do this?

@Ste74 would this be interesting for gnome edition if we get adwaita-maia working?

2 Likes

Look good but no idea where put for all user...

I tried /usr/lib/firefox/defaults/profile, but it doesn't get copied over. Also tried /usr/lib/firefox/browser/defaults/profile, but that doesn't seem to work either. If I don't find a correct setting, then one possibility is copying the settings with a one-shot autostart file, but that seems rather hacky. Also it does not allow for updating the theme with pacman.

I found documentation stating it should be /usr/lib/firefox/browser/defaults/profile, but no dice, it must have changed. The best workaround I can think of is default profile in /etc/skel and a .desktop file that renames the profile to a random name if it matches the default name.

I'll keep looking into it.

@Ste74, I think we could put a symlink chrome directory in the users profile dir. That way we could both keep the theme up to date and not mess with $HOME using pacman.

Are you interested in this option?

@Chrysostomus how can I install it?

why not submit it to https://addons.mozilla.org/en-US/firefox/ as a theme? there's an adapta nokoto maia theme someone already uploaded

2 Likes

I would suggest installing the theme from the Unstable or Testing branch, as this is the latest version (it will work even if you're in Stable). Then backup any existing Firefox profile - or create a new profile and set it as the default one - and run firegnome-enable.sh in a terminal window.

Τους χαιρετισμούς μου!

1 Like

Thank you so much!
Είσαι γίγαντας! :slight_smile:

1 Like
  1. This level of customization is not possible with add-ons anymore.
  2. It is not yet finished
  1. Okay, I was just asking.
  2. Relax, nobody is pressuring you to do anything or having a go at you.

Sorry if my answer came across blunt, I have three kids so I have to write short :slightly_smiling_face:

I think the idea is very nice, but I don't think it is feasible anymore. Add-ons are much more restricted than they used to be when it comes to modifying ui of Firefox

1 Like

Are you aware of this project?

1 Like

@Chrysostomus in case you want to change the look of the build-in pages of Firefox (about:xxxx) which have the default blue colors in various elements, here are some CSS styles that can be applied in the userContent.css file inside the chrome directory.

/* Firefox Pages */

/* For all build-in Firefox pages */
:root {
	--in-content-category-text-selected: #16a085 !important;
	--in-content-category-text-selected-active: #16a085 !important;
	--in-content-category-outline-focus: 1px dotted #16a085 !important;
	--in-content-link-color: #16a085 !important;
	--in-content-link-color-hover: #16a085 !important;
	--in-content-border-active: #16a085 !important;
	--in-content-border-active-shadow: none !important;
	--in-content-border-focus: #16a085 !important;
	--in-content-link-color-active: #16a085 !important;
	--in-content-item-selected: #16a085 !important;
	--in-content-item-hover: rgba(22, 160, 133, 0.2) !important;
	--in-content-primary-button-background: #248a76 !important;
	--in-content-primary-button-background-hover: #1e7664 !important;
	--in-content-primary-button-background-active: #248a76 !important;
	--in-content-border-highlight: #16a085 !important;
}
/* about:preferences */
/* about:preferences#privacy */
.content-blocking-category.selected {
	border: 1px solid #16a085 !important;
	background-color: rgba(22, 160, 133, 0.2) !important;
}
.content-blocking-warning {
	background-color: rgba(46, 179, 152, 0.4) !important;
}
.content-blocking-warning .text-link {
	color: #09251f !important;
}
.reload-tabs-button {
	background-color: #0e3930 !important;
}
.reload-tabs-button:not([disabled="true"]):hover {
	background-color: rgba(14, 57, 48, 0.8) !important;
}
.spotlight {
	background-color: transparent !important;
	outline: none !important;
}
/* about:preferences#search */
#engineList > treechildren::-moz-tree-image(engineShown, checked),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
	fill: #16a085 !important;
}
#searchbarGroup .searchBarShownImage {
	list-style-image: url("about-search-green-light.svg") !important;
	/* If the image is in the icons directory */
	/* list-style-image: url("firefox-gnome-theme/theme/icons/about-search-green-light.svg") !important; */
}
@media (prefers-color-scheme: dark) {
	#searchbarGroup .searchBarShownImage {
		list-style-image: url("about-search-green-dark.svg") !important;
		/* If the image is in the icons directory */
		/* list-style-image: url("firefox-gnome-theme/theme/icons/about-search-green-dark.svg") !important; */
	}
}
/* about:protections */
@-moz-document url(about:protections) {
	#sign-up-for-monitor-link {
		background-color: var(--in-content-primary-button-background) !important;
	}
	#sign-up-for-monitor-link:hover {
		background-color: var(--in-content-primary-button-background-hover) !important;
	}
	#sign-up-for-monitor-link:focus {
		box-shadow: 0 0 0 2px #16a085 !important;
	}
	#social-link, #cookie-link, #fingerprinter-link, #cryptominer-link, #lockwise-inline-link {
		color: #16a085 !important;
	}
}
/* about:support */
@-moz-document url(about:support), url(about:support#remote-processes) {
	#contents table th {
		background-color: #107360 !important;
	}
}
/* about:profiles */
@-moz-document url(about:profiles) {
	#profiles table th {
		background-color: #107360 !important;
	}
}
/* about:buildconfig */
@-moz-document url(about:buildconfig) {
	a {
		color: #16a085 !important;
	}
}
/* about:performance */
@-moz-document url(about:performance) {
	.energy-impact {
		--bar-width: 0;
		background: linear-gradient(to right, #26947d calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%)) !important;;
	}
}
/* about:plugins */
@-moz-document url(about:plugins) {
	a {
		color: #248a76 !important;
	}
	.contenttable th {
		background-color: #16a085 !important;
	}
}
/* about:serviceworkers */
@-moz-document url(about:serviceworkers) {
	a {
		color: #248a76 !important;
	}
}
/* about:newtab, about:home */
@-moz-document url(about:newtab), url(about:home) {
	body, #newtab-customize-overlay {
		--newtab-text-secondary-color: #16a085 !important;
		--newtab-textbox-border: #16a085 !important;
		--newtab-textbox-focus-boxshadow: 0 0 0 1px #16a085, 0 0 0 4px rgba(22, 160, 133, 0.4) !important;
		--newtab-button-primary-color: #16a085 !important;
		--newtab-link-primary-color: #16a085 !important;
		--newtab-textbox-focus-color: #16a085 !important;
	}
	.top-site-outer .search-topsite {
		background-color: #16a085 !important;
	}
}

The CSS code is basically replacing the blue colors in the mentioned pages, without changing the overall background color of the dark/light variant. I mainly used the #16a085 green of your theme, but also some other shades of green. You can change all that, or even use only parts of the above CSS code.

You'll notice that there are two references to .svg images in the CSS code. These images can be used in the about:preferences#search build-in page replacing the default ones (with blue color) of the Add search bar in toolbar option (dark/light variant). The colors of the two default images can't be changed using the fill property, so I edited them using a text editor. The images can be downloaded from here (MEGA). You can place them anywhere you want in the chrome directory, as long as they are called correctly in the userContent.css file.

Hope that helps!

1 Like

Thank you! This is great, I'll test it when I can :slightly_smiling_face:

1 Like

Forum kindly sponsored by