[Feature Request?] Custom colours (possibly using wal/pywal or xresources?)

[GorrillaRibs]

I just think it'd be cool, unsure how paxmod implements colors. I'm also on arch so I can test if need be! Thanks for all your work!

[numirias]

Thanks for your feedback! (I'm also on Arch btw.)

Are you thinking about custom colors for the UI or for different sites?

The problem regarding getting colors somewhere from system files is that this is not possible within the WebExtension standard. So implementing that would require me to interface yet another non-official API which I'm trying to avoid. But some manual color settings would definitely be possible. Just not sure what you had in mind.

[GorrillaRibs]

I had in mind custom colours for the UI (the different site colours are already awesome!) but I think it might be possible to reference these colours (at least, I have a custom CSS file that can, attached to this comment) which uses a file generated by pywal . It seems the dev there is fairly active, so if the extension can't refenence that (I'm not too familiar with what the webextension API can access and what it can't) it might be possible to have wal output a specific file that it can acces?

Thanks again!

@import url("file:///home/gorrillaribs/.cache/wal/colors.css");

/* Global Vars */
[uidensity="compact"]:root {
  --tabs-border: transparent !important;
  --tab-line-color: transparent !important;
  --toolbar-non-lwt-bgimage: !important;
}

/* Tab Bar */
#tabbrowser-tabs {
  color: var(--color4) !important;
  background-color: var(--color0);
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border: none !important;
}

.tab-background[selected="true"] {
  border: 0px !important;
  background-color: var(--color1) !important;
}

.tab-content[selected="true"] {
  color: var(--color0) !important;
}

/* Nav Bar */
#navigator-toolbox {
  display: contents !important;
}

#nav-bar {
  background-color: var(--color0) !important;
}

/* URL Bar */
.identity-box,
#urlbar {
  border: none !important;
  color: var(--color5) !important;
  background-color: var(--color0) !important;
}

/* Menu Bar */
#toolbar-menubar {
  padding: 0px 0px !important;
}

menubar, toolbar[type="menubar"] {
  -moz-appearance: initial !important;
  background-color: var(--color1) !important;
}

menubar > menu {
  color: var(--color0) !important;
}

/* Bookmarks Bar */
#PersonalToolbar {
  color: var(--color5) !important;
  background-color: var(--color0) !important;
}

/* Hidden Elements */
statuspanel[type="overLink"],
#reload-button,
#stop-reload-button,
.tab-close-button,
.tabs-newtab-button {
  display: none !important;
}

[numirias]

Ah, I see. That should be possible. I'll look into that.

[GorrillaRibs]

Thanks a ton!

[numirias]

I made a new release.

You can now set custom colors in the settings. Additionally, you can specify the path to a local CSS file (e.g. to the CSS generated by pywal). Have a look at the readme section on Custom CSS for details.

Does this custom CSS integration work well for you?

[GorrillaRibs]

It works wonderfully! Firefox meshes with the rest of my programs now, thanks a ton!

[numirias]

Great! If you like it, tell a friend - it's more fun to develop when people are actually using your stuff. :-)