Dark mode issue

[BEST8OY]

Describe the bug
One particular dictionary mess with dark mode engine.
If I disable that dictionary the problem goes away
I'm not sure to say if this is a GD bug or dictionary bug!
In v24.09.0-Release.316ec900 it only affect the background slightly (makes it darker)
In v25.2.0-Release.9caa1683 it makes background darker and other elements weird in color.
I have to mention that I'm using this article script.

The weird thing is that when I select an entry that has this problem it becomes okay after several tries!
It even fixes the darker background somehow

outputfile.mp4

 
Expected behavior
It should be like previous version at least and I want it to not mess with anything more than background

Screenshots

In v24.09.0-Release.316ec900

An entry that the mentioned dictionary doesn't have

An entry that the mentioned dictionary has

In v25.2.0-Release.9caa1683

An entry that the mentioned dictionary doesn't have

An entry that the mentioned dictionary has

To Reproduce
1.Use latest version
2.Use this dictionary

OS and software versions

• OS: Arch Linux

[BEST8OY]

I found another dictionary that causes the same issue
Now, I can safely say it has nothing to do with custom article-script.js if there was any doubt!

outputf.mp4

[xiaoyifang]

you can use F12 to inspect the element and found out which style has taken effect and where does the style come from.

[BEST8OY]

It's fallback colors
Why do they get activated? and why do they no get activated after several try as it's shown in original post video?

[xiaoyifang]

which dictionary has introduced the style html?

[BEST8OY]

What do you mean?
Isn't it darkreader.js making those colors?

[xiaoyifang]

goldendict-ng/article_maker.cc

Line 158 in 3a93f8b

body { background: #242525; }

@shenlebantongying any connection?

[shenlebantongying]

I am honestly not sure.

We hard coded a black background to reduce white flash, because before darkreader.js kicking in, the page could be white for a brief moment.

Sadly, darkreader.js is not a color inverter as it can analyze page's actual colors, so there is a minor flaw that page slightly changes background darkness due to this hack.

However, this hack might be outdated as some bugs related to background color in webengine were fixed.

[BEST8OY]

Just so you know guys
The problem is still there, and I can't use custom color any more (build from source)
As you can see it isn't using my custom colors and default colors are affected by the issue in this topic.

[shenlebantongying]

You can just disable dark reader mode in GD, then copy the entire content of darkreader.js https://www.jsdelivr.com/package/npm/darkreader to article-script.js

You also need to copy this region of code.

goldendict-ng/src/article_maker.cc

Lines 172 to 206 in 7f9a23f

	// This function returns a promise, but it is synchroneous because it does not use await
	function fetchShim(src) {
	if (src.startsWith('gdlookup://')) {
	// See https://github.com/xiaoyifang/goldendict/issues/363
	console.error('Dark Reader discovered unexpected URL', src);
	return Promise.resolve({blob: () => new Blob()});
	}
	if (src.startsWith('qrcx://') || src.startsWith('qrc://') || src.startsWith('bres://') || src.startsWith('gico://')) {
	// This is a resource URL, need to fetch and transform
	return new Promise((resolve) => {
	const img = document.createElement('img');
	img.addEventListener('load', () => {
	// Set willReadFrequently to true to tell engine to store data in RAM-backed buffer and not on GPU
	const canvas = document.createElement('canvas', {willReadFrequently: true});
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	const ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0);
	canvas.toBlob((blob) => {
	resolve({blob: () => blob});
	});
	}, false);
	img.src = src;
	});
	}
	// This is a standard URL, can fetch it directly
	return fetch(src);
	}
	DarkReader.setFetchMethod(fetchShim);
	DarkReader.enable({
	brightness: 100,
	contrast: 90,
	sepia: 10
	});
	</script>

Then at the end call the DarkReader.enable method.

The issue is that GD hardcoded a DarkReader.enable and a second DarkReader.enable call without DarkReader.disable first is undefined/unknown/untested.

There is no fix to this issue unless we provide granular darkreadermode customization that change GD's built-in DarkReader.enable() method.