Darkmode Plugin Inverted Pictures (Fixed)

minim
Darkmode Plugin Inverted Pictures (Fixed)
minim@8545f1c2 Saturday 5th April 2025, 02:15:24

If 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.
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
Fred
Fred  Friday 11th April 2025, 23:56:34

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

JPRuehmann
JPRuehmann  Saturday 12th April 2025, 08:00:22

After Install the darkmode plugin a big blue arrow appears in the left Side.
But only in dark mode.
How can I repair this?

Suggested Topics
SurveyBuilder-Admin
Gavin started Image Viewer
Open Bar
25.6K 2
26.6K 7
Want to read more? Browse all categories or view latest topics.