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.3
// @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==

/* 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);
  }
}
*/

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#h_logo, .profile-rank img {
        filter: none !important;
    }
    img, iframe {
        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;
    }
` );

Sample: Home

Spoiler: show

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

Sample: Webteases

Spoiler: show

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

Sample: Forum

Spoiler: show

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

Sample: Thread

Spoiler: show

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