Skip to content

Roll20 Community Wiki Dark Mode by anduh

Screenshot of Roll20 Community Wiki Dark Mode

Details

Authoranduh

LicenseNo License

CategoryRoll20

Created

Updated

Size15 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark Mode for the Roll20 Community Wiki, with minor Dark Mode fixes to the rest of the site.

Notes

Changelog:

  • October 2022: Remove Dark Mode from everywhere except Community Wiki, to not interfere with official Dark Mode.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Roll20 Dark Mode
@version      20221020.11.57
@namespace    userstyles.world/user/anduh
@description  Dark Mode for the Roll20 site, excluding the app itself.
@author       anduh
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://wiki.roll20.net/") {
/* WIKI */
.darkmodefix, .bg-yellow{
  background: black !important;
}
#header-contents {
  background: linear-gradient(to bottom, #273444 80%,#686868 100%);
}
#wiki-tools h2 {
 color: #ff20a4 !important;
}
/* links */

#main-content a, #main-content a:link, #main-content a:active {
  color: #b90cea;
}

#main-content a:hover, 
#main-content a.external.text:hover {
  color: #f505fd;
}





/* img desc */
div.thumb div div.thumbcaption {
     color: black;
}

/* Element | https://wiki.roll20.net/Building_Character_Sheets */

.topbar > div {
  /* background-color: white; */
  background-color: #702c91;
}

/* Element | https://wiki.roll20.net/Main_Page */

#mw-content-text > div:nth-child(7) > div:nth-child(1) {
  /* background: #E8F5FF; */
  background: #273444;
}

/* Element | https://wiki.roll20.net/Main_Page */

.topbar > div:nth-child(1) {
  /* background-color: white; */
  background-color: #273444 !important;
}

/* Element | https://wiki.roll20.net/Main_Page */

#mw-content-text > div:nth-child(7) > div:nth-child(1) {
  /* background: #E8F5FF; */
  background: #273444 !important;
}

table.ambox {
 background: #273444;
}

/* load.php | https://wiki.roll20.net/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared&only=styles&skin=gmo&* */

@media screen {
  table.wikitable{
    background-color: #273444;
    color: white;  
  }
  #main-content table.wikitable th {
    /* background-color: #f9f9f9; */
    /* color: black; */
    background-color: #273444;
    color: white;
  }
  #main-content td.mbox-text,
  #main-content td.mbox-text * {
    background: #273444;
  }
}

#footer .wiki-foot * {
    color: white;
}
#main-content div.diceroller{
  background: #273444;  
}

/* screen.css | https://wiki.roll20.net/skins/gmo/style/screen.css?1571092650 */

.topbar .simple {
  /* background-color: white; */
  /* color: black; */
  background-color: #273444;
  color: white;
}


/* Wiki editor darkmode fixes */
.wikiEditor-ui-controls {
  /* background-color: white; */
  background-color: #702c91;
}

.wikiEditor-ui-toolbar {
  background-color: #702c91;
}

.wikiEditor-ui .wikiEditor-ui-text {
  /* color: inherit; */
  background-color: #273444;
}

.wikiEditor-ui-buttons {
  /* background-color: white; */
  background-color: #702c91;
}

#wpSummary, #wpTextbox1 {
  background: grey;
}

/* screen.css | https://wiki.roll20.net/skins/gmo/style/screen.css?1571094320 */

.topbar .simple a:hover, .topbar .full a:hover {
  /* background-color: white; */
  background-color: #6f5c5c;
}

div#wiki-tools {
 background-color: #273444;
}
div#wiki-tools a:hover,
div#wiki-tools a:focus {
 color:#f430f4;
}


/* DIFF view */


table.diff #mw-diff-ntitle1 a,
table.diff #mw-diff-ntitle2 a,
table.diff #mw-diff-ntitle3 a,
table.diff #mw-diff-ntitle4 a,
table.diff #mw-diff-otitle1 a,
table.diff #mw-diff-otitle2 a,
table.diff #mw-diff-otitle3 a,
table.diff #mw-diff-otitle4 a{
  color: purple;  
}

td.diff-addedline .diffchange {
 background:#4fa315;
}
td.diff-deletedline .diffchange {
 background:#c9451c;
}


/* table.diff { */
table.diff *, table.diff {
  /* background: white; */
  background: grey;
}

td.diff-context {
  /* background: #eeeeee; */
  background: #484343;
}

td.diff-otitle {
  /* background: #ffffff; */
  background: #4a4747;
}

td.diff-ntitle {
  /* background: #ffffff; */
  background: #534d4d;
}

td.diff-deletedline {
  /* background: #ffffaa; */
  background: #535311;
}

td.diff-addedline {
  /* background: #ccffcc; */
  background: #106010;
}

td.diff-context {
  /* border-color: #e6e6e6; */
  /* border-color: #332f2f; */
  border-color: #000;
}

.mw-search-formheader {
 background-color:#4f4949;
 margin-top:1em;
 border:1px solid #702c91;
}


}

@-moz-document url-prefix("https://wiki.roll20.net"), url-prefix("https://blog.roll20.net"), url-prefix("https://roll20.net/welcome") {
/* Main, Campaign, misc */

/* quickpatch from https://www.reddit.com/r/Roll20/comments/we3e7o/new_font_is_searing_out_my_eyeballs/iim28jv/ */
html[data-theme="light"],
html[data-theme="dark"]{
--color-banner-base-text: #000;
--color-primary-text: #1c1a1d;
--color-primary-base: #02baf2;
--color-primary-hover: #870050;
--color-primary1: #5A0035;
--color-primary2: #870050;
--color-primary3: #B4006A;
--color-primary4: #B4006A;
--color-primary5: #E7339D;
--color-primary6: #ED66B6;
--color-primary7: #F399CE;
}
.btn-group.alertcontainer.newalerts .btn.btn-default.dropdown-toggle.alerts, span.alertcount { color: var(--color-primary4); }


/* darkmode hotfix */
html[data-theme="light"],
html[data-theme="dark"]{
--color-surface1: #870050;
--color-surface2: #870050;
}
span.pictos {
  color: #000 !important;
}



/* misc test */
.magnify {
  display: none;
}


/* main header */
div.container:nth-child(8) > div:nth-child(1) {
 background-color: #273444;
 position: relative;
 z-index: 10000;
 padding-top: 20px;
 padding-bottom: 10px;
 margin-right: 0px;
}


/* browse.css | https://app.roll20.net/v2/css/browse.css?1553011694 */
.postlisting .meta {
  /* color: #777; */
  color: #fff;
}

.forum a {
  /* color: #08c; */
  color: #0af;
}

/* menu dropdown text readability */

.topbar .simple a, .topbar .full a {
  /* color: #5e6969; */
  color: #fdfdfd;
}
.topbar .btn-group.open > a,
.topbar .btn-group.open .dropdown-toggle {
	background-color: #6e00ff;
}

@media(max-width: 1000px) {
	.topbar .fullmobilemenu {
		background-color: black;
    }
}
.nav.nav-pills.nav-stacked * {
  background: #273444;
}

body {
  /* background-color: #FAFAFA; */
  background-color: #676767;
}

/* v2.css | https://app.roll20.net/assets/v2.css?1569950807 */

.breadcrumb {
  /* background: #fff; */
  background: #273444;
}

/* v2.css | https://app.roll20.net/assets/v2.css?1569951309 */
.pictos {
  color: white !important;
}

/* screen.css | https://wiki.roll20.net/skins/gmo/style/screen.css?1571089338 */

body {
  /* background-color: #FAFAFA !important; */
  /* color: #000; */
  background-color: #686868 !important;
  color: #fff;
}

.pBody a {
  /* color: #4B4740; */
  color: #FFF;
}

#main-content {
  /* background: none repeat scroll 0 0 #FFFFFF; */
  background: none repeat scroll 0 0 #273444;
}

#toc {
  /* background-color: #F9F9F9; */
  background-color: #273444;
}

a:link {
  /* color: #003399; */
  color: #cddeff;
}

.topbar .btn-group {
  /* background-color: white; */
  background-color: #4c4c4c;
}

.topbar .btn-default {
  /* color: #555555; */
  color: #fff;
}

#header-contents {
  /* background: #fff; */
  background: #273444;
}

#nav a:hover, #nav a:focus {
  /* color: black; */
  color: white;
}

#quick-search #q {
  /* background: #fff url(../img/screen/template/search-icon.png) 2px 50% no-repeat; */
  /* color: #999; */
  background: #7f8791 url(../img/screen/template/search-icon.png) 2px 50% no-repeat;
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  /* color: #2a2a2a; */
  color: #fff;
}

h2 {
  /* color: #333; */
  color: #fff;
}

div.thumb {
  /* border-color: White; */
  border-color: #702c91;
}

.container {
  /* background: #fff; */
  background: #273444;
}


/* load.php | https://wiki.roll20.net/load.php?debug=false&lang=en&modules=site&only=styles&skin=gmo&* */


#main-content pre,
#main-content code {
  color: #6aff0f;
  background: #0f2101;
}

code {
  border: 1px solid #372e2e;
}

.topbar > div:nth-child(1) {
  background-color: #4f0000;
}

.thumbcaption {
  color: white;
  background: #273444;
}


/* /welcome */
.topbar .menu-hider {
  /* background-color: white; */
  background-color: #4a1111;
}
.btn-default {
  /* background-color: white; */
  background-color: #381153;
}


/* account page */
.topwell {
  /* background: linear-gradient(to bottom, #ffffff 20%,#d1d1d1 100%); */
  background: linear-gradient(to bottom, #273444 20%,#d1d1d1 100%);
}



/* profile enjoiy playing fields */

.chosen-container-multi .chosen-choices {
  /* background-color: #fff; */
  /* background-image: linear-gradient(#eee 1%,#fff 15%); */
  background-color: #674040 !important;
  background-image: linear-gradient(#273444 1%,#7c5050 15%);
}


/* profile edit highight */
.publicprofile .editable.input:hover {
  /* background-color: #FCFFC9; */
  background-color: #8C9400;
}


/* Element | https://app.roll20.net/campaigns/details/3769230/customrand-sheet */
.campaign_details > div:nth-child(1) > p:nth-child(8) {
  /* color: #666; */
  color: #fffdfd;
}

/* browse.css | https://app.roll20.net/v2/css/browse.css?1553011694 */

.campaign_details .editable em {
  /* color: #777; */
  color: #fff;
}

.well.gray {
  /* background-color: #ebeced; */
  /* color: black; */
  background-color: #273444;
  color: #ffebeb;
}

.btn-info, a.btn-info {
  /* color: black; */
  color: #ffe5e5;
}



/* Forum/PM text editor */

.note-editor .panel-default > .panel-heading {
  /* background-color: #f5f5f5; */
  /* border-color: #ddd; */
  background-color: #702c91;
  border-color: #4a4747;
}

.note-editor .btn-default, .note-editor .btn-default.disabled, .note-editor .btn-default[disabled] {
  /* color: #333; */
  /* background-color: #fff; */
  color: #f5f1f1;
  background-color: #273444;
}

.note-editor.note-frame .note-editing-area .note-editable {
  /* color: #000; */
  /* background-color: #fff; */
  color: #fff;
  background-color: #373232;
}

.note-editor.note-frame .note-statusbar {
  /* background-color: #f5f5f5; */
  background-color: #350505;
}



div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
  /* background: #ffdbdb; */
  background: #341818;
}
fieldset {
  background: #403B3B;
}

#mw-content-text > div:nth-child(5) {
  background-color: #575151;
}


label {
  /* color: #364347; */
  color: #4bd6e5;
}

...

Reviews

No reviews yet.