Darkmode Plugin Inverted Pictures (Fixed)

Darkmode Plugin Inverted Pictures (Fixed)
minim@8545f1c2 Saturday 5th April 2025, 02:15:24If you use the dark mode plugin, here is some updated code provided by our friendly AI that fixed the inverted pictures. I am still going to tweak this plugin some more to try and clean up the colors of the fonts to make it a more black and white theme. The colors tend to make it look a little busy.
The file you need to edit is located in the Pluginst/darkmode folder and is named: darkmode.php You need to completely replace the code block starting with: /**
* On charge la minification avant
**/
function darkmode_head()
{
Here's the updated code block that will fix the inverted images.
The file you need to edit is located in the Pluginst/darkmode folder and is named: darkmode.php You need to completely replace the code block starting with: /**
* On charge la minification avant
**/
function darkmode_head()
{
Here's the updated code block that will fix the inverted images.
function darkmode_head()
{
$plugin = 'darkmode';
# Lecture des données
$data = flatDB::readEntry('plugin', $plugin);
$config = flatDB::readEntry('config', 'config');
$out = '';
$assets = HTML_PLUGIN_DIR . $plugin . DS . 'assets' . DS;
if ($data[$plugin . 'state']) {
$out .= ' <link rel="stylesheet" type="text/css" href="' . $assets . 'darkmode.min.css?ver=1.5.7" />' . PHP_EOL;
// Add custom CSS to prevent image inversion
$out .= ' <style>
/* Target images with high specificity */
html body.darkmode--activated img,
html body.darkmode--activated img.img-fluid,
html body.darkmode--activated img.img-thumbnail,
html body.darkmode--activated .darkmode-ignore,
html body.darkmode--activated picture,
html body.darkmode--activated video,
html body.darkmode--activated iframe,
html body.darkmode--activated .darkmode-image-wrapper {
isolation: isolate !important;
mix-blend-mode: normal !important;
background-blend-mode: normal !important;
display: inline-block !important;
position: relative !important;
z-index: 1 !important;
-webkit-isolation: isolate !important;
-webkit-mix-blend-mode: normal !important;
/* Counteract inversion caused by mix-blend-mode: difference */
filter: invert(1) !important;
}
/* Isolate parent elements */
html body.darkmode--activated .post-content,
html body.darkmode--activated .image-wrapper,
html body.darkmode--activated .container,
html body.darkmode--activated .row,
html body.darkmode--activated .col,
html body.darkmode--activated .card,
html body.darkmode--activated .post,
html body.darkmode--activated .thread {
isolation: isolate !important;
mix-blend-mode: normal !important;
background-blend-mode: normal !important;
position: relative !important;
z-index: 1 !important;
-webkit-isolation: isolate !important;
-webkit-mix-blend-mode: normal !important;
}
/* Handle background images */
html body.darkmode--activated [style*="background-image"],
html body.darkmode--activated [style*="background"],
html body.darkmode--activated .darkmode-ignore [style*="background-image"],
html body.darkmode--activated .darkmode-ignore [style*="background"] {
isolation: isolate !important;
mix-blend-mode: normal !important;
background-blend-mode: normal !important;
position: relative !important;
z-index: 1 !important;
-webkit-isolation: isolate !important;
-webkit-mix-blend-mode: normal !important;
}
/* Target common Flatboard classes */
html body.darkmode--activated .post-image,
html body.darkmode--activated .avatar,
html body.darkmode--activated .attachment {
isolation: isolate !important;
mix-blend-mode: normal !important;
background-blend-mode: normal !important;
position: relative !important;
z-index: 1 !important;
-webkit-isolation: isolate !important;
-webkit-mix-blend-mode: normal !important;
}
/* Ensure the darkmode-layer doesn\'t interfere */
.darkmode-layer {
pointer-events: none !important;
z-index: 499 !important;
}
</style>' . PHP_EOL;
}
return $out;
}
Last modified by minim@8545f1c2 on Saturday 5th April 2025, 02:20:00
Replies 2

Thanks minim, I just updated the plugin by integrating your css into the minifier file.
- Before ask a question, read the documentation.
- 🎉 Featured as #1 product of the day on Product Hunt
- Please like in alternativeto.net 👍🏻
- ╰☆╮Flatboard╰☆╮ is a open source and community contributions are essential to project success!
- <TextField>, my new CMS project designed by a passionate developer, for developers!
- My last project Fast⚡︎CMS, a Flat-File cms.
- I am currently busy 😫.

Suggested Topics

Gavin
started Image Viewer
Open Bar

455db0d1
started Image/ File Uploads?
General Questions

Michael
started translation Deutsche Übersetzung
Resources

Balistic#423165
started 🇫🇷 Administration et modération
International Discussions