Milovana Dark Mode

[Alternatecouple]

Oh, thank you so much for this.

[PlayfulGuy]

Hi FrozenWolf!

I've got a small issue with the dark mode script and hope you can help.

I'm using Firefox and TamperMonkey.

When the script is active if I right click an image in a thread on milovana and select "Open image in new tab" I get this (using the stats image in your recent post in the MiloDB thread for example):

Spoiler: show

20260307 12_15_26-Greenshot.jpg (249.85 KiB) Viewed 2930 times

The top of the image is scrolled up off the screen, and only half the image is visible. If I turn off the milovana dark mode script and hit refresh it displays normally like this:

Spoiler: show

20260307 12_22_06-Greenshot.jpg (404.27 KiB) Viewed 2930 times

I've looked over the script and can't tell for sure what might be causing it, but given that turning the script off fixes it, it must be something in there.

Any thoughts would be much appreciated!

PG

[kerkersklave]

Just discovered this useful thing.
The issue with images opened in a new tab is, that this is a plain image. The userscript inserts some css, this converts it into a website somehow, and this is rendered differently.
I've fixed the issue by checking the mime type, and also removed the exclude-directive and checked instead of eos in javascript:

Code: Select all

// ==UserScript==
// @name         Milovana Dark
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Darken Milovana colours
// @author       FrozenWolf
// @match        https://milovana.com/*
// @icon         https://milovana.com/favicon.ico
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

/* Depending on which type of manipulator is being used, GM_addStyle(...) may not be
 * available. Helequin has provided the function below so it can be included if needed.
 *   TamperMonkey  - No change needed
 *   ViolentMonkey - No change needed
 *   GreaseMonkey  - Might need to uncomment the function
 *   FireMonkey    - Might need to uncomment the function */
/*
function GM_addStyle(css) {
  const head = document.querySelector('head');
  if (head) {
    const style = document.createElement('style');
    style.textContent = css;
    head.appendChild(style);
  }
}
*/

let style = '';

if (document.URL.startsWith('https://milovana.com/forum/')) {
    style += `
        html {
            background-color: #444 !important;
        }
    `;
}

style += `
    body:not(.eosTopBody) {
        filter: invert() hue-rotate(180deg) !important;
        background-color: #444 !important;
        background-blend-mode: darken !important;
    }
    body#phpbb {
        background-image: none !important;
        background-color: #bbb !important;
    }
    img#h_logo, .profile-rank img {
        filter: none !important;
    }
    img {
        filter: invert() hue-rotate(180deg) !important;
    }
    iframe:not(.eosIframe):not(:fullscreen) {
      filter: invert() hue-rotate(180deg) !important;
    }
    .rating .score {
        filter: brightness(50%) !important;
    }
    .isfav {
        filter: saturate(9) !important;
    }
    .forabg, .forumbg {
        background-image: none !important;
        background-color: #666 !important;
    }
    .topiclist.forums, .topiclist.topics, .row.bg1, .row.bg2 {
        background-image: none! important;
        background-color: #ddd !important;
    }
    .forumtitle, .topictitle, .postbody h3 {
        color: #000 !important;
    }
    .postbody h3 a:hover, .postbody h3 a:link {
        color: #000 !important;
    }
    .lastsubject {
        color: #222 !important;
    }
    .username {
        color: #444 !important;
    }
    .codebox code {
        color: #220 !important;
    }
    blockquote {
        border: #333 0.2em solid !important;
        border-radius: 0.2em !important;
        background-color: #fff !important;
    }
    blockquote cite {
        border-bottom: #333 0.2em solid !important;
        background-color: #ddd !important;
    }
`;

if(document.contentType === "text/html") {
    GM_addStyle(style);
}

[PlayfulGuy]

Just discovered this useful thing.
The issue with images opened in a new tab is, that this is a plain image. The userscript inserts some css, this converts it into a website somehow, and this is rendered differently.
I've fixed the issue by checking the mime type, and also removed the exclude-directive and checked instead of eos in javascript:

You, are a wizard! Thanks so much. That's been bugging me for a long time and I keep forgetting to post here and ask about it.
My HTML and CSS knowledge just wasn't sufficient to figure it out.

Thanks!

PG

[kerkersklave]

You, are a wizard! Thanks so much. That's been bugging me for a long time and I keep forgetting to post here and ask about it.
My HTML and CSS knowledge just wasn't sufficient to figure it out.

Thx. I had to edit it again just now though. My eos detection didn't quite work, I didn't test it in full screen mode. Now it does.

[PlayfulGuy]

You, are a wizard! Thanks so much. That's been bugging me for a long time and I keep forgetting to post here and ask about it.
My HTML and CSS knowledge just wasn't sufficient to figure it out.

Thx. I had to edit it again just now though. My eos detection didn't quite work, I didn't test it in full screen mode. Now it does.

Excellent! Thanks again. I actually tested everything except EOS as well

PG

[kerkersklave]

And an other update... Remembered I maybe should test the EOS editor, and of course there the preview works slightly different.

Now it should all work and I got away with doing it all in CSS. This inverting the body and inverting an iframe back together with fullscreen mode which somehow takes the fullscreen element out of the normal document structure regarding css is tricky. But as seraph0x doesn't change the site too much, it shouldn't bee too fragile.

[FrozenWolf]

Oh, thank you so much for this.

Yay, glad it's still getting some use!

When the script is active if I right click an image in a thread on milovana and select "Open image in new tab" I get this (using the stats image in your recent post in the MiloDB thread for example):

Spoiler: show

20260307 12_15_26-Greenshot.jpg

The top of the image is scrolled up off the screen, and only half the image is visible. If I turn off the milovana dark mode script and hit refresh it displays normally like this:

Spoiler: show

20260307 12_22_06-Greenshot.jpg

Good spot, somehow I'd never noticed that before. I don't know why applying an image filter changes its vertical position. I think I'm at the limit of my CSS skills/knowledge.

And an other update... Remembered I maybe should test the EOS editor, and of course there the preview works slightly different.

Now it should all work and I got away with doing it all in CSS. This inverting the body and inverting an iframe back together with fullscreen mode which somehow takes the fullscreen element out of the normal document structure regarding css is tricky. But as seraph0x doesn't change the site too much, it shouldn't bee too fragile.

Fantastic! You're clearly far more skilled in this area than I am, thanks for spending the time to fix up the script. I've tried out your improved version and it all seems to work very nicely indeed, and the dark mode now effecting the classic/regular/plain/whatever-people-call-them teases is great, something I couldn't get to work properly without wrecking EOS teases.

I'll update the first post with your revised version.

[FrozenWolf]

v0.5
Many thanks to kerkersklave for providing an improved version with the following:

• Fixed: Opened images no longer have their top-half cut off.
• Added: Dark mode now applies to Regular/Classic/Plain/whatever-you-call-them teases.

[JohnP919]

Supernice, much appreciated!