Closed mvhirsch closed 6 years ago
I'm glad you like it! :D It shouldn't be hard to make a light version of this theme, the only thing that's different is really just the colors. I think I'll extract all the colors to CSS variables, so it's easy to replace them with just a single rule. I'll let you know when I do it.
Light theme is now supported, but needs to be enabled manually (because in CSS there is no way to detect which GTK variant are you using), see README. BTW, I found a few bugs with the URL bar and fixed them, so both variants look better now.
Great work, thanks. I've noticed a few issues:
Also, it would be great if you could make a userContent.css with the soft grey colours of the light theme (like in Epiphany), as the default white stands out. Again, thanks for your work, it's like the GNOME theme never left.
Actually it's intentional for both dark and light variant. I find colorful icons annoying on the dark variant, so I use a set of filters to get rid of the colors and adjust brightness / contrast to make them look kinda like symbolic icons:
:root {
--gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%);
}
It's not perfect, because every website has a totally different icon, while I can only use the same filters for all of them, but it looks nice in most cases. Example:
(GitHub, Google Translate, Discord, MyAnimeList, YouTube, Wikipedia — that one is pretty bad)
Then for the light theme I used the same set of filters + invert, so they are visible on bright background. But yeah, I guess most people using the light variant prefer normal icons, so I will add an option to disable that feature.
I guess you have set up a different font size for your interface (GNOME Tweak Tool → Fonts → Interface), I see it scales all UI text except the tab labels and looks like it's my fault, because I used a wrong unit (px instead of em). I'll fix it, thanks for reporting.
I checked it on multiple machines and I can't reproduce the backward / forward button scaling issue. Are you using Firefox 57 or some pre-release version like 58 or 59? And what are you using to scale the UI, just a bigger font size in GNOME Tweak Tool or maybe some fancy config?
I know, I noticed that bit of white space too and it seems to be really stubborn to all my attempts to style it. I think Mozilla devs added it so when you have lots of tabs (enough to make the tab bar start scrolling) and you are closing multiple tabs, the moment the scroll buttons disappear, this weird space appears, so it's easier to close the next tab, because your cursor still points at its close button. When you move your mouse, it disappears. Also I noticed it's sometimes buggy and shows up even without scrolling tabs, but I don't think I can fix it since it's probably controlled by some JavaScript code. I think I finally found a way to apply styles to it, so I will at least make it look like the rest of the tab bar (change the background color and bottom border).
About the userContent.css
file for the white variant: I could make one. Do you know some internal pages for Epiphany? It doesn't seem to have the about:preferences
page, nor about:config
, all I found so far is about:overview
, about:blank
and about:
. Also I have no idea why, but CSS' @import
doesn't seem to work for HTML pages. It works just fine for XUL pages, but all those internal pages are a mess, half of them are XUL, some are XHTML1 and recently they started adding HTML5. It's not required to use @import
but well, I'll be forced to duplicate lots of code if it doesn't work (just for the userContent
file, userChrome
is safe because the UI is fully XUL). So if someone who's reading this, knows how to make it work, that would be helpful.
Thanks for reporting all those issues, I'll fix what I can soon. I'm glad my theme actually turned out to be useful for others too.
I'm using Firefox 57, and using 1.2x font size to scale the UI until fractional scaling is available. No other configurations as far as I know. I guess the issue is caused by Firefox itself, because on the default theme the 'Previous' button is also larger.
No idea about any internal Epiphany pages, I was actually only thinking of about:overview and how about:newtab in Firefox could use the same background and text colour.
I just checked the changes and they seem to work fine, although I think the tab titles should be 1em. I did a quick comparison and that seems to be the size they are in other GNOME applications.
Something minor I noticed is that on the light theme, the settings pages are still dark and the default page background color for some HTML elements still appears to be grey-ish, like with the dark theme. Not sure if that's a TODO, but wanted to mention it anyways.
@Gert-dev
That's because the userContent.css
file makes all Firefox' internal pages dark and there isn't a version for the light variant yet. I was hoping to make it similar to the userChrome.css
file, where you can toggle between the light and dark theme, but looks like I can't do it because of a bug with Firefox' Electrolysis engine: https://bugzilla.mozilla.org/show_bug.cgi?id=1416184. For now you can just remove the userContent.css
file and it shouldn't be dark anymore. I will add a light version of that file soon-ish.
Okay so let me review the points above.
About point 2: actually Cantarell works fine now, I don't know why it didn't work before. So since the font is the same, it should scale properly for you.
A light version of those styles from userContent.css
is now available, you need to enable it in userContent.css
. Also for Firefox 57, read the warning at the top of that file, since FF 57 is kinda buggy (more info in issue #14).
Hi! Great job you've done so far! Many thanks, I'll try this one out later, so please keep on coding.
One question: would it be possible to support a light (like adwaita) variant? I could even help in modifying your theme to support both (if you wish).
greets.