DuckDuckGo

[Protocol2]

Hi! I like what you've done with this addon. It works really well in FireFox.

I had a question about how you manage to change the default colours of DuckDuckGo with this addon. I'm a pretty big noob when it comes to coding things like these, but I personally use qutebrowser as my main browser and I'd like to create something that does what your plugin does with DuckDuckGo. Qutewal already manages to read Xresources colours, but it doesn't have much effect on existing webpages. I assume pywalfox does something with the duckduckgo stylesheet so I'd love to know if you think this would be something I could pull off somehow.

Thanks for your time!

[Frewacom]

Hey!

No stylesheet is used. DuckDuckGo uses cookies for every color of the page (e.g. background, text, etc). Pywalfox will set these manually based on your theme. You can see the application of these settings here:

pywalfox/src/inject/duckduckgo.ts

Lines 35 to 46 in 871e018

	function applyTheme(hash: string, theme: IDuckDuckGoTheme) {
	Object.keys(theme).forEach((key: DuckDuckGoColorKeys) => {
	window.wrappedJSObject.DDG.settings.set(key, theme[key]);
	});
	window.wrappedJSObject.DDG.settings.set(
	DuckDuckGoSettingKeys.ThemeId,
	DuckDuckGoThemeKeys.Pywalfox,
	);
	setHash(hash);
	}

The window.DDG interface on the DuckDuckGo domain exposes all of the functions that you need to manage themes.

A theme will make use of the following color keys:

pywalfox/src/definitions.ts

Lines 51 to 60 in 871e018

	export enum DuckDuckGoSettingKeys {
	Background = 'k7',
	HeaderBackground = 'kj',
	ResultTitle = 'k9',
	ResultDescription = 'k8',
	ResultLink = 'kx',
	ResultLinkVisited = 'kaa',
	Hover = 'k21',
	ThemeId = 'kae',
	}

To set a custom theme, set each of these keys to the color of choice (other properties can also be set, using some other keys).

For example:

window.DDG.settings.set('k7', '000000');

to set the background color to black. These changes will be persistent since they will internally be stored in cookies.

Pywalfox also sets the theme name, as can be seen in line 40-43 in the first code block. I am not sure if this is needed, but I guess it does not hurt to set it.

window.DDG.settings.set('kae', 'my-custom-theme');

---

I am also primarily using qutebrowser at the moment, so feel free to share the result if you get it to work. I would have done it myself, but I have been quite busy recently 😄

[Protocol2]

Thanks for this info! Sadly enough I don't think qutebrowser allows for injects like these. At least, I haven't been able to find anything that comes remotely close to something like this to try out. Maybe I'm just not experienced enough, but for now I'll just keep experimenting and if I ever figure out how to get an effect like yours working I'll let you know!

[Protocol2]

There might be a way to do something like this by using the Qutebrowser user stylesheet CSS option thing, but I've messed around with it for a while without any luck. I assume if you were to import the colours from .cache/wal/colors.css and replaced the correct hex values in something like this it should technically work? I just haven't been able to get it to.

[Frewacom]

It would probably work, yes. The downside to using CSS stylesheets is that it is very prone to break. It also requires a lot more work to theme everything correctly. However, unless qutebrowser allows you to inject custom javascript into certain websites, there really is not much of an alternative.