Dark Mode (Roll20 so bright!)

+1

Newer member here but I would have made an account just to upvote this. Every site that you spend any amount of time on needs dark mode, it buuuuurns us, it burns us all!

+1

Oh the sweet release of dark mode..

Nice!

+1

How is this not a thing yet.

+1

Yes, please.

+1

+1

+1

+1 dearly needed

My fear with this suggestion is that it would make Roll20 accessible to a LOT more people, suddenly. There could be a new influx of users and traffic. This site is already having problems with traffic surges lately. Maybe best to hold off on suggestions like this that would help so many thousands of people to access this site and visually perceive how to use this site. Can we handle that many glare-fatigued users at once?

Gold said:

My fear with this suggestion is that it would make Roll20 accessible to a LOT more people, suddenly....

Is that not part of the point? Accessibility is a pretty important issue when considering website design along with ensuring current customers would remain happy. Yes, there would be extra traffic but in the long run that would be a boon. No, there should not suddenly be massive server spikes simply because a dark mode was implemented but there would be people who may be allowed to play a different times of the day due to lack of glare.

For example: Lets say a player has a problem with glare, henceforth they choose to use/play on the website during their daylight hours. With darkmode, there is no longer such a restriction and therefor all 24 (really 16 or so) hours are viable for play potentially shifting traffic about depending on time zones. Additionally those players that truly do need dark mode in a more dire situation likely have done so either via scripts or extensions so... there isn't exactly a huge jump in players that may hamper the experience, if anything there might be a spike in the nocturnal hours for said users.

Generally myself I would appreciate dark mode so I have less eyestrain considering my own group does it in my evening time. I would absolutely love my eyes to get a rest from all the harsh near pure whites, even grey would help but a proper dark mode would be much more appreciated.

+1

Ziechael said:

I'd just add that in recent times Stylish has been known to be compromised with malware/spyware. Stylus is the currently suggested method for altering client side html :)

How do you get stylus to alter theroll20?

See this thread: https://app.roll20.net/forum/post/7841113/show-off-your-style-2-the-stylening/?pagenum=1 for more on Stylus and some sample styles (including a Dark Mode).

that thread is closed so how might i go about making the white parts black and the text white?

This is the theme i used.

@-moz-document url("https://roll20.net/"), url-prefix("https://app.roll20.net/forum"), url-prefix("https://app.roll20.net/campaigns"), url-prefix("https://app.roll20.net/vault"), url-prefix("https://app.roll20.net/private_message"), url-prefix("https://app.roll20.net/playerdirectory"), url-prefix("https://app.roll20.net/audio_library"), url-prefix("https://app.roll20.net/campaigns"), url-prefix("https://app.roll20dev.net/forum"), url-prefix("https://app.roll20dev.net/campaigns"), url-prefix("https://app.roll20.net/users") {
body {
    background-color: #000;
    color: #fff;
}

body.loggedin {
    background-color: #000;
    color: #fff;
}

body.loggedin .container {
    background-color: #333;
    color: #fff;
}

.pictos {
    font-family: "Pictos"!important;
    color: #ccc !important;
}

a.pictos.filtersinfo {
    position: relative;
}

p.masthead_info {
    background-color: transparent;
}

.topbar .row:first-child {
    padding-top: 5px;
    padding-bottom: 5px;
}

.topbar .row,
.topbar .menu-hider,
.topbar .btn-group,
.topbar .full,
.topbar .simple {
    background-color: #999 !important;
}

.topbar .btn.btn-default.dropdown-toggle {
    margin: 0;
    background-color: transparent;
}

.col-md-12.btn-row .btn-group.alertcontainer > button.sitenotifications,
.col-md-12.btn-row .btn-group.alertcontainer > a.btn {
    border: none;
    background-color: initial;
}

.col-md-12.btn-row .btn-group > .btn:first-child:hover {
    background-color: white;
    color: #ed008c;
}

.topbar .row:first-child img {
    height: 40px;
}

.topbar .row:first-child {
    padding-top: 5px;
    padding-bottom: 5px;
    width: calc(100% + 30px);
}

.topbar .row,
.topbar .menu-hider,
.topbar .btn-group {
    background-color: #999;
    border: none;
}

.topbar .btn-default {
    border: none;
    color: #FFF;
    background-color: #414141;
    font-size: 1em;
    padding: 0 5px 0 5px;
}

.container,
.container p {
    background-color: #333;
    color: #ccc !important;
}

.container.topbar,
.container.topbar .row {
    background-color: #999;
    min-height: 3.125em;
}

.chosen-container .chosen-results {
    color: #444 !important;
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
    color: #49abff !important;
}

.tagset .noedit .textboxlist-bit-box-deletable {
    color: black;
}

.menu a:hover {
    background: transparent;
}

.col-md-12 {
    width: 100%;
    background-color: #282626;
    color: white;
}

.forum h3 {
    background-color: #0b3845;
    padding: 5px 10px 5px 10px;
}

.container.globalfooter > div.row {
    background-color: black;
    color: white;
}

.homegamelist .gameinfo {
    font-size: 16px;
}

.title a {
    text-decoration: none;
}

a.userprofile {
    color: #4f91cd;
}

.forum a {
    color: #49abff;
    text-decoration: underline;
    font-weight: normal;
    background-color: transparent;
}

.redactor_editor a {
    color: #49abff;
}

li.active a {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.2em;
    padding: .285em .5em .285em .5em;
}

.redactor_editor,
.redactor_editor:focus {
    background: transparent;
}

.redactor_box .redactor_editor,
.redactor_box .redactor_editor:focus {
    color: black;
    font-size: 15px;
}

.forum .pull-right input {
    width: 210px;
    background-color: whitesmoke;
    color: black;
}

.jumbointro .col-md-4 h2 {
    display: none;
}

.posts .postcontent p,
.posts .postcontent p span,
.posts .postcontent p b,
.posts .postcontent div,
.posts .postcontent div p,
.posts .postcontent div i,
.posts .postcontent div li,
.posts .postcontent span {
    color: #ccc !important;
    background-color: #3b3b3b;
    padding: 2px;
    margin: 0;
}

p b {
    color: unset;
}

.postcontent blockquote {
    background-color: #777;
    padding: 5px 15px;
    margin: 0 0 15px 15px;
    font-size: 85%;
    border-left: 8px solid #a5a5a5;
}

pre * {
    background-color: transparent !important;
}

.chosen-container {
    width: 75%!important;
    height: 4em;
}

.chosen-container-multi .chosen-choices li.search-choice {
    font-size: .85em;
}

li {
    color: inherit;
}

ul,
ol {
    color: #ccc !important;
}

.posts .postcontent,
.posts .post .redactor_box {
    background-color: #3b3b3b;
    color: #ccc !important;
    font-size: 15px;
    font-family: Verdana;
    width: 850px;
    border: 1px solid #a9a9a9;
    border-radius: 5px;
    padding: 5px;
    min-height: 4em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.postlisting > div.meta > div + strong {
    color: #30f079 !important;
    padding: 1px 5px 1px 5px;
    font-size: .85em;
}

.postlisting .meta strong.devposttag {
    color: #ee2b7b !important;
    border: none;
    box-shadow: none;
    font-size: .75em;
}

.postlisting > div.meta > strong:first-child {
    color: #ccc;
}

.breadcrumb {
    background-color: #333;
}

.breadcrumb li {
    color: #79919e;
}

blockquote {
    background-color: #777;
    color: #ccc !important;
    border-left: 1em solid #a5a5a5;
}

.postcontent blockquote {
    background-color: #777;
    color: #ccc !important;
    margin: 0 0 15px 15px;
    font-size: .85em;
    border-left: 1em solid #a5a5a5;
}

.postcontent blockquote p {
    background-color: #5e5e5e;
    color: #ccc !important;
    font-size: .95em;
}

.article-snippet p {
    color: #ccc !important;
}

.container.globalfooter p {
    color: #ccc !important;
}

/* LFG */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #777;
}

.table-striped > tbody > tr:nth-of-type(odd) p,
.table-striped > tbody > tr:nth-of-type(even) p {
    color: #ccc !important;
}

.campaign_details.listing_details div .description p {
    color: #ccc !important;
}

.useroptions > select {
    color: #333;
}

input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: black;
    background-color: grey;
}


.btn-group > .btn:first-child {
    margin-left: 5px;
    padding: 5px;
    background-color: initial;
}

.col-md-12.btn-row .btn-group > .btn:first-child {
    margin: 0 0 5px 5px;
    padding: 2px;
    border: 1px solid #414141;
    border-radius: 10px;
    background-color: gray;
}

.note-editor .panel-default > .panel-heading,
.posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group,
.posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .btn-group .note-btn i,
.posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .btn-group .note-btn span,
.posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .note-btn-group,
.panel-heading .btn-group > .btn * {
    color: #333 !important;
    background-color: #f5f5f5 !important;
    border-color: #ddd;
    display: inline-flex;
    justify-content: center;
}
}

+1

Dark mode would look nice

Please please make a dark mode.

(Also center the damn! OMG... drives me crazy that it is left justified. We all put a lot of time into making maps look really great, set a mood etc... only to have the players, and GM, struggle with the zoom out being way over to the left of the screen, completely ruining the aesthetic.)

+1, My eyes hurt.

+1 for a Dark mode

+1 yea dark mode would be nice

For as many years as Roll20 has been a thing, you'd think it would have a dark mode by now. +1

Mike Watkins said:

that thread is closed so how might i go about making the white parts black and the text white?

Actually, that seems to be a bug with Roll20; if you go to the 2nd page you'll see the thread can still be posted to!

+1 This site really needs a dark mode.

David H. said:

Please please make a dark mode.

(Also center the damn! OMG... drives me crazy that it is left justified. We all put a lot of time into making maps look really great, set a mood etc... only to have the players, and GM, struggle with the zoom out being way over to the left of the screen, completely ruining the aesthetic.)

change option in cog to use moiuse wheel to scroll size instead of pan.,

+10000.

The glaring white, flavorless theme is a total buzzkill. The great part about Roll20 is that it's all HTML-based: adding an optional CSS file isn't that difficult. 

+1 for dark mode

+1. Gods above, please.

+1

I do think I would like a dark version and I also think its only beneficial as for those who do not want it do have to turn it on, I would say do it only if you could spare the work. but if you do you have my thx.

+1

I play with people who have light sensitivity. A dark vision or at least a decrease in the brightness would be outstanding.

We're still rolling out incremental updates to pages, and as we implement Text Chat and Page Menu updates as mentioned in the Pro Mapping thread, we'll be closer to achieving this option.

+1, I too would love a Dark mode, my players are muchly demanding it!

+1

yeah

+1 if they get dark mode ill use roll20 more often. heck ill even upgrade my account. i wonder if Covid has given them enough time to make it ;)

+1 for dark mode!

Kenton said:

We're still rolling out incremental updates to pages, and as we implement Text Chat and Page Menu updates as mentioned in the Pro Mapping thread, we'll be closer to achieving this option.

Anyone here able to translate or interpret any sort of timeline from that post, or the linked thread?

I do not understand most of the words in Kenton's sentence, TBH. 

As a user with visual impairment getting worse over the years of this accessibility feature request, who now needs this feature to continue using this site longer than a few minutes without relying on 3rd party extensions to make Roll20 viewable, this thread reads like "Hi can you install a ramp for accessibility to get into your business?"

Why yes, after we roll out a Section 22 (???), we will implement a 1039 (???) and a new carpet update as mentioned before, and then we will be closer to letting people like you back in.

Just wondering, rough estimate, like when do we think that roll20 can please change the background to a more dim color. Regardless of the "Page Menu" and what-not (have we been explained how that is related to this or why that precludes dark mode request?), just Kenton could you ask them darken the background color by a little bit, at least in the meantime?  Please please please.

Something funny about the Page Menu --- it actually has & always had a nice dim gray background color tone.

+1 the glare hurts my eyes

+1 to dark mode!

Pretty sure this has enough votes to happen. +1 vote.

Great idea, even reading the forum gives me a headache, although it's so bright its a handy light for my face when streaming video. I guess thats not an intended feature.

I'd love a dark mode built in if it's on the table.  The dark styles I've used seem to make the map stand out a little more too which would be nice.

+1 please :D

I can get a dark mode with 3d party sources but Roll20 is going on about this since forever and make it sound like its some unsolvable problem. Can you please start to take this serious? It's a real accessibility need for many and not just "nice to have"

Bump for timeline please! I already voted for this :)

Can we have a tentative timeframe to set expectations please? No need to meet it, but an estimate would be nice.

+10000 Need MOAR Dark mode

+1

PLUS. ONE. MY EYES BLEED AFTER DM-ING 3+ HRS CAUSE ITS SOOOO BRIGHT!