Milovana Dark Mode

[FrozenWolf]

I've written a small TamperMonkey script that darkens the Milovana website by modifying the CSS. It might be useful to some of you, so I thought I'd share it. I'm sure there are some aspects that can be improved, but it's a start.

What is TamperMonkey?

Spoiler: show

TamperMonkey is a web browser extension that allow scripts to be run as a web page is loaded. It's often used to tweak/add/remove parts of a web page. I use the TamperMonkey extension for Firefox; it's available for other browsers too.

Note: It does not interfere with the playing of teases (see @exclude part of the script) which is fine for EOS but is an issue for classic teases. Suggestions welcome.

Here's the script:

Code: Select all

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

GM_addStyle ( `
    body {
        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 {
        filter: invert() hue-rotate(180deg) !important;
    }
    img#h_logo, .profile-rank img {
        filter: none !important;
    }
    iframe {
        filter: invert() hue-rotate(180deg); !important;
    }
    .rating .score {
        filter: brightness(50%) !important;
    }
    .isfav {
        filter: saturate(9) !important;
    }
` );

Sample: Home

Spoiler: show

Home-Dark.png (381.63 KiB) Viewed 2086 times

Sample: Webteases

Spoiler: show

Webteases-Dark.png (442.59 KiB) Viewed 2086 times

Sample: Forum

Spoiler: show

Forum-Dark.png (149.35 KiB) Viewed 2086 times

Sample: Thread

Spoiler: show

Thread-Dark.png (148.23 KiB) Viewed 2086 times

[FrozenWolf]

v0.2

• Fixed: Embedded videos are no longer inverted.

[lolol2]

Works perfect with Chrome, thanks!

[Helequin]

Nice little code, and useful thank you.

Worth noting some userscript tools don't support GM_AddStyle anymore. If anyone is using Greasemonkey, Firemonkey or something else where this code doesn't work too well you can try adding the function back in so it will work:

You need to add this near the top of the script.

Code: Select all

function GM_addStyle(css) {

  const head = document.querySelector('head');
  if (head) {
    const style = document.createElement('style');
    style.textContent = css;
    head.appendChild(style);
  }
}

The full script with the added function:

Code: Select all

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


function GM_addStyle(css) {

  const head = document.querySelector('head');
  if (head) {
    const style = document.createElement('style');
    style.textContent = css;
    head.appendChild(style);
  }
}

GM_addStyle ( `
    body {
        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 {
        filter: invert() hue-rotate(180deg) !important;
    }
    img#h_logo, .profile-rank img {
        filter: none !important;
    }
    iframe {
        filter: invert() hue-rotate(180deg); !important;
    }
    .rating .score {
        filter: brightness(50%) !important;
    }
    .isfav {
        filter: saturate(9) !important;
    }
` );

[Razorsedge]

This is fantastic, thanks very much.
I love it!

[PlayfulGuy]

Just stumbled across this and gave it a try. Awesome!

Thanks so much for this.

I need to learn more about Tampermonkey.

PG

[G3General]

Awesomeness :)