[Idea] .Xresources/Pywal colors

[GideonWolfe]

Recently a plugin called Pywalfox was released, which takes the colors generated by the program pywal and uses them to theme various UI elements in Firefox.

The main problems this solves is using a custom script to make firefox aware of the system colors, and changing them without the need for a restart.

My idea is to take these colors and apply them to the whole web, like darkreader applies a universal dark mode. In theory it would look a bit like this:

This is a vim plugin I customized to preview markdown using the system colors.

I have been looking at the codebase of both firefox plugins, and am unsure where to begin working on this. Would it be feasible to simply substitute darkreaders universal gray and white colors for the pywal colors?

Pywalfox already provides an interface to select accent, highlights, etc. Would there be any "gotchas" that prevent us from simply hooking up the Pywalfox colors to darkreader?

[Gusted]

If you Fork Darkreader and Make sure to use the same license etc etc. So far I know their will be no Gotchas. I will definitley take a look, try to help hooking. To finally get this into the master branch of darkreader would be pretty epic

[Frewacom]

Hello, author of Pywalfox here.

I am not really familiar with Darkreader and the way you create/apply themes. Would it be possible to use the browser.runtime API?

It allows two extensions to communicate with each other by opening a connection using the extension ID. Darkreader could then query Pywalfox for the colors and create a theme based on the response.

I can try to implement something like this, though I would like to hear your thoughts on it first.

[Gusted]

@alexanderby

[Gusted]

I think it would be a great idea to integrate this and make a new thema besides Dynamic, Static, Filter+, Filter

About the code and stuff you will need to discuss it with alexanderby

[Frewacom]

I have added some code in Pywalfox for handling connections and sending data to other addons.

Whenever the colors of the theme changes, a message will be sent to all external connections. The message currently looks like this:

{ action: 'colors', data: {..} }

When the theme is disabled, the same structure is used, but with no additional data.

{ action: 'disabled' }

Example code for connecting and receiving events:

const port = browser.runtime.connect("pywalfox@frewacom.org");

port.onMessage.addListener((message) => {
  if (message.action == 'colors') {
    console.log(message.data);
    /*
      {
        accentPrimary: "#CD7879"
        accentSecondary: "#C87B84"
        background: "#15100f"
        backgroundLight: "#382a28"
        foreground: "#ffe9ed"
        text: "#ffffff"
      }
    */
  } else if (message.action == 'disabled') {
    console.log('Theme disabled');
  }
});

[Gusted]

Oh wow if we get that kind of data I actually can try to implement this only my biggest worry where to like place a button to enable this in darkreader

[Gusted]

What do you mean with Object like a Node or a CSS selector

[Frewacom]

What do you mean with Object like a Node or a CSS selector

Just a JS object, I copied it from the console.

[Gusted]

Just we just get like some css and we need to apply that to what element?

[Frewacom]

Just we just get like some css and we need to apply that to what element?

What do you mean?

[Gusted]

Okay see I don't understand I like get this data
accentPrimary: "#CD7879"
accentSecondary: "#C87B84"
background: "#15100f"
backgroundLight: "#382a28"
foreground: "#ffe9ed"
text: "#ffffff"

To what do I need to apply this like body div html? Or does the Object give any info about this

[Frewacom]

The data contains just the colors, nothing more. It is up to you to decide how they should be used and where they should be applied.

[Gusted]

Kinda hard tho but I will try to make a POC

[GideonWolfe]

@Gusted I think the idea is to use the logic DarkReader already uses but to use the colors sent by Pywalfox.

Off the top of my head, background and foreground should replace the default dark grey background and light text. That would honestly get us 80% of the way there.

Then we could take a look and see if there are any elements (headings, dividers, etc) we can assign the additional colors to.