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.

Here's the script:

Code: Select all

// ==UserScript==
// @name         Milovana Dark
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  Darken Milovana colours
// @author       FrozenWolf, Helequin, kerkersklave
// @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);
}

Sample: Home

Spoiler: show

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

Sample: Webteases

Spoiler: show

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

Sample: Forum

Spoiler: show

Forum-Dark.png (159.01 KiB) Viewed 5410 times

Sample: Thread

Spoiler: show

Thread-Dark.png (148.23 KiB) Viewed 7544 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 :)

[senorgif2]

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;
    }
` );

just letting you know that this fix actually makes it non-functional with violentmonkey, on firefox, while the original code in the first reply works.

[FrozenWolf]

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;
    }
` );

just letting you know that this fix actually makes it non-functional with violentmonkey, on firefox, while the original code in the first reply works.

Thanks for letting us know. I'll update the original with a newer version that improves the forum colours and include Helequin's code commented-out with a note on top that it might be useful for some variants of *monkey.

-FW

[FrozenWolf]

v0.3

• Changed: Improved forum colours.
• Added: Helequin's GM_addStyle(...) support code (commented out by default)

[Helequin]

Oh wow, didn't expect this thread to get an update. Been away for a bit

Hopefully the codes are working for people - I actually now mostly use the Dark Reader addon. It probably doesn't work quite as well but it's easy and works on any website with some settings tweaks.

[FrozenWolf]

Oh wow, didn't expect this thread to get an update. Been away for a bit

Hopefully the codes are working for people - I actually now mostly use the Dark Reader addon. It probably doesn't work quite as well but it's easy and works on any website with some settings tweaks.

I'd almost forgotten about it myself!

I also use Dark Reader for many sites, but I didn't like it so much for milovana. I also experienced some significant performance degradation on some sites on Android with Firefox when using Dark Reader, although I never found out why.

I've just noticed that the righthand side of a forum thread seems to still be bright pink on Android with Firefox, although it's fine on Linux with Firefox; weird

[adieting]

I wanna say thanks for this! Makes the site much easier on the eyes.

[FrozenWolf]

I wanna say thanks for this! Makes the site much easier on the eyes.

Thanks, it's nice to know it's still getting some use!

[FrozenWolf]

v0.4

• Fixed: Forum page outer-borders were sometimes showing in the bright pink colour.