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

tim22@2304fed8
started How to Change Existing Forum Name
General Questions

ebd6d
started Reverse Post Order
General Questions

AlexanderLiebrecht
started plugin Search Engine friendly URLs for Flatboard
Feature Requests

Gavin
started SSQL - PHP Library(plugin extensions)
Resources