search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.84k stars 180 forks source link

[Color customizer] Firefox Color - color.firefox.com #128

Closed Aris-t2 closed 4 years ago

Aris-t2 commented 6 years ago

Mozilla released a new test pilot WebExtension to customize toolbar-, icon- and tab colors (similar to what Vivaldi browser offers).

https://color.firefox.com/

fx_color

Acid-Crash commented 6 years ago

Hmm, interesting. So far I've tried to pull out from it a separate background picture for the main window. I wonder is it possible to apply it to Devtools window (when it is in the separate window)

`

main-window {background-image: url("data:image/png;base64,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")}

`

Crystal-RainSlide commented 6 years ago

I remember that there is a way to open devtools as a tab in menu - Web developer.

MarkRH commented 5 years ago

I was playing around with this.. something is keeping the tabs always black. Here's with no chrome folder: image

Here's with my chrome loading: image

I'm on version 1.9.7 with Firefox 62.0.3. I'll grab your latest code to see what that's like.

MarkRH commented 5 years ago

Same with 2.0.9. (With both Classic and Aero Themes). It's the stuff in /css/tabs/classic_squared_tabs.css doing it. I may try to make a version of it with just sizing and position information just to see what happens.

Aris-t2 commented 5 years ago

If you are using the projects "classic squared tabs" they apply own styles for non-active and hovered tabs when using lw-themes. Not sure why "black" colors are set, instead of slightly transparent ones with "Firefox Color", but this does not happen when using lw-themes from AMO.

MarkRH commented 5 years ago

I'm just using the "default" theme.

Aris-t2 commented 5 years ago

Alright, current lw-theme changes will require me updating the code for some new lw-theme cases. I'll try to solve the black tab problem on next update.

Acid-Crash commented 5 years ago

Hi @Aris-t2 Not sure if here is a correct place to post a bug regarding https://color.firefox.com. It looks like there is some sort of bug with ./css/locationbar/identitybox_colors.css I've made a replica of default theme (I believe it should use Light-ish theme rules). But the identitybox seems to be using Dark theme. color Maybe you can take look at this?

https://color.firefox.com/?theme=XQAAAAIUAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKliFvf1xMAF6DfJ4nQH-D0M2fQutjn0evUdMa-jvD7STK1avcrwIJFEyRXeOY9Ct3YPHfp5mwXCTwkXFDv9s9lxi2BLQXI80Xa_Hhyv3AoXYO-2BwJfUkTiMrG7XeCfCr-1_gu7nzpJc_2Ov-bvKcXTCU-6S-JNQ5fsWRxDSdVWKo1peiBc2bpmYSF2SaErODuLm9X24cAceMkwJf8z_BFI1sP_j-hKA

Aris-t2 commented 5 years ago

There is a conflict with default dark (lw-)theme and "themes" created with Firefox color. I will fix this glitch on next update.

MarkRH commented 5 years ago

Well, not as black now with 2.1.0. Will verify in a clean profile what it looks like there. image

Aris-t2 commented 5 years ago

The problem was the additional code I added in the past for default Dark theme. This code was wrongly applied to some themes created with "Firefox color" too. It is possible, this issue happens occurs again, if Mozilla decides to rename theme variables.

gucciaddict commented 5 years ago

I'm having an issue that spontatiously happened 4 days ago and I can't figure out how to switch the color back. Firefox calls it the "background color", but from what I can tell its called the "titlebar color". It always used to be grey, and it randomly switched to dark blue. I redownloaded the new CustomCSSforFx thinking it was just an issue with a Firefox update, but it still is the dark blue color. Why do you think it randomly switched and how do I get it back to grey? Thank you for your help. Dan The top picture is the new toolbar color and the bottom picture is the old toolbar color. newvsold titlebar

Aris-t2 commented 5 years ago

You most likely used the "Light" (inbuilt) grey theme and switched to "default" theme now.

FFnewbie commented 4 years ago

Anybody knows, how to set this bright area - MARKED WITH RED RECTANGLE - into beautiful grey, like the rest in this below pic? This is when only one TAB is open and to the right of this one tab there is an eye-straining ugly bright white strip, I want to recolor it to grey as the rest of the backgrounds. I tried to edit a Light-grey theme downloaded from addons, but FF deletes the modified XPI: I just filled the background PNG with full gray and re-zipped. Unfortunately FF deletes that on start.. Firefox_TAB_STRIP

Aris-t2 commented 4 years ago

@FFnewbie

The answer how to use the color variables was in your initial post/thread, but you can also just add this to my_userChrome.css or to the bottom of userChrome.css:

#main-window #TabsToolbar:-moz-lwtheme,
#main-window #TabsToolbar:not(:-moz-lwtheme) {
  background: red !important;
}
Aris-t2 commented 4 years ago

Firefox Color got a link on main page. This thread can be closed now.