Dark theme for GBA website : Custom CSS style working since 04/2022, still good in 10/2022

[SuperCorv0]

Hello fellow dark cultists,


I wrote a dark mode CSS code to put in https://boardgamearena.com/preferences?section=advanced

Some minor texts and links can lack some contrasts, but it cover almost everything (aside the forum, as it's a completely different html structure).

Of course after copying that, you need to save it, then refresh your browser cache about GBA stylesheet (Shift+F5 or Ctrl+F5 or Ctrl+R depending the browser you use)

Code: Select all

html,html.bga-white-background,html .bg-bga-whitebg,html .comment,html .portlet__content,html .tips__content,html .wannaplay_item,html .gametable,html .pagesection,html .pageheader,html .chatwindowlogs,html .newbgatable th,html .newbgatable td,html .standard_popin,html .pagesection__content,html .pagesection__content .controlpanelmenu,html .bga-popup-modal__content,html .bga-game-panel__content-wrapper,html .bga-page-section > .bga-page-section__content {
background-color:#222;
color:#bbb;
}

html,html #page-title,html .current_player_is_active #page-title,html .gamestate_gameEnd #page-title,html .roundedbox,html .roundedboxinner,html .pagesection__title,.portle__title,.portlet__title,html .player-board {
background-color:#333;
color:#ccc;
}

html #headlines-module #follow_us_portlet a span,html .agenda-tournament-list__title,html .agenda-tournament-list__subtitle,html .agenda-tournament-list__players-num,html .agenda-tournament-list__date,html .text-gray-600,html #connect_status_text,html .fa.panelmenuicon,html .controlpanelmenu .subtitle,html .text-black {
color:#ccc;
}

html .standard_popin_closeicon,html .standard_popin_closeicon:hover {
color:#ccc!important;
}

html,html #topbar_content,html .bga-menu-bar,html .bga-menu-bar.svelte-1wkvhtp.svelte-1wkvhtp,html .bga-menu-subbar.svelte-1wkvhtp.svelte-1wkvhtp,html #topbar,html .standard_popin {
background-image:linear-gradient(90deg,#222,#111,#222);
}

html .bgabutton_gray,html .bgabutton_gray:hover,html .notouch-device .bgabutton_gray:hover {
background-image:linear-gradient(90deg,#555,#222,#333);
color:#eee;
}

html .bga-game-browser__panel,html .bga-game-browser__panel.svelte-x617ll.svelte-x617ll,html .pagesection h2,html .pagesection h3,html .portlet h2,html .portlet h3 {
background:linear-gradient(0deg,#222,#111);
}

SelectorsForTheCrewDeepSea,html #mission-overview #mission-overview-counter-wrapper,html #popin_showTour,#popin_showTour #tour-slide-footer {
background-color:#234;
color:#ddd;
}

html #log_history_status_text,html .warning_high,html #table_players_warnings,html .chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner,html #head_infomsg,html #loader_mask,html .whiteblock,html #gameUpdated,html .bg-bga-graybg-2 .text-gray-600,html .notification-unread,html .bga-hover-for-list:hover,SelectorsForKingdomBuilder,html .objective,SelectorsForTheCrew,html #thecrew-table {
color:#111;
}

.bga-link,span.gamename,.bga-filter-tag--clickable,.bga-link-inside a:not(.playername,.gamename,.bgabutton),a.gamenamedisplayed {
filter:invert(10%) brightness(1.4);
}

html body .prestigerank .bga-link {
filter:none;
}

html .bga-menu-bar-items--premium-emblem {
display:none;
}

html .bga-page-section > .bga-page-section__content,html .extended_message_hidden::after,html .comment {
background-image:none;
}

Please feel free to improve it or adapt it to your taste, and share your version. Thanks !

[Yorgad]

https://boardgamearena.com/forum/viewto ... =3&t=22638

And

https://boardgamearena.com/forum/viewto ... =3&t=18654

Sadly most games are not developped with a dark mode compatibility in mind, requiring extensive reverse-engineering css tweaking.
Don't get me wrong I'd love to have a dark mode enabled, but I fear custom css solution is just a temporary a fix until dark mode is implemented as a native feature...

Cheers,
Y.

[SuperCorv0]

Hi, I already tried the code in the links you gave, and didn't worked for me. Probablry ecause of course, BGA devs change theirs html structures and class / id names, but also because the selectors I saw were kinda clunky, too heavy and too detailed.

That's why I posted my vresion (in a new topic because the other was locked).

Of course it can be optimised, some selectors are clunky (grey buttons for example), you can find some links colors there and there who are not enought contrasted, but as for now they works on all the main pages and menu, with very few generic selectors written.

Less is More, as web designers says

I don't touch CSS who can mess up games, and tested with ~10 games, no problems found for now.

Of course a native Dark move feature would be the best. That would imply a massive core stylesheets rewrite It's not the point of my post, anyway.

[fruktansvärt]

interesting!
so this only affects the main area of the site, not the individual games?

[SuperCorv0]

Not exactly. it affect the game default background (dark nuances instead of wood plank), and texts with default colors (so black text not in a special background or layer should turn into light-gray). Except if the game developer force the text color in black in his game, that should work. If not, it's probably an issue with how the game was coded.

Even with that, since there is like 50 shades of gray in the default BGA theme, and i don't use totally-black background neither totally-white text color, that should be enough readable, thus make the lack of contrast inconfortable. If you see a game where a problem occurs, report it on this thread, I will see what can i do.

Anyway it cost nothing to try this theme template

In case you want to revert back, the link to "reset by default" doesn't work well sometimes, so I suggest you put this instead in the textarea :

Code: Select all

html {}

But since i did that, i never had any reason to turn it back.

[Nicciik]

There is no reset HTML in the box and I see no link, how do i reverse it? Reset to original

[Joltarin]

There is no reset HTML in the box and I see no link, how do i reverse it? Reset to original

Simply select all of the code in the box and press the backspace or delete key and then click the save button.

[Blacktango]

And then, hard refresh your page with Ctrl + F5, to clear the cache.