Board Game Arena

Boardgamearena is definitely one of my best website to go when I want to play game with my friend especially during this pandemic . However playing game for a long period of time during night makes my eye so fatigue. I know that most of the game are designed with the current background so that some components of the game will become hard to see or even invisible under dark mode . I was wondering if the developers some day can make implement an optional dark theme for boardgamearena become possible

Ya I think It'd be great if there is dark mode on the page.

https://github.com/bastien09/bga-dark-theme

I use this one...quite nice...call it purple / dark theme

like it says just click the styles.css then click RAW and CTRL-A to select all text and paste it into that link it gives

A few additions I made so a few more games work in dark mode are:
- Tichu as one team is black and one is red. So all names are green but can still see team colors on right side of player’s boards.
- Red7 couldn’t see current rule
- Splendor couldn’t see number left in deck and number of currency cuz was white (fixed it just now October 17...splendor)
- Lost Cities couldn’t see number of cards remaining in deck till it turned red with 5 left remaining

Easiest way without having to add my modifications is just copy and paste it from pastebin

deleted this link as newest one is at the bottom.

Thank you for posting this!

mrbass wrote: ↑03 October 2021, 14:47 https://github.com/bastien09/bga-dark-theme

I use this one...quite nice...call it purple / dark theme

like it says just click the styles.css then click RAW and CTRL-A to select all text and paste it into that link it gives

A few additions I made so a few more games work in dark mode are:
- Tichu as one team is black and one is red. So all names are green but can still see team colors on right side of player’s boards.
- Red7 couldn’t see current rule
- Splendor couldn’t see number left in deck and number of currency cuz was white (fixed it just now October 17...splendor)
- Lost Cities couldn’t see number of cards remaining in deck till it turned red with 5 left remaining

Code: Select all

.bgagame-tichu #pagesection_gameview .playertablename {
color:green!important;
}

.bgagame-splendor .spl_coinpile_counter {
color:#180605;
}

.bgagame-red7 #current_rule #my_hand #Uncanvas #rest_container,.bgagame-lostcities #lostcities_wrapper #deck_count,.standard_popin .standard_popin_closeicon,.standard_popin .standard_popin_helpicon,#login-menu .login-menu-item,#language_switcher_dropdown .login-menu-item,#mobile-menu .login-menu-item,#friend-menu .login-menu-item,.howtoplay_block_enabled a span,.controlpanelmenu .panelmenuicon,.mobile_version #mobile-menu a,.bgagame-forsale .player_sell_zone span.to_translate span,.bgagame-forsale .player_bid_zone span.to_translate span {
color:#FFF!important;
}

Not sure how I didn't fix Lost Cities deck card count ok this one guaranteed does (October 27). Must of used an older version a few days ago. Sorry.

Easiest way without having to add my modifications is just copy and paste it from pastebin which includes my modifications for:
Splendor, Lost Cities, Tichu and Red7 (any others post here and maybe we can figure it out). Not sure how to get in touch with original author cuz I don't have a github account so seems impossible to contact.

https://pastebin.com/rFBxPnd9

1) scroll to bottom of pastebin link till RAW Paste Data
2) select all CTRL-A or MAC CMD-A(?) can't remember
3) copy and paste it into your Profile | Preferences | Advanced
4) after you hit SAVE click to refresh your browser right away

Note: it doesn't make these forums dark mode...that would have to be a phpBB plugin which isn't on here. Everywhere else though from loading screen of games to Play Now area is dark mode.


Now for those who wish to modify and perhaps contribute to new games or ones that aren't working as there are nearly 400 now.
I use firefox but doesn't really matter as concept is pretty much the same.

In the game either playing or watching a game in progress you can right click and choose Inspect
if it has a span id= or div id= then you use #
if it has a class= then use .

example this is lost cities code
<div id="lostcities_wrapper"> (NOT even sure this is needed or not I mean in the CSS part that is.

<span id="deck_count_nbr">0</span>

.bgagame-lostcities #lostcities_wrapper #deck_count_nbr {
color:#FFF;
}


Splendor just found the class and put a . so it looks like in the code class="spl_coinpile_counter" and as far as discovering which one it is that's kinda like trial and error at least for me but I'm getting better at guessing.
.bgagame-splendor .spl_coinpile_counter {
color:#180605;
}

Thank you mrbass, I added fixes for these games in the latest release of the theme !

Just to be clear...ignore all the modifications, etc. and pastebin just get the latest release that PrCalys put out here

https://github.com/bastien09/bga-dark-theme

Just wanna say so no one is shocked the following don't work in dark mode / dark theme

A) Bugs section -- you can't even enter it with this CSS code enabled. To do so delete it and file your bug then copy / paste it back in.

B) Forums -- phpbb has plugins for which the forum itself must install

C) View replay -- unless it's you and you had it enabled at that time

D) Tutorials