Support light theme

[mvhirsch]

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.

[lunakurame]

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.

[lunakurame]

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.

[ghost]

Great work, thanks. I've noticed a few issues:

• all favicons are greyscale (I'm assuming it's intentional on the dark theme)
• tab titles don't seem to scale: the text is pretty small on a high res screen, example
• likewise, backward/forward doesn't seem to scale as it should, example
• there's a strange bit of whitespace at the end of the tab bar, example -> this turns out to be there on the default theme, too, no idea why

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.

[lunakurame]

1. 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.

2. 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.

3. 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?

4. 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).

5. 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.

[ghost]

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.

[Gert-dev]

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.

[lunakurame]

@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.

[lunakurame]

Okay so let me review the points above.

1. Fixed.
2. Fixed, .9em looks like the rest of GTK apps for me, it might be 1em for you, because it's a different font, so it scales differently, you can try using Cantarell for Firefox' tabs instead but the last time i checked it didn't work well. Also fractional scaling works fine since GNOME 3.22 iirc, but only on Wayland, which doesn't work with my setup, so I don't know if it's a good solution for you.
3. I can't reproduce it, but I've seen it on another user's screenshots, so I'll create a separate issue for this one.
4. Fixed.
5. We've got a workaround for the issue that was blocking me (#14), so I can finally add a light version of Firefox' internal pages when I've got some free time.

[lunakurame]

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.

[lunakurame]

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).