Dark-Colored Forum Skin for Low-Light Reading?


Website Feedback


2 people marked this as a favorite.

While I realize that this might be asking a bit much, I also realize that some of the posters here have created scripts that are able to extend the functionality of the messageboards. Sooo...

What I'd like to know is if there is a way to apply a dark-colored theme/skin/style-sheet to the Paizo site. (i.e. a dark-grey background with light-grey text)

I work 3rd shift and generally prefer NOT to work in an environment with lots of bright lights. However, reading a bright-white screen in a more dimly lit room is very hard on the eyes due to the dramatic difference in contrast levels.

I'll understand if it's too much work for Vic and company, but are there any means by which an individual user could set the site to use a different style-sheet with a color palette on their own system?

If it matters, Chrome and the default browser on the Motorola Droid are the browsers on which I would be looking to implement such a change.


I definitely support this, for some people white text on dark background is simply easier to read than normal black text on white background. Definite thumbs up if it can be done without too much trouble.


I'm going to try and take a stab at experimenting with some stylizers for Chrome, but I'm kind of hoping that someone has already figured this out. i.e. Hoping to avoid reinventing the wheel if someone already has...

EDIT: The "Stylish" extension for Chrome can indeed preempt the site's default stylesheet. Looks like it will mostly be a matter of going thru all the color codes and styles by hand now. At least it's possible though. If no one else comes forward with a ready-made solution, I'll drop mine in once it's done...

EDIT 2: Hmm, well I can get the forums darkened up pretty well, but unfortunately the nav boxes at the sides of the page (Links, Shop, Messageboards), have the color codes for those tables definied explicit ly in the page's HTML. Also most of the graphics are GIFs with a white background rather than transparent PNGs. In any event, it looks like a user-made solution will look fairly rough unless a lot of elements are left unmodified or changes are made to make the site more user-mod friendly.


1 person marked this as a favorite.

Alright, well for now I've gotten things looking a bit more pleasing to my low-light accustomed eyes. If any of you want to mess around with this a bit more, here's what I've got so far...

Darker Paizo Theme

To Configure:

  • In Chrome install the extension "Stylish"
  • From your Extensions screen, click to edit the Options for Stylish
  • Create a new style
  • Fill out the configuration info like so
  • Copy and paste the contents of this file into the code section
  • Save

Now the reason I didn't apply it to just http://paizo.com is because that will reskin the PRD site. It is possible to rollback the changes specifically for that URL, but that's more work than simply clicking the Paizo link at the top of the site so that the URL changes to http://paizo.com/paizo. ;)

Anyway, if anyone wants to put a bit more effort into this then cool. For now this should get me by at least.


I'm seconding (or possibly thirding) this motion. Even a tan background with black text would relieve the glare of the solid white.

Scarab Sages

I just fiddled around with the Stylish add-on for Firefox, and the only extra thing I needed to do with your script was to add a

Quote:
@-moz-document url-prefix(http://paizo.com/paizo), url-prefix(http://paizo.com/people), url-prefix(http://paizo.com/cgi-bin), url-prefix(https://secure.paizo.com/) {

at the top of the file and a

Quote:
}

at the end of the file because Firefox's version of Stylish does not have a separate configuration box for the domains or urls for the skin to be applied to.

Thank you very much.

EDIT: Added /people to the list, and probably should add /store as well.


Good call on the /people, /store, and secure additions. Glad to see it works in FF with minimal trouble. :)


So, using Laith's and Elyza's fixes, I created the style in Firefox (the latest edition). It works fine EXCEPT in the New Post or Reply window. There, I get the stark white background, with the light grey text in an oversized Verdana. Perhaps there is something twitchy in my particular browser settings and it is not a HTML code problem?


1 person marked this as a favorite.

I saw this topic and thought something COMPLETELY DIFFERENT....but this is easier on the eyes, yes.


For those of you who use Opera:

View->Style-> High Contrast (W/B)

And you have white on black.

RPG Superstar 2011 Top 4

Are you on a Mac? Press Control+Option+Command+8

Though this does make avatars terrifying.


Well, I see the same grey on white textarea, select, and input boxes when I install this to FireFox 3.6.6 (DL'd it just to test this). From what I've seen in searching google, it appears that this wasn't a problem in FF2, but since FF3 came out, it kinda fubar'd things.

Hate to tell you to use a different browser than the one you like, but this does work properly in the version of Chrome I'm running at least. Sorry.


Freehold DM wrote:
I saw this topic and thought something COMPLETELY DIFFERENT....but this is easier on the eyes, yes.

You also read "dark-colored foreskin" when quickly scanning the boards?


1 person marked this as a favorite.
yoda8myhead wrote:
Freehold DM wrote:
I saw this topic and thought something COMPLETELY DIFFERENT....but this is easier on the eyes, yes.
You also read "dark-colored foreskin" when quickly scanning the boards?

Oh. God. Now I can't get that out of my head.

"dark-colored foreskin". *shudder*

On the bright side, that would be a kickass name for a garage band.


Since some folks were asking about it in another thread, and some enterprising folks actually did a forum search, I figured I should probably update the download URL to something that isn't broken. ;)

Link: Paizo Dark Theme

Note, if you go straight to Paizo.com you won't see a change. It's only after you enter the store, forums, campaigns, etc. that it will take place. I'd love to just have it do everything at paizo.com, but that ends up botching the PRD. (If someone can figure out a better workaround for that, please let me know.)

Enjoy!

Edit: Added screenshots for those of you who want to see what it looks like.


Laithoron,

Can you help me with Stylish for Firefox?

I want to change the color of the threads that do not have new posts in them. It looks like their is a style sheet:

http://paizo.com/include/stylesheet-2004.css

With the following class which defines the color:

.messageboardListingNoNewPosts a:link {
font-size: 12px;
color: #706AB3;

I'd like to make it almost anything else so it stands out from the other thread titles, and I just can't figure out how Stylish works. I do have it installed, but this old, retired, main-frame programmer is lost in all the details.

-- david
Papa.DRB


David: I wasn't able to change the font-color for those threads (i.e. threads you have read at least once yet have no new replies), but I was able to change the background color behind the text.

If you add the following section to my code, it will contrast such threads in dark-grey against the black background. If you prefer another color, just look up the hexadecimal code for that color using google (e.g. purple hex code), and substitute that value in place of 333333.

Hope this helps.

Code wrote:

.messageboardListingNoNewPosts a:link {

background-color: #333333 !important;
}


1 person marked this as a favorite.

Awesome!!!!!

Thanks,

-- david
Papa.DRB


Update: Finally figured out how to reskin the alternating colors on the My Downloads page. You can download the new version below and simply copy/paste the contents of the text file over your existing config. No URL changes are needed:

Link: Paizo_Dark_Theme.txt

Added wrote:

.evenOdd:nth-child(odd) {

background-color: #353535 !important;
}


This is much better, thank you!

Is there any way to dim the reply box? It is still the very abrasive bright white.


Not in FireFox, although it will be dark grey in Chrome with these settings.


3 people marked this as a favorite.

Bumping this thread, as I wish the site will get official dark mode, as white backgrounds are just obnoxious.

Grand Lodge

Adventure Path Charter Subscriber; Pathfinder Starfinder Adventure Path Subscriber

WhiteWeasel on white background is indeed hard on the eyes.

-Skeld


Skeld wrote:

WhiteWeasel on white background is indeed hard on the eyes.

-Skeld

Yeah, I use those flexible sunglasses you get when you get your eyes dilated as a workaround, as my monitor on lowest still shows white as incredibly bright.

Silver Crusade

2 people marked this as a favorite.
Pathfinder Adventure Path Subscriber

Dark mode would be one of great things Paizo could do while dragging the website kicking and screaming out of early 00s and into the glorious XXI century. I hope that the War of the Crown AP is a metaphor for what will happen to this lovely, but desperately outdated, place.

Web Production Manager

1 person marked this as a favorite.

I could have sworn this thread had received an employee response, but I guess I was wrong. We do not have a "dark mode" planned and are unlikely to implement those kinds of customization tools into our forums.

Silver Crusade

Pathfinder Adventure Path Subscriber

We'll just party like it's 1999 and Limp Bizkit is the new hawt thing, then! :)

Chocolate starfish! And hot dog flavored waaaateeeeeeeeeeeer!!!

Web Production Manager

I'm going to have to strongly disagree that black on white is a "dated" web practice. It comes down to accessibility to the widest range of visitors and the amount of resources available to create additional features. I think folks can agree we have bigger fish to fry than the color scheme :)


1 person marked this as a favorite.
Pathfinder Adventure Path, Lost Omens, Rulebook, Starfinder Roleplaying Game Subscriber

*Serves up pan-fried PRD in lemon and basil, with cheese sauce for dressing*

Silver Crusade

Pathfinder Adventure Path Subscriber
Chris Lambertz wrote:
I'm going to have to strongly disagree that black on white is a "dated" web practice. It comes down to accessibility to the widest range of visitors and the amount of resources available to create additional features. I think folks can agree we have bigger fish to fry than the color scheme :)

Oh yes, you do.

*goes off to hunt for pixels on his smartphone's iteration of Paizo.com*

Dark Archive

2 people marked this as a favorite.
Pathfinder Roleplaying Game Charter Superscriber
Chris Lambertz wrote:
I'm going to have to strongly disagree that black on white is a "dated" web practice. It comes down to accessibility to the widest range of visitors and the amount of resources available to create additional features. I think folks can agree we have bigger fish to fry than the color scheme :)

Black-on-white is not dated, but it is both eyestrain-inducing and battery-drain-inducing for mobile devices. Dark themes are one of the things I always see requested for any mobile site, mobile app, or even desktop app, and more and more apps and sites are responding. Paint.NET just added one a couple of weeks ago, Adobe Suite has had one for almost two years now, and even Windows 10 and Office 2016 have dark themes.

Ideally, eventually, if you ever decide to do anything along these lines, I'd think something like ArsTechnica's (arstechnica.com) options for it would be awesome. There's a quick, easy little hamburger menu (the "three lines" button) for the site, with black-on-white and white-on-black as theme choices.

Community / Forums / Paizo / Website Feedback / Dark-Colored Forum Skin for Low-Light Reading? All Messageboards

Want to post a reply? Sign in.
Recent threads in Website Feedback