[Idea] .Xresources/Pywal colors #2168
Comments
|
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 |
|
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 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. |
|
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 |
|
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("[email protected]");
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');
}
}); |
|
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 |
|
What do you mean with Object like a Node or a CSS selector |
Just a JS object, I copied it from the console. |
|
Just we just get like some css and we need to apply that to what element? |
What do you mean? |
|
Okay see I don't understand I like get this data To what do I need to apply this like body div html? Or does the Object give any info about this |
|
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. |
|
Kinda hard tho but I will try to make a POC |
|
@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, Then we could take a look and see if there are any elements (headings, dividers, etc) we can assign the additional colors to. |
|
Okay I will try my best to get this first at least working |
|
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. |
|
Hmm strange that you're getting black screens! Have you tried running Linux in a VM and testing that way? |
|
Yeah VM are not for this laptop I'm running Pentium N4200 with 4GB ram |
|
Pywal and Pywalfox are both made for linux operating system |
|
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. |
|
Welp Don't worry I'm gonna look into it and port it to Windows. Linux on my laptop is a dead strange end |
|
Okay just got it working |
|
The chache dir has already been replaced with the right one |
|
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.
|
|
Sure thing Will make also tommrow a fork of both projects and update them with windows files |
|
https://github.com/Gusted/Pywalfox-Windows |
|
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 |
|
Okay Will update it |
|
Made a https://trello.com/b/Jx476EDW/pywalfox-windows-porting |
|
@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. |
Maybe you need to |
|
@alexhulbert yep that worked. I am using but i got output from v{"type":"setTheme","data":{"darkSchemeBackgroundColor":"#12161214","darkSchemeTextColor":"#888a8814"},"isNative":true} |
|
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. |
|
I'm not pulling from pywalfox actually, I'm just watching the |
would it not be better to use |
|
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: 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. |
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? |
|
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. |
|
eh fair, just thought something in python may be faster to throw together and have good enough integration all around. |
|
Wow just revisiting this issue after 4 years because I'm revisiting automating DarkReader again 😅 Now I'm not using Using My question now is, has this Is there a workable solution? |
|
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. |
|
Theoretically you could make a "bridge" between The real power is using |
|
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. |
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 |
|
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 Obviously there's a bunch of information NOT relevant to the colorscheme captured here, but it does import successfully if I point
This is all using I'm not sure if it works if I regenerate the colors though, does |
|
@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 |
@GideonWolfe did you figure out if darkreader caches the config? or do we try asking someone from the dev team? |
How are you doing this? Were you able to do this declaratively in NixOs? Or somewhere in the extension interface? EDIT - I just imported the rendered config file via the extension advanced settings. |
|
Yeh, that is what everyone is doing, wonder if there is an internal plain text file that darkreader uses and we can overwrite. |
|
@bashfulrobot can you please elaborate the steps you have performed? |
I create the config file described here using the Then went into the settings of the extension itself and targeted the created file and used it as the import target. |
|
@GideonWolfe was you able to automate the process? |
|
I have been able to automate the process, although not very elegantly. I patched the source code and built the extension myself, on setInterval(() => {
fetch('http://localhost:7520/dark-reader.json')
.then(response => response.json())
.then(settings => {
console.log('Received darkreader-config.json', settings);
Extension.changeSettings(settings);
})
.catch(error => {
console.error('Failed to fetch darkreader-config.json:', error);
});
}, 5000);Now set up systemd.services.nginx.serviceConfig = {
ProtectHome = false;
ReadOnlyPaths = ["/home/lurian/.cache/wal"];
};
services.nginx = {
enable = true;
user = "lurian";
group = "users";
virtualHosts."localhost" = {
listen = [
{
addr = "127.0.0.1";
port = 7520;
}
];
locations = {
"/" = {
root = "/home/lurian/.cache/wal";
};
};
};
};The template I use is a subset of what @eylles posted above (otherwise I'd end up continuously overriding my own settings): {{
"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}",
"lightSchemeTextColor": "{color15}",
"scrollbarColor": "auto",
"selectionColor": "auto",
"styleSystemControls": false,
"lightColorScheme": "Default",
"darkColorScheme": "Default",
"immediateModify": false
}}
}} |
|
You can also just use my native extension, but replace the index.js to pull from your own source (e.g. a file) rather than pywal. Should be easier than the above solution without requiring polling or running an http server. |
|
i was looking at the solution of pulling from a port but without running nginx or apache but instead "serving" the json to the port with netcat and a bash daemon or maybe even python if bash+netcat is not enough as that would still be a smaller footprint than any proper http server i think. |
|
@eylles You can just open a server from index.js using normal JavaScript (or translate the file into any other language you're comfortable with, python, compiled code, etc) and then interact with that server. The native extension gives you the ability to do normal program stuff like open an http server that might be impossible without an unsandboxed environment. Just follow the instructions here: https://github.com/alexhulbert/seaglass?tab=readme-ov-file#firefox-pywal-customization but edit the index.js file to create an HTTP server instead of watching for file changes. All you need to do is call that setTheme function in your http handler. If you're using chrome, there are alternative instructions below the linked section of the readme. Hope that helps! Im happy to assist if things don't work properly. Btw, you can test index.js by just running it since the message payload is sent to Firefox over regular stdout. good way to test that your code is working before troubleshooting why it doesn't work in Firefox. |
and others
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?
The text was updated successfully, but these errors were encountered: