Jump to content
Moopler

Recommended Posts

Hey guys, I just made a rough dark mode script for tampermonkey (chrome extension) for this website:

Image: 

Spoiler

m7E0upz.png

Here's the TamperMonkey Code (Well aware that I put '!important' everywhere in the css, don't judge me): 

Spoiler

// ==UserScript==
// @name        Moopler
// @include     https://www.moopler.net/*
// @description Dark Mode Theme for Moopler
// @author      JP
// @version     1
// @grant       none
// ==/UserScript==
// Settings:
// Display comment section

addGlobalStyle('#ipsLayout_header header,body{background-color:#161819!important;}');
addGlobalStyle('.ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"],.ipsBreadcrumb > ul > li > a,.ipsType_pageTitle {color:white!important;}');
addGlobalStyle('#ipsLayout_header nav, .ipsNavBar_secondary,.ipsNavBar_secondary > li > a{color:white!important;background:#161819!important;}');
addGlobalStyle('.ipsNavBar_primary > ul > li.ipsNavBar_active > a{ background-color: rgba(255,255,255,0.1); color:white;}');
addGlobalStyle('.ipsWidget,.ipsWidget_horizontal,.ipsBox,.ipsDataItem,.ipsTabs_activeItem,.ipsTabs_item,.ipsComment,.ipsMenu_headerBar,.ipsMenu_footerBar{background-color:rgba(255,255,255,0.05)!important; color:white!important; border-color:#212121!important;}');
addGlobalStyle('.ipsType_sectionTitle,.cbAnn,.ipsAreaBackground_light,.ipsWidget.ipsWidget_vertical .ipsWidget_title, .ipsWidget.ipsWidget_horizontal .ipsWidget_title{background-color:rgba(255,255,255,0.02)!important; color:white!important;');
addGlobalStyle('.ipsAreaBackground_reset,.ipsTabs_panel,.ipsButtonBar,.ipsComment:not( .ipsModerated ) .ipsComment_header{background-color:rgba(255,255,255,0.01)!important; color:white!important;}');
addGlobalStyle('.ipsType_richText,.ipsMenu_item > a, .ipsMenu_item > span,.ipsType_sectionHead{color:white!important;}');
addGlobalStyle('.ipsMenu,.ipsHovercard,.ipsAreaBackground,.cProfileRepScore_neutral{background-color:#313131!important;color:white!important;border-color:#212121!important;');
addGlobalStyle('.ipsMenu_title{background-color:#212121!important;color:white!important;}');
addGlobalStyle('body{background-color:161819!important;color:white!important;border-color:#212121!important;}');
addGlobalStyle('.cke_wysiwyg_frame,.cke_wysiwyg_div{background-color:#161819!important;color:white!important;}');
addGlobalStyle('.ipsType_light{color:#b3b3b3!important;}');
addGlobalStyle('.ipsSpoiler,.ipsStyle_spoiler{background:inherit!important;border-color:#484848!important;}');
addGlobalStyle('.ipsSpoiler .ipsSpoiler_header a, .ipsStyle_spoiler .ipsSpoiler_header a{color:#616161!important;}');
addGlobalStyle('.ipsSpoiler_header{background:inherit!important;color:white!important;}');

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

 

Just something I wanted to use & share in case anyone wanted other options. Enjoy :D

EDIT (10/17/18): 

Updated code for edge cases, there might still be some edge cases that I haven't discovered yet. Please let me know if you find one!

Spoiler

// ==UserScript==
// @name        Moopler
// @include     https://www.moopler.net/*
// @description Dark Mode Theme for Moopler
// @author      JP
// @version     2
// @grant       none
// ==/UserScript==
// Settings:
// Display comment section

addGlobalStyle('#ipsLayout_header header,body{background-color:#111414!important;}');
addGlobalStyle('.ipsBreadcrumb [data-action="defaultStream"], .ipsBreadcrumb [data-action="markSiteRead"],.ipsBreadcrumb > ul > li > a,.ipsType_pageTitle {color:white!important;}');
addGlobalStyle('#ipsLayout_header nav, .ipsNavBar_secondary,.ipsNavBar_secondary > li > a{color:white!important;background:#111414!important;}');
addGlobalStyle('.ipsNavBar_primary > ul > li.ipsNavBar_active > a{ background-color: rgba(255,255,255,0.1); color:white;}');
addGlobalStyle('.ipsWidget,.ipsWidget_horizontal,.ipsBox,.ipsDataItem,.ipsTabs_activeItem,.ipsTabs_item,.ipsComment,.ipsMenu_headerBar,.ipsMenu_footerBar{background-color:rgba(255,255,255,0.05)!important; color:white!important; border-color:#212121!important;}');
addGlobalStyle('.ipsType_sectionTitle,.cbAnn,.ipsAreaBackground_light,.ipsWidget.ipsWidget_vertical .ipsWidget_title, .ipsWidget.ipsWidget_horizontal .ipsWidget_title{background-color:rgba(255,255,255,0.02)!important; color:white!important;');
addGlobalStyle('.ipsAreaBackground_reset,.ipsTabs_panel,.ipsButtonBar,.ipsComment:not( .ipsModerated ) .ipsComment_header{background-color:rgba(255,255,255,0.01)!important; color:white!important;}');
addGlobalStyle('.ipsType_richText,.ipsMenu_item > a, .ipsMenu_item > span,.ipsType_sectionHead{color:white!important;}');
addGlobalStyle('.ipsMenu,.ipsHovercard,.ipsAreaBackground,.cProfileRepScore_neutral{background-color:#313131!important;color:white!important;border-color:#212121!important;');
addGlobalStyle('.ipsMenu_title{background-color:#212121!important;color:white!important;}');
addGlobalStyle('body{background-color:161819!important;color:white!important;border-color:#212121!important;}');
addGlobalStyle('.cke_wysiwyg_frame,.cke_wysiwyg_div{background-color:#111414!important;color:white!important;}');
addGlobalStyle('.ipsType_light{color:#b3b3b3!important;}');
addGlobalStyle('.ipsSpoiler,.ipsStyle_spoiler{background:inherit!important;border-color:#484848!important;}');
addGlobalStyle('.ipsSpoiler .ipsSpoiler_header a, .ipsStyle_spoiler .ipsSpoiler_header a{color:#616161!important;}');
addGlobalStyle('.ipsSpoiler_header{background:inherit!important;color:white!important;}');
addGlobalStyle('.ipsQuote_citation,.ipsQuote,.ipsCode{background-color:rgba(255,255,255,0.05)!important; background:rgba(255,255,255,0.05)!important; border:unset!important; color:white;}');
addGlobalStyle('.pln{color:white!important;}');
addGlobalStyle('div{background-color:unset!important; color:inherit!important;}');
addGlobalStyle('.ipsDialog_title,.ipsDialog_content{background-color:#111414!important;border-color:#484848!important;color:white!important;}');
addGlobalStyle('.ipsDialog > div{background:#111414!important;}');
addGlobalStyle('#elSearchExpanded,#elSearchExpanded .ipsSideMenu_list{background:#111414!important;color:white!important;}');
addGlobalStyle('#elSearch input[type="search"]{background:#484848!important;color:white!important;}');
addGlobalStyle('.ipsNavBar_primary:not( .ipsNavBar_noSubBars ) > ul:before{background-color:#111414!important;}');

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

 

 

 

Edited by JP.
Added Edit Date
  • Like 5
  • Thanks 1

Share this post


Link to post

Looks very neat, JP. If others are also interested in a dark theme for Moopler, I might actually create something. Let me know :)

  • Like 5

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×