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

[Gusted]

Okay I will try my best to get this first at least working

[Gusted]

Day 4: All linux distros gives me black screens out of the box can't get a error log on it or a logical reason I'm getting tommorow a External HDD My SSD isn't the best with other formats. Else I gonna try port this to windows.

[GideonWolfe]

Hmm strange that you're getting black screens! Have you tried running Linux in a VM and testing that way?
As long as pywal can get the colors and pass them to Pywalfox correctly, it should be the same on Windows as far as I know...

[Gusted]

Yeah VM are not for this laptop I'm running Pentium N4200 with 4GB ram
Yeah For now I'm gonna try it for Windows

[Gusted]

Pywal and Pywalfox are both made for linux operating system

[Frewacom]

Pywalfox does not really support Windows as of now, though it should not be to hard to fix. It is mainly the path at which the pywal colors are stored and the setup script that needs to be updated.

[Gusted]

Welp Don't worry I'm gonna look into it and port it to Windows. Linux on my laptop is a dead strange end

[Gusted]

Okay just got it working

Now i'm running into a undefined error....

[Gusted]

The chache dir has already been replaced with the right one

[Frewacom]

I can take a look at it tomorrow, since I have Windows installed on a separate SSD. You could take a look at the setup guide for native messaging hosts on Windows (Mozilla docs). If I remember correctly, you need to create a .bat file that launches the daemon.

[Gusted]

Sure thing Will make also tommrow a fork of both projects and update them with windows files

Found the issue that's gonna be a other place for cache..

[Gusted]

https://github.com/Gusted/Pywalfox-Windows
For now I'm getting it at least working without bugs for Windows
Than a port for Pywal with directory's and windows function
Than a Integration with Darkreader.

[Frewacom]

Probably should have mentioned this yesterday, but I have shifted development of the daemon to another repository to separate the native messaging host and addon. Perhaps you could make the changes in the new one instead?

As for the Windows support, I suppose we could check the current OS when starting the daemon and set the correct path/settings based on that, as well as including the .bat script that you created.

Also, if you decide to use the the new repositiory, it is not compatible with version 1.5.3 of the addon, so you will have to use the updated version in the 1.5.4 branch

[Gusted]

Okay Will update it

[Gusted]

Made a https://trello.com/b/Jx476EDW/pywalfox-windows-porting
To hold track of the whole porting becasue It's quite big

[Silovy163]

@alexhulbert the template doesn't exist anymore

[kyabetsuki]

@alexhulbert I cry

[alexhulbert]

@Silovy163 @kyabetsuki I pulled in the latest darkreader changes to my fork along with some fixes and I'm going to test them this weekend and make a draft PR and new compiled extension.

[Silovy163]

@alexhulbert thanks man

[niksingh710]

@alexhulbert you are going to create the pr for dark reader or it will remain a forked version?

[alexhulbert]

Hey, sorry for the delay. I've been traveling and I also just started a new job, so things have been pretty busy. I got it working tho! Gonna put up a PR and some instructions tomorrow.

To answer your question @niksingh710, my goal is to get these changes merged as soon as possible, but I suspect that since this PR is not really within the scope of what DarkReader is designed to do and my changes are pretty rough, there will likely need to be several changes to the PR. I'll open it as a draft tomorrow in order to ask the maintainer for feedback on how to implement pywal support in a way that is consistent with this repo's coding guidelines and quality standards. That being said, the PR is not really that large, so I suspect it won't be that hard to get it merged.

[alexhulbert]

Instructions are up with new darkreader addon file, sorry for the wait:

https://github.com/alexhulbert/SeaGlass?tab=readme-ov-file#firefox-pywal-customization

PR is coming soon

[niksingh710]

@alexhulbert thanks for sharing the resource. will test As soon as i get free time
I just wanted to ask does this uses the color from pywal-fox or from somewhere else?

And In your firefox section it is more leaned towards your blur fox config i use shyfox for my firefox config can you please provide instruction independent of firefox custom theme setup?

[niksingh710]

@alexhulbert Unable to add extension getting unsigned addon error.

[alexhulbert]

@alexhulbert Unable to add extension getting unsigned addon error.

thanks for the heads up, i probably uploaded the wrong file. fixing now

[alexhulbert]

Also, I'll adjust the readme so the user chrome stuff is separate from the color scheme stuff. right now, im not using pywalfox since the colors in pywalfox don't match up exactly.

[alexhulbert]

@niksingh710 updated the xpi in the repo, try now

[niksingh710]

@niksingh710 updated the xpi in the repo, try now

the extension is installed successfully but on websites like github and archwiki unable to see color change in the background.

steps i followed is 1,2,9,10,11.
didn't used other steps as ig they were about to change color specific to userchrome. (do i need to perform changes in them too?)

[alexhulbert]

@niksingh710 updated the xpi in the repo, try now

the extension is installed successfully but on websites like github and archwiki unable to see color change in the background.

steps i followed is 1,2,9,10,11. didn't used other steps as ig they were about to change color specific to userchrome. (do i need to perform changes in them too?)

Maybe you need to chmod +x /opt/darkreader/index.js? If that doesn't work, Try running /opt/darkreader/index.js from the command line manually.

[niksingh710]

@alexhulbert yep that worked. I am using pywal-16 as pywal is now archived.
and there is a current going issue eylles/pywal16#31 (comment) that is giving webpages a darker color so unable to differentiate that much.

but i got output from index.js

v{"type":"setTheme","data":{"darkSchemeBackgroundColor":"#12161214","darkSchemeTextColor":"#888a8814"},"isNative":true}

[eylles]

well, i'll need to catch up to this thread, but if you want we can work on something to better integrate with pywal instead of having to hoop through pywalfox and depend on using firefox.

[alexhulbert]

I'm not pulling from pywalfox actually, I'm just watching the ~/.cache/wal/colors file and pulling from that via a WebExtension native messaging host. My fork should work on Chrome too.

[eylles]

I'm not pulling from pywalfox actually, I'm just watching the ~/.cache/wal/colors file and pulling from that via a WebExtension native messaging host. My fork should work on Chrome too.

would it not be better to use ~/.cache/wal/colors.json since that is already formatted as json data?

[eylles]

speaking of matching colors with pywalfox, on the script build-gradience.py i had to extend the shades of pywalfox since for colorizing gtk with gradience i needed an extra shade:
https://github.com/eylles/pywal16-libadwaita/blob/2386608c7141d76354c6002a548ad0bfe2f5ef32/scripts/build-gradience.py#L110-L113

as for the functions for generating the extra colors i have not checked how node.js nor the firefox js engine rounds numbers by default so cannot guarantee my functions will round to the same exact values.
https://github.com/eylles/pywal16-libadwaita/blob/2386608c7141d76354c6002a548ad0bfe2f5ef32/scripts/build-gradience.py#L14-L41

[alexhulbert]

I'm not pulling from pywalfox actually, I'm just watching the ~/.cache/wal/colors file and pulling from that via a WebExtension native messaging host. My fork should work on Chrome too.

would it not be better to use ~/.cache/wal/colors.json since that is already formatted as json data?

Eventually I'm just gonna rewrite it in C since its so straightforward. Parsing colors would be way easier than parsing json.

[eylles]

I'm not pulling from pywalfox actually, I'm just watching the ~/.cache/wal/colors file and pulling from that via a WebExtension native messaging host. My fork should work on Chrome too.

would it not be better to use ~/.cache/wal/colors.json since that is already formatted as json data?

Eventually I'm just gonna rewrite it in C since its so straightforward. Parsing colors would be way easier than parsing json.

Is there an advantage to rewrite in c tho?

[alexhulbert]

Yeah, I'm not like super into C or anything, I just think people shouldn't have to install nodejs to use the native extension, and updating node shouldn't break things in the future. It's more of a professionality thing if/when this gets upstreamed into darkreader. And I figure C is like the least common denominator. Everyone can compile a 40 line, single file C program on their machine.

[eylles]

eh fair, just thought something in python may be faster to throw together and have good enough integration all around.

[GideonWolfe]

Wow just revisiting this issue after 4 years because I'm revisiting automating DarkReader again 😅

Now I'm not using pywal, I'm building a setup from the ground up completely using NixOS and Stylix, which is a theming engine much like pywal, but is more embedded into the NixOS install, and can theme things like bootloaders, ttys, etc.

Using nix + stylix, I can write arbitrary files to my home directory that contain color variables such as ${base00} that will be converted to color codes at buildtime and deployed to the correct path.

My question now is, has this pywal issue spurred the development of an interface for DarkReader to take local files automatically? I was considering generating the darkreader config file with the colors as a template, but I would still have to import it manually and I don't think it would auto-refresh

Is there a workable solution?

[eylles]

hmm the templates from styling seem interesting, could probably make some additions to pywal16 to add the base16 names onto the color dict, work with mustache templates if pystache is installed.

what would need some work is rebuild all the hm.nix and other .nix modules from stylix to something that can be used either in pywal or an external program that can take colorschemes on multiple formats, because right now i got a not yet published (still very experimental) program with modules (is really a lot of shell and python with some sed and awk here and there) to do what stylix does tho i overall got support for less stuff built in tho i support stuff like steam and flameshot but that is more a result of developing this program for myself since rather recently.

[GideonWolfe]

Theoretically you could make a "bridge" between stylix and pywal by having stylix generate a set of schemes in the pywal format, just using stylix generated colors.

The real power is using home-manager + stylix, because that means I can basically have the functionality of pywal templates, but with all the power and logic of the nix language to make it more customizeable, and home-manager handles putting all the files in the right place so you don't have to make a ton of symlinks out of ~/.cache/wal/

[eylles]

well, i'm not even making symlinks currently but "building" the final files in place by throwing the template directly inside the scripts.

i need like 3 days to get the thing i'm working on to the level i can push it to a repo but first i need to debug some stuff on pywal16 and device a way to have a proper or at least good enough fix.

[alexhulbert]

hmm the templates from styling seem interesting, could probably make some additions to pywal16 to add the base16 names onto the color dict, work with mustache templates if pystache is installed.

what would need some work is rebuild all the hm.nix and other .nix modules from stylix to something that can be used either in pywal or an external program that can take colorschemes on multiple formats, because right now i got a not yet published (still very experimental) program with modules (is really a lot of shell and python with some sed and awk here and there) to do what stylix does tho i overall got support for less stuff built in tho i support stuff like steam and flameshot but that is more a result of developing this program for myself since rather recently.

You could totally do this with my changes. you could modify the index.js file and template it out so it just sends a fixed value to darkreader when it's called

[GideonWolfe]

I love that there are still people working on this and care about this random thing as much as me 😀

I took a stab at a hacky integration like I mentioned before, where I simply add the following snippet to my home-manager config, which will generate a config file for darkreader using the stylix colors

xdg = {
    configFile = {

      # Creates a config for DarkReader
      # TODO, need to make this auto update?
      darkreader = {
        enable = true;
	#onChange = manually tell darkreader to refresh somehow?
	target = "darkreader/config.json";
	text = ''

	{
	    "schemeVersion": 2,
	    "enabled": true,
	    "fetchNews": true,
	    "theme": {
		"mode": 1,
		"brightness": 100,
		"contrast": 100,
		"grayscale": 0,
		"sepia": 0,
		"useFont": false,
		"fontFamily": "Open Sans",
		"textStroke": 0,
		"engine": "dynamicTheme",
		"stylesheet": "",
		"darkSchemeBackgroundColor": "${base00}",
		"darkSchemeTextColor": "${base05}",
		"lightSchemeBackgroundColor": "${base05}",
		"lightSchemeTextColor": "${base00}",
		"scrollbarColor": "auto",
		"selectionColor": "auto",
		"styleSystemControls": false,
		"lightColorScheme": "Default",
		"darkColorScheme": "Default",
		"immediateModify": false
	    },
	    "presets": [],
	    "customThemes": [],
	    "enabledByDefault": true,
	    "enabledFor": [],
	    "disabledFor": [],
	    "changeBrowserTheme": false,
	    "syncSettings": false,
	    "syncSitesFixes": true,
	    "automation": {
		"enabled": false,
		"mode": "",
		"behavior": "OnOff"
	    },
	    "time": {
		"activation": "18:00",
		"deactivation": "9:00"
	    },
	    "location": {
		"latitude": null,
		"longitude": null
	    },
	    "previewNewDesign": true,
	    "enableForPDF": true,
	    "enableForProtectedPages": true,
	    "enableContextMenus": false,
	    "detectDarkTheme": false,
	    "displayedNews": [
		"thanks-2023"
	    ]
	}

	'';
      };
    };
  };

Obviously there's a bunch of information NOT relevant to the colorscheme captured here, but it does import successfully if I point darkreader to ~/.config/darkreader/config.json.

This is all using catpuccin mohca btw :) stylix can do image palette generation or hardcoded schemes just like pywal

I'm not sure if it works if I regenerate the colors though, does darkreader look at the config file every time it starts up or does it cache the config somewhere locally?

[eylles]

@GideonWolfe i like this method of writing a config, tho i still have to 'manually' load said config from within darkreader...

forgot to add the image.

and of course the pywal template, mind you since it uses the .lighten(%) operation this template is only supported by pywal16

{{
    "schemeVersion": 2,
    "enabled": true,
    "fetchNews": true,
    "theme": {{
        "mode": 1,
        "brightness": 100,
        "contrast": 100,
        "grayscale": 0,
        "sepia": 0,
        "useFont": false,
        "fontFamily": "Open Sans",
        "textStroke": 0,
        "engine": "dynamicTheme",
        "stylesheet": "",
        "darkSchemeBackgroundColor": "{color0}",
        "darkSchemeTextColor": "{color15}",
        "lightSchemeBackgroundColor": "#{color0.lighten(15%)}",
        "lightSchemeTextColor": "{color15}",
        "scrollbarColor": "auto",
        "selectionColor": "auto",
        "styleSystemControls": false,
        "lightColorScheme": "Default",
        "darkColorScheme": "Default",
        "immediateModify": false
    }},
    "presets": [],
    "customThemes": [],
    "enabledByDefault": true,
    "enabledFor": [],
    "disabledFor": [],
    "changeBrowserTheme": false,
    "syncSettings": true,
    "syncSitesFixes": true,
    "automation": {{
      "enabled": false,
      "mode": "",
      "behavior": "OnOff"
    }},
    "time": {{
      "activation": "18:00",
      "deactivation": "9:00"
    }},
    "location": {{
      "latitude": null,
      "longitude": null
    }},
    "previewNewDesign": true,
    "enableForPDF": true,
    "enableForProtectedPages": true,
    "enableContextMenus": false,
    "detectDarkTheme": false,
    "displayedNews": [
  "thanks-2023"
    ]
}}