Another dark theme for Boardgamearena

[Coin-coin le Canapin]

Hi!
I saw that a dark theme already exists.

Here's mine. A bit different, inspired by Discord's colors. You can load it by clicking this link: https://boardgamearena.com/?use_custom_style=14779237

Quick link to disable: https://boardgamearena.com/?use_custom_style=0

Home page:


Games page:


Player profile page:


I didn't change anything for the game pages except the background and the "white blocks". I don't know every element of every game and I don't want my style to potentially make some information unreadable.


css:

Code: Select all

body {
background:url(https://cdn.discordapp.com/attachments/334713796193026049/710093648561176606/bgadark.jpg);
}

.whiteblock {
background:rgba(255,255,255,.2);
}

body:not(.game_interface) {
background-position:top center;
color:#dcddde;
}

body:not(.game_interface) #topbar {
background:#1d2023;
}

body:not(.game_interface) #pageheader,body:not(.game_interface) .pageheader {
background-color:#35373c;
}

body:not(.game_interface) .pageheader_menu_verylarge .pageheader_big_switch {
background:#35373c;
border:none;
color:#dcddde;
}

body:not(.game_interface).notouch-device .pageheader_menu_verylarge .pageheader_big_switch:hover,body:not(.game_interface) .pageheader_menu_verylarge .dropdown_expanded .pageheader_big_switch {
background:#404347;
color:#FFF;
}

body:not(.game_interface) .switcher_zone {
background:#272a2f;
border:none;
color:#dcddde;
}

body:not(.game_interface) .tabbed_slider_bar_left,body:not(.game_interface) .tabbed_slider_bar_right,body:not(.game_interface) .pagesection .tabbed_slider_bar_right,body:not(.game_interface) .pagesection .tabbed_slider_bar_left {
border-top-color:#272a2f;
}

body:not(.game_interface) .pageheader_menu_verylarge .pageheader_big_switch_dropdown .pageheader_menuitem.pageheader_menuitemselected {
background:#35373c;
color:#dcddde;
}

body:not(.game_interface) .pageheader_menu_verylarge .pageheader_big_switch_dropdown .pageheader_menuitem {
background:#404347;
color:#dcddde;
}

body:not(.game_interface) .gametable {
background:#404347;
border:none;
box-shadow:0 3px 5px 0 #1d2023;
}

body:not(.game_interface) .gametable_separator {
background:transparent;
}

body:not(.game_interface).notouch-device #gamelobby-module .gametable:hover {
border:none;
box-shadow:0 0 0 3px #dcddde;
margin:inherit;
}

body:not(.game_interface) .wannaplayauto_button {
box-shadow:none;
}

body:not(.game_interface) .active_player_left {
border-color:transparent;
}

body:not(.game_interface) .newsabstract .postlink {
color:#00b0f4;
}

body:not(.game_interface) .post {
border-color:#1d2023;
}

body:not(.game_interface) a.bgabutton_gray:link,body:not(.game_interface) .bgabutton_gray {
color:#dcddde;
border-color:#dcddde;
}

body:not(.game_interface) .bgabutton_blue:link {
background:#7289da;
color:#FFF;
}

body:not(.game_interface) .pageheader_menu {
background-color:#272a2f;
border-color:#1d2023;
}

body:not(.game_interface).notouch-device .pageheader_menuitem:hover .pageheader_menuitembar {
background-color:#7289da;
opacity:1;
}

body:not(.game_interface) .row-data {
border-color:#8e9297;
}

body:not(.game_interface) .row-data .row-label {
color:#8e9297;
}

body:not(.game_interface) .extended_message_hidden:after {
display:none;
}

body:not(.game_interface) #topbar a,body:not(.game_interface) .controlpanelmenu .subtitle,body:not(.game_interface) a.bgabutton_gray:link:visited,body:not(.game_interface) .bgabutton_gray:visited,body:not(.game_interface) .pageheader_menuitem,body:not(.game_interface) .player_in_list .player_baseline,body:not(.game_interface) #topbar #login-menu a,body:not(.game_interface) #friends_icon.friendsOnline #friends_baseicon {
color:#dcddde;
}

body:not(.game_interface) #topbar a.navigation-button-active,body:not(.game_interface) #topbar a:hover,body:not(.game_interface).notouch-device #topbar a.menu_item:hover {
color:#FFF;
background:#404347;
}

body:not(.game_interface).notouch-device .pageheader_menu_verylarge .pageheader_big_switch:hover #switcher_zone,body:not(.game_interface) .pageheader_menu_verylarge .dropdown_expanded .pageheader_big_switch #switcher_zone,body:not(.game_interface) .pagesection,body:not(.game_interface) .portlet,body:not(.game_interface) .tips {
background:#35373c;
}

body:not(.game_interface) .tabbed_slider_bar_barcenter,body:not(.game_interface) .pagesection .tabbed_slider_bar_barcenter,body:not(.game_interface) .sectiontitle_dropdown_menu {
background:#272a2f;
}

body:not(.game_interface).notouch-device .login-menu-item:hover,body:not(.game_interface) .bgabutton_blue {
background:#7289da;
}

body:not(.game_interface) #headlines-module #follow_us_portlet a span,body:not(.game_interface) #news-module #follow_us_portlet a span,body:not(.game_interface).notouch-device .pageheader_menuitem:hover,body:not(.game_interface) a:link,body:not(.game_interface) a:visited,body:not(.game_interface).notouch-device a:hover,body:not(.game_interface) .pagesection h2 a,body:not(.game_interface) .portlet h2 a,body:not(.game_interface) .pagesection h3 a,body:not(.game_interface) .portlet h3 a,body:not(.game_interface) #topbar #login-menu #connected_username,body:not(.game_interface) #friends_icon .notification_nbr_icon {
color:#FFF;
}

body:not(.game_interface).notouch-device .gamelist_item:hover,body:not(.game_interface) .comment {
background:#404347;
}

body:not(.game_interface) .playername,body:not(.game_interface) a:link.playername,body:not(.game_interface) a:visited.playername,body:not(.game_interface) #friend-menu .playername {
color:#7289da;
}

body:not(.game_interface) .pagesection h2,body:not(.game_interface) .portlet h2,body:not(.game_interface) .pagesection h3,body:not(.game_interface) .portlet h3,body:not(.game_interface) #login-menu,body:not(.game_interface) #language_switcher_dropdown,body:not(.game_interface) #mobile-menu,body:not(.game_interface) #friend-menu {
background:#272a2f;
color:#dcddde;
}

body:not(.game_interface) .board_fake_input,body:not(.game_interface) .bga_big_input {
background:#dcddde;
}
 

[Jick01]

Looks nice thank you !

[bananasplay]

Hi!
I saw that a dark theme already exists.

Here's mine. A bit different, inspired by Discord's colors. You can load it by clicking this link: https://boardgamearena.com/?use_custom_style=14779237

Thanks for sharing! I've never used the custom styles feature before, but your offering has prompted me to give it a go. We'll see if I make it a permanent switch. :-)

[Coin-coin le Canapin]

I know that some buttons have a barely readable grey text on a white background when we move the mouse over them, I'll fix that soon.

[MacB]

The background won't change?