Page 1 of 1
Milovana Dark Mode
Posted: Sat Sep 03, 2022 3:06 pm
by 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;
}
` );
: Home
- Spoiler: show
-
- Home-Dark.png (381.63 KiB) Viewed 2365 times
Sample: Webteases
- Spoiler: show
-
- Webteases-Dark.png (442.59 KiB) Viewed 2365 times
Sample: Forum
- Spoiler: show
-
- Forum-Dark.png (159.01 KiB) Viewed 231 times
Sample: Thread
- Spoiler: show
-
- Thread-Dark.png (148.23 KiB) Viewed 2365 times
Re: Milovana Dark Mode
Posted: Sat Sep 03, 2022 3:40 pm
by FrozenWolf
v0.2
- Fixed: Embedded videos are no longer inverted.
Re: Milovana Dark Mode
Posted: Sat Sep 03, 2022 6:30 pm
by lolol2
Works perfect with Chrome, thanks!
Re: Milovana Dark Mode
Posted: Sat Sep 03, 2022 6:42 pm
by 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;
}
` );
Re: Milovana Dark Mode
Posted: Sun Sep 04, 2022 12:58 am
by Razorsedge
This is fantastic, thanks very much.
I love it!
Re: Milovana Dark Mode
Posted: Wed Sep 28, 2022 6:28 pm
by PlayfulGuy
Just stumbled across this and gave it a try. Awesome!
Thanks so much for this.
I need to learn more about Tampermonkey.
PG
Re: Milovana Dark Mode
Posted: Fri Sep 30, 2022 12:37 pm
by G3General
Awesomeness :)
Re: Milovana Dark Mode
Posted: Wed May 22, 2024 2:25 pm
by senorgif2
Helequin wrote: ↑Sat Sep 03, 2022 6:42 pm
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.
Re: Milovana Dark Mode
Posted: Wed May 22, 2024 9:20 pm
by FrozenWolf
senorgif2 wrote: ↑Wed May 22, 2024 2:25 pm
Helequin wrote: ↑Sat Sep 03, 2022 6:42 pm
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
Re: Milovana Dark Mode
Posted: Wed May 22, 2024 9:32 pm
by FrozenWolf
v0.3
- Changed: Improved forum colours.
- Added: Helequin's GM_addStyle(...) support code (commented out by default)