Dark mode themes (CSS)...here you go

Discussions about BGA (all languages)
Forum rules
Warning: challenging a moderation in Forum = 10 days ban
More info & details about how to challenge a moderation: viewtopic.php?p=119756
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Dark mode themes (CSS)...here you go

Post by dapotamus »

Hi everyone! I've been working on a set of custom dark mode themes for BGA for awhile and I think they're pretty solid. You're welcome to give them a try. Here's a sample dark mode screenshot from 7 Wonders Duel to give you an idea of what these themes do:

darkmode_sample.jpg
darkmode_sample.jpg (230.6 KiB) Viewed 8933 times

Compatibility

Compatibility with all pages across BGA is my highest priority. I've verified that the themes works for all Premium games, all popular and award-winning games, and dozens more. They also correct a number of CSS issues on the main site and improve the look and feel of many games. If you find any issues, please report them to me here!

Installation
  1. Choose one of the theme variants below: My "official" #1–#4, or one of the contributed variants
  2. Follow the listed installation directions
  3. After installation, navigate to https://boardgamearena.com. Voila!

Variant #1: Black dark mode

bga_black.jpg
bga_black.jpg (223.97 KiB) Viewed 9003 times

Installation
  1. Click the "SELECT ALL" link above the CSS code below and then press Crtl+C (Windows) or Cmd+C (Mac).
  2. Navigate to https://boardgamearena.com/preferences?section=advanced
  3. Paste the copied CSS from step #1 into the text box there
  4. Hit the Save button.
  5. Navigate to https://boardgamearena.com. Voila!*

Code: Select all

#overall-footer::after{font-family:Monaco,monospace;white-space:pre;display:block;padding:1em;color:#999;text-align:center;font-size:8pt;content:"Reminder: You are using custom Dark Mode CSS Version 2.1. Licensed under CC BY-NC-SA 4.0. See https://boardgamearena.com/forum/viewtopic.php?f=3&t=18654 for details."}html{background:radial-gradient(ellipse /**/at /**/top, #555555, #0a0a0a),radial-gradient(ellipse /**/at /**/bottom, #555555, #0a0a0a),url(https://wallpaperaccess.com/full/781329.jpg);background-attachment:fixed;background-position:center}#topbar{background:#222}#async_table_banner{color:#fff;background-color:#e00}#async_table_banner a{color:#0cc}#async_table_banner a:link,#async_table_banner a:visited{color:#0cc}#page-title{background-color:rgba(88,88,88,.75) !important;color:#fff}.current_player_is_active #page-title{background-color:#777}.pageheader{background-color:transparent;color:#fff}.pageheader_menuitembar{border-radius:0 0 6px 6px}.newbgatable th{text-transform:capitalize;color:#fff}.newbgatable td{color:#fff}.whiteblock{background:rgba(255,255,255,.3);background:rgba(0,0,0,.2);color:#fff}.gametable{border:1px #000 solid;background-color:#444;padding-top:10px;padding-bottom:10px}.pagesection{background-color:rgba(64,64,64,.5);color:#fff}#pagesection_about{color:#fff}.pagesection h2,.portlet h2,.pagesection h3,.portlet h3{background:linear-gradient(#888888, #777777);color:#111}a.bgabutton_gray{background-color:#fff}span.bgabutton_gray{background:#bbb}.bgabutton_blue{background:#71b648}.pageheader_menu_verylarge .pageheader_big_switch{background-color:#333;color:#fff}#table_warnings{color:#000}.tabbed_slider_bar_left,.tabbed_slider_bar_right{border-top:28px solid #444}.tabbed_slider_bar_barcenter,#pageheaderlobby{background:#444}.switcher_zone{background:linear-gradient(#333333, #111111);border-left:1px solid #555}.switcher_zone .fa-caret-down{text-shadow:1px 0 1px #777;color:#333}.icon_plus span{top:-3px !important}.statstable th{background-color:#222}.gametable_separator{background-color:#222}.playernotification_not_read{background-color:#edbab7}.dijitInputInner{background-color:#222 !important;color:#fff}.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle{color:unset}.dj_webkit .tundra .dijitTooltipContainer{box-shadow:0 5px 10px #111}.dijitPopup>a.bgabutton_gray,.dijitPopup a.bgabutton_gray{color:#111}.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray{border:1px solid #111;color:#111}#welcome-module .post{border-bottom:1px #666 solid}#welcome-module .comment{background-image:none;background-color:rgba(245,245,245,.15);border-radius:6px}#welcome-module .extended_message_hidden:after{left:67px;background:linear-gradient(to /**/bottom, rgba(32, 32, 32, 0), #202020)}#welcome-module .board_fake_input{background-color:#222;border:1px solid #b3b3b3}#gamelist-module select{background-color:#222;color:#fff}#gamelist-module .game_category_more_wrap{display:none}#gamelist-module #col_filter_gamename{margin-right:50px}#gamelist-module .gamelist_item{box-shadow:none;margin-right:30px}#gamelist-module .gamelist_item .game_box_image_wrap{padding:10px;border-radius:8px;border:2px solid #111;background:radial-gradient(ellipse /**/at /**/center, #555/**/ -50%, #191919)}#gamelist-module .gamelist_item .game_box_image_wrap img:hover{transform:scale(1.05)}#gamelist-module .gamelist_item .game_box_image_wrap .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelist-module .gamelist_item{zoom:110%}#gamelist-module .gamelist_itemrow{overflow:visible}#gamelist-module .gamename{font-size:20px;position:relative;left:10px;top:2px;color:#666}.notouch-device #gamelist-module .gamelist_item:hover{background-color:transparent}.notouch-device #gamelist-module a:hover{color:#666;text-decoration:none}.notouch-device #gamelist-module a .gamename:hover{color:#666;text-decoration:underline}#gamepanel-module .icon16_duration{filter:invert(1)}#gamepanel-module .challenge_image{filter:grayscale(1)}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch{background-color:#565656}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover .switcher_zone,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch .switcher_zone{background:linear-gradient(#c2c2c2, #efefef)}#gamelobby-module .pageheader_menu #lobby_friend_list_state>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invited_friend_section>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invite_more_friend_button .lobby_invite_friend_avatar,#gamelobby-module .pageheader_menu #lobby_add_friend_button .lobby_invite_friend_avatar{background-color:#222}#gamelobby-module .game_box_wrap{margin-right:20px;border:2px solid #111}#gamelobby-module .game_box_wrap.tables_available{border:2px solid #000}#gamelobby-module .game_box_wrap .wannaplay_item{background:radial-gradient(ellipse /**/at /**/center, #555555 /**/ -50%, #191919)}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask{left:unset;right:-20px;top:40px}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask .wannaplay_mask_button.del_favorite{background-color:#444;border:1px solid #000}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_image_wrap{position:absolute;top:7px;zoom:120%}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename{top:250px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner{width:90%;text-align:center;left:8px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:link,#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:visited{color:#666}#gamelobby-module .game_box_wrap .wannaplay_item .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelobby-module .wannaplayauto_play_zone_content{display:none}#gamelobby-module .wannaplayauto_play_zone_content .wannaplayauto_button{box-shadow:0 5px 10px 0 rgba(0,0,0,.7)}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:15px}#gamelobby-module .tiny_verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:2px;left:2px;zoom:unset}#table-module .pageheader{background-color:rgba(0,0,0,.4);color:#fff}#table-module .game_progression_bar{top:inherit;border:1px #999 solid}#table-module .whiteblock{background-image:none;background-color:#444;border-radius:10px}#table-module .active_player_left{border-right:1px #666 solid}#player-module #pagesection_lastresults .post{border-bottom:1px #111 solid}.game_interface #spectatorbox{padding-left:8px}.game_interface #not_playing_help{color:#0cc}.game_interface #logs{overflow:scroll;scrollbar-width:none;-ms-overflow-style:none}.game_interface #logs::-webkit-scrollbar{width:0;height:0}.game_interface #logs .log .roundedbox{background-color:rgba(222,222,222,.65);border-radius:5px}.game_interface #logs .playername[style$='"#3ea7c6;"']{text-shadow:-1px -1px 0 #444,1px -1px 0 #444,-1px 1px 0 #444,1px 1px 0 #444}.game_interface #logs #seemorelogs{background:linear-gradient(0deg, black, transparent)}.game_interface .player-board{background:#eee}.game_interface .player-board.spectator-mode .roundedbox_topleft,.game_interface .player-board.spectator-mode .roundedbox_topmain,.game_interface .player-board.spectator-mode .roundedbox_topright,.game_interface .player-board.spectator-mode .roundedbox_main,.game_interface .player-board.spectator-mode .roundedbox_bottomleft,.game_interface .player-board.spectator-mode .roundedbox_bottommain,.game_interface .player-board.spectator-mode .roundedbox_bottomright{background:unset}.game_interface .player-board.spectator-mode .roundedboxinner{left:5px}.game_interface .player-name>a[style="color: #ffffff"]{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span:first-of-type{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span[style$='"#000000;"']:first-of-type{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}.game_interface #pagemaintitletext>span[style$='"#008000;"']:first-of-type{text-shadow:-1px -1px 0 #030,1px -1px 0 #030,-1px 1px 0 #030,1px 1px 0 #030 !important}.game_interface #pagemaintitletext>span[style$='"#0000ff;"']:first-of-type{text-shadow:-1px -1px 0 #116,1px -1px 0 #116,-1px 1px 0 #116,1px 1px 0 #116 !important}#community-module .col-md-6 .tips{background-color:#202020}#chatbar .dropshadow{background-image:none}#chatbar .msgtime{position:unset;color:#888}#chatbar .chatwindowexpanded{background-color:#eee}#chatbar .chatwindowcollapsed{border-radius:7px 7px 0 0;box-shadow:0 0 7px 5px rgba(0,0,0,.3);background-color:rgba(255,255,255,.9)}#chatbar .chatwindowcollapsedtitle{top:6px;left:9px}#chatbar .chatwindowlogs{background-color:rgba(0,0,0,.66);box-shadow:0 0 7px 5px rgba(0,0,0,.5)}#chatbar .chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner{background-color:rgba(255,255,255,.7);color:#000}#chatbar .chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner{background-color:rgba(100,100,100,.7);color:#fff}.cantstop_asmodee #dicechoices{color:wheat}#coloretto_wrapper #round_status{color:#fff}#coloretto_wrapper #deck_count{color:#fff}#game_play_area .lettertycoon_area{background-color:rgba(255,255,255,.2);border:none;color:#fff}#game_play_area .lettertycoon_area_label{color:#fff}#game_play_area .lettertycoon_deck_info{color:#fff}#playArea #down #decksizetext{color:#fff}#play-area #cards #cutCardSpace{color:#fff}#decks_and_available_achievements{color:#fff}#sevenwonder_wrap #card_rotation_wrap{color:#fff}#sevenwonder_wrap #card_rotation_wrap #handrotation{filter:invert(1)}#game_play_area_wrap #discard_count{color:#fff}#game_play_area_wrap #trees h3{color:#fff}#hanabi_prefs_button{background-color:#ccc}#betpanel+h3{color:#fff}#myhand+h3{color:#fff}#card_played{color:#fff}#gosu_wrapper h3{color:#fff}.xdu_notifTop{color:#fff}#recruitment{color:#fff}br.clear+h3{color:#fff}#deck_wrap{color:#fff}#table_setup{color:#fff}#flt_counters{color:#fff}#kahuna_right_pane{color:#fff}#krosmaster_interface #master_list .master{-webkit-box-shadow:4px 4px 37px 0 #000;-moz-box-shadow:4px 4px 37px 0 #000;box-shadow:4px 4px 37px 0 #000}#krosmaster_interface .playerstock{background:rgba(255,255,255,.2)}#krosmaster_interface .playerstock h2{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#krosmaster_interface .playerstock h2[style$='"#6f1e6b"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hints_wrap h3{color:#fff}#hints_wrap #deck{border-color:#999}#swd_wrap .player_area_name h3,#swd_wrap .end_game_player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#swd_wrap .progress_token_outline{border:1px solid #111;background:rgba(0,0,0,.2)}#pr_game_area .tiles_label{color:#fff}#pr_game_area #plantations,#pr_game_area #buildings{background:rgba(0,0,0,.2)}#thething .player_view,#thething .info{color:#fff;background:rgba(0,0,0,.1)}#sa_main #diceboard{background:rgba(0,0,0,.2);color:#fff;border:2px solid #111}#welcometo-container #plan-cards-container,#welcometo-container #construction-cards-container{background-color:rgba(128,128,128,.2)}#sushigo_wrapper #deck_container h3{color:#fff}#sushigo_wrapper .block_title{background-image:linear-gradient(180deg, rgba(77, 77, 77, 0.75), rgba(26, 26, 26, 0.75))}#zoomBox #characterSelectionDescription{background:rgba(0,0,0,.3) !important}#cards_title #torpedocards_title,#cards_title #playerhand_title{color:#fff}#coc_game #players-zone h3 span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}#lostcities_wrapper #round_count,#lostcities_wrapper #deck_count{color:#fff !important}#game_play_area_wrap #player_bid_zone .player_bid_zone span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hud{box-shadow:inset 0 0 10px rgba(17,17,17,.67)}#hud+.play_grids .play_grid{box-shadow:inset 0 0 10px rgba(17,17,17,.67)}#hud+.play_grids .play_grid .player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important}#bsk{color:#fff}#turn-container #nb-turns-container{color:#fff}#thurntaxis_board #carriages,#thurntaxis_board .gameAreaContainer{border:rgba(100,100,100,.5)}#thurntaxis_board #carriages h3,#thurntaxis_board .gameAreaContainer h3{color:#fff}#player_table h3[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#market_map+#playerareas .playerArea .player-name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#market_map+#playerareas .playerArea .player-name[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}.coord_label.luis{color:#fff}/*# sourceMappingURL=darkmode.css.map */
* Please note, if you don't see the dark mode theme, try holding the Shift key down and reload the page, or close your browser window and come back. Also note, the stylesheet doesn't fully appear on the forums section of the site.


Variant #2: Blue dark mode

bga_blue.jpg
bga_blue.jpg (224.03 KiB) Viewed 9003 times

Installation
  1. Click the "SELECT ALL" link above the CSS code below and then press Crtl+C (Windows) or Cmd+C (Mac).
  2. Navigate to https://boardgamearena.com/preferences?section=advanced
  3. Paste the copied CSS from step #1 into the text box there
  4. Hit the Save button.
  5. Navigate to https://boardgamearena.com. Voila!*

Code: Select all

#overall-footer::after{font-family:Monaco,monospace;white-space:pre;display:block;padding:1em;color:#999;text-align:center;font-size:8pt;content:"Reminder: You are using custom Dark Mode CSS Version 2.1. Licensed under CC BY-NC-SA 4.0. See https://boardgamearena.com/forum/viewtopic.php?f=3&t=18654 for details."}html{background:radial-gradient(ellipse /**/at /**/top, #555566, #0a0a1b),radial-gradient(ellipse /**/at /**/bottom, #555566, #0a0a1b),url(https://wallpaperaccess.com/full/781329.jpg);background-attachment:fixed;background-position:center}#topbar{background:#223}#async_table_banner{color:#fff;background-color:#e00}#async_table_banner a{color:#0cc}#async_table_banner a:link,#async_table_banner a:visited{color:#0cc}#page-title{background-color:rgba(88,88,105,.75) !important;color:#fff}.current_player_is_active #page-title{background-color:#778}.pageheader{background-color:transparent;color:#fff}.pageheader_menuitembar{border-radius:0 0 6px 6px}.newbgatable th{text-transform:capitalize;color:#fff}.newbgatable td{color:#fff}.whiteblock{background:rgba(255,255,255,.3);background:rgba(0,0,0,.2);color:#fff}.gametable{border:1px #001 solid;background-color:#445;padding-top:10px;padding-bottom:10px}.pagesection{background-color:rgba(64,64,81,.5);color:#fff}#pagesection_about{color:#fff}.pagesection h2,.portlet h2,.pagesection h3,.portlet h3{background:linear-gradient(#888899, #777788);color:#112}a.bgabutton_gray{background-color:#fff}span.bgabutton_gray{background:#bbc}.bgabutton_blue{background:#71b648}.pageheader_menu_verylarge .pageheader_big_switch{background-color:#334;color:#fff}#table_warnings{color:#000}.tabbed_slider_bar_left,.tabbed_slider_bar_right{border-top:28px solid #445}.tabbed_slider_bar_barcenter,#pageheaderlobby{background:#445}.switcher_zone{background:linear-gradient(#333344, #111122);border-left:1px solid #556}.switcher_zone .fa-caret-down{text-shadow:1px 0 1px #778;color:#333}.icon_plus span{top:-3px !important}.statstable th{background-color:#223}.gametable_separator{background-color:#223}.playernotification_not_read{background-color:#edbab7}.dijitInputInner{background-color:#223 !important;color:#fff}.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle{color:unset}.dj_webkit .tundra .dijitTooltipContainer{box-shadow:0 5px 10px #112}.dijitPopup>a.bgabutton_gray,.dijitPopup a.bgabutton_gray{color:#112}.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray{border:1px solid #112;color:#112}#welcome-module .post{border-bottom:1px #667 solid}#welcome-module .comment{background-image:none;background-color:rgba(245,245,255,.15);border-radius:6px}#welcome-module .extended_message_hidden:after{left:67px;background:linear-gradient(to /**/bottom, rgba(32, 32, 49, 0), #202031)}#welcome-module .board_fake_input{background-color:#223;border:1px solid #b3b3c4}#gamelist-module select{background-color:#223;color:#fff}#gamelist-module .game_category_more_wrap{display:none}#gamelist-module #col_filter_gamename{margin-right:50px}#gamelist-module .gamelist_item{box-shadow:none;margin-right:30px}#gamelist-module .gamelist_item .game_box_image_wrap{padding:10px;border-radius:8px;border:2px solid #112;background:radial-gradient(ellipse /**/at /**/center, #555/**/ -50%, #19192a)}#gamelist-module .gamelist_item .game_box_image_wrap img:hover{transform:scale(1.05)}#gamelist-module .gamelist_item .game_box_image_wrap .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelist-module .gamelist_item{zoom:110%}#gamelist-module .gamelist_itemrow{overflow:visible}#gamelist-module .gamename{font-size:20px;position:relative;left:10px;top:2px;color:#667}.notouch-device #gamelist-module .gamelist_item:hover{background-color:transparent}.notouch-device #gamelist-module a:hover{color:#667;text-decoration:none}.notouch-device #gamelist-module a .gamename:hover{color:#667;text-decoration:underline}#gamepanel-module .icon16_duration{filter:invert(1)}#gamepanel-module .challenge_image{filter:grayscale(1)}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch{background-color:#565656}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover .switcher_zone,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch .switcher_zone{background:linear-gradient(#c2c2d3, #efefff)}#gamelobby-module .pageheader_menu #lobby_friend_list_state>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invited_friend_section>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invite_more_friend_button .lobby_invite_friend_avatar,#gamelobby-module .pageheader_menu #lobby_add_friend_button .lobby_invite_friend_avatar{background-color:#223}#gamelobby-module .game_box_wrap{margin-right:20px;border:2px solid #112}#gamelobby-module .game_box_wrap.tables_available{border:2px solid #001}#gamelobby-module .game_box_wrap .wannaplay_item{background:radial-gradient(ellipse /**/at /**/center, #555566 /**/ -50%, #19192a)}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask{left:unset;right:-20px;top:40px}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask .wannaplay_mask_button.del_favorite{background-color:#445;border:1px solid #001}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_image_wrap{position:absolute;top:7px;zoom:120%}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename{top:250px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner{width:90%;text-align:center;left:8px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:link,#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:visited{color:#667}#gamelobby-module .game_box_wrap .wannaplay_item .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelobby-module .wannaplayauto_play_zone_content{display:none}#gamelobby-module .wannaplayauto_play_zone_content .wannaplayauto_button{box-shadow:0 5px 10px 0 rgba(0,0,17,.7)}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:15px}#gamelobby-module .tiny_verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:2px;left:2px;zoom:unset}#table-module .pageheader{background-color:rgba(0,0,17,.4);color:#fff}#table-module .game_progression_bar{top:inherit;border:1px #99a solid}#table-module .whiteblock{background-image:none;background-color:#445;border-radius:10px}#table-module .active_player_left{border-right:1px #667 solid}#player-module #pagesection_lastresults .post{border-bottom:1px #111 solid}.game_interface #spectatorbox{padding-left:8px}.game_interface #not_playing_help{color:#0cc}.game_interface #logs{overflow:scroll;scrollbar-width:none;-ms-overflow-style:none}.game_interface #logs::-webkit-scrollbar{width:0;height:0}.game_interface #logs .log .roundedbox{background-color:rgba(222,222,239,.65);border-radius:5px}.game_interface #logs .playername[style$='"#3ea7c6;"']{text-shadow:-1px -1px 0 #444,1px -1px 0 #444,-1px 1px 0 #444,1px 1px 0 #444}.game_interface #logs #seemorelogs{background:linear-gradient(0deg, black, transparent)}.game_interface .player-board{background:#eee}.game_interface .player-board.spectator-mode .roundedbox_topleft,.game_interface .player-board.spectator-mode .roundedbox_topmain,.game_interface .player-board.spectator-mode .roundedbox_topright,.game_interface .player-board.spectator-mode .roundedbox_main,.game_interface .player-board.spectator-mode .roundedbox_bottomleft,.game_interface .player-board.spectator-mode .roundedbox_bottommain,.game_interface .player-board.spectator-mode .roundedbox_bottomright{background:unset}.game_interface .player-board.spectator-mode .roundedboxinner{left:5px}.game_interface .player-name>a[style="color: #ffffff"]{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span:first-of-type{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span[style$='"#000000;"']:first-of-type{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}.game_interface #pagemaintitletext>span[style$='"#008000;"']:first-of-type{text-shadow:-1px -1px 0 #030,1px -1px 0 #030,-1px 1px 0 #030,1px 1px 0 #030 !important}.game_interface #pagemaintitletext>span[style$='"#0000ff;"']:first-of-type{text-shadow:-1px -1px 0 #116,1px -1px 0 #116,-1px 1px 0 #116,1px 1px 0 #116 !important}#community-module .col-md-6 .tips{background-color:#202031}#chatbar .dropshadow{background-image:none}#chatbar .msgtime{position:unset;color:#889}#chatbar .chatwindowexpanded{background-color:#eef}#chatbar .chatwindowcollapsed{border-radius:7px 7px 0 0;box-shadow:0 0 7px 5px rgba(0,0,17,.3);background-color:rgba(255,255,255,.9)}#chatbar .chatwindowcollapsedtitle{top:6px;left:9px}#chatbar .chatwindowlogs{background-color:rgba(0,0,17,.66);box-shadow:0 0 7px 5px rgba(0,0,17,.5)}#chatbar .chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner{background-color:rgba(255,255,255,.7);color:#001}#chatbar .chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner{background-color:rgba(100,100,117,.7);color:#fff}.cantstop_asmodee #dicechoices{color:wheat}#coloretto_wrapper #round_status{color:#fff}#coloretto_wrapper #deck_count{color:#fff}#game_play_area .lettertycoon_area{background-color:rgba(255,255,255,.2);border:none;color:#fff}#game_play_area .lettertycoon_area_label{color:#fff}#game_play_area .lettertycoon_deck_info{color:#fff}#playArea #down #decksizetext{color:#fff}#play-area #cards #cutCardSpace{color:#fff}#decks_and_available_achievements{color:#fff}#sevenwonder_wrap #card_rotation_wrap{color:#fff}#sevenwonder_wrap #card_rotation_wrap #handrotation{filter:invert(1)}#game_play_area_wrap #discard_count{color:#fff}#game_play_area_wrap #trees h3{color:#fff}#hanabi_prefs_button{background-color:#ccd}#betpanel+h3{color:#fff}#myhand+h3{color:#fff}#card_played{color:#fff}#gosu_wrapper h3{color:#fff}.xdu_notifTop{color:#fff}#recruitment{color:#fff}br.clear+h3{color:#fff}#deck_wrap{color:#fff}#table_setup{color:#fff}#flt_counters{color:#fff}#kahuna_right_pane{color:#fff}#krosmaster_interface #master_list .master{-webkit-box-shadow:4px 4px 37px 0 #000;-moz-box-shadow:4px 4px 37px 0 #000;box-shadow:4px 4px 37px 0 #000}#krosmaster_interface .playerstock{background:rgba(255,255,255,.2)}#krosmaster_interface .playerstock h2{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#krosmaster_interface .playerstock h2[style$='"#6f1e6b"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hints_wrap h3{color:#fff}#hints_wrap #deck{border-color:#99a}#swd_wrap .player_area_name h3,#swd_wrap .end_game_player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#swd_wrap .progress_token_outline{border:1px solid #111;background:rgba(0,0,0,.2)}#pr_game_area .tiles_label{color:#fff}#pr_game_area #plantations,#pr_game_area #buildings{background:rgba(0,0,17,.2)}#thething .player_view,#thething .info{color:#fff;background:rgba(0,0,17,.1)}#sa_main #diceboard{background:rgba(0,0,0,.2);color:#fff;border:2px solid #111}#welcometo-container #plan-cards-container,#welcometo-container #construction-cards-container{background-color:rgba(128,128,145,.2)}#sushigo_wrapper #deck_container h3{color:#fff}#sushigo_wrapper .block_title{background-image:linear-gradient(180deg, rgba(77, 77, 77, 0.75), rgba(26, 26, 26, 0.75))}#zoomBox #characterSelectionDescription{background:rgba(0,0,0,.3) !important}#cards_title #torpedocards_title,#cards_title #playerhand_title{color:#fff}#coc_game #players-zone h3 span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}#lostcities_wrapper #round_count,#lostcities_wrapper #deck_count{color:#fff !important}#game_play_area_wrap #player_bid_zone .player_bid_zone span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hud{box-shadow:inset 0 0 10px rgba(17,17,34,.67)}#hud+.play_grids .play_grid{box-shadow:inset 0 0 10px rgba(17,17,34,.67)}#hud+.play_grids .play_grid .player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important}#bsk{color:#fff}#turn-container #nb-turns-container{color:#fff}#thurntaxis_board #carriages,#thurntaxis_board .gameAreaContainer{border:rgba(100,100,117,.5)}#thurntaxis_board #carriages h3,#thurntaxis_board .gameAreaContainer h3{color:#fff}#player_table h3[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#market_map+#playerareas .playerArea .player-name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#market_map+#playerareas .playerArea .player-name[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}.coord_label.luis{color:#fff}/*# sourceMappingURL=darkmode-blue.css.map */
* Please note, if you don't see the dark mode theme, try holding the Shift key down and reload the page, or close your browser window and come back. Also note, the stylesheet doesn't fully appear on the forums section of the site.


Variant #3: Purple dark mode

bga_purple.jpg
bga_purple.jpg (224.62 KiB) Viewed 9001 times

Installation
  1. Click the "SELECT ALL" link above the CSS code below and then press Crtl+C (Windows) or Cmd+C (Mac).
  2. Navigate to https://boardgamearena.com/preferences?section=advanced
  3. Paste the copied CSS from step #1 into the text box there
  4. Hit the Save button.
  5. Navigate to https://boardgamearena.com. Voila!*

Code: Select all

#overall-footer::after{font-family:Monaco,monospace;white-space:pre;display:block;padding:1em;color:#999;text-align:center;font-size:8pt;content:"Reminder: You are using custom Dark Mode CSS Version 2.1. Licensed under CC BY-NC-SA 4.0. See https://boardgamearena.com/forum/viewtopic.php?f=3&t=18654 for details."}html{background:radial-gradient(ellipse /**/at /**/top, #664466, #1b001b),radial-gradient(ellipse /**/at /**/bottom, #664466, #1b001b),url(https://wallpaperaccess.com/full/781329.jpg);background-attachment:fixed;background-position:center}#topbar{background:#313}#async_table_banner{color:#fff;background-color:#e00}#async_table_banner a{color:#0cc}#async_table_banner a:link,#async_table_banner a:visited{color:#0cc}#page-title{background-color:rgba(105,71,105,.75) !important;color:#fff}.current_player_is_active #page-title{background-color:#868}.pageheader{background-color:transparent;color:#fff}.pageheader_menuitembar{border-radius:0 0 6px 6px}.newbgatable th{text-transform:capitalize;color:#fff}.newbgatable td{color:#fff}.whiteblock{background:rgba(255,255,255,.3);background:rgba(0,0,0,.2);color:#fff}.gametable{border:1px #101 solid;background-color:#535;padding-top:10px;padding-bottom:10px}.pagesection{background-color:rgba(81,47,81,.5);color:#fff}#pagesection_about{color:#fff}.pagesection h2,.portlet h2,.pagesection h3,.portlet h3{background:linear-gradient(#997799, #886688);color:#202}a.bgabutton_gray{background-color:#fff}span.bgabutton_gray{background:#cac}.bgabutton_blue{background:#71b648}.pageheader_menu_verylarge .pageheader_big_switch{background-color:#424;color:#fff}#table_warnings{color:#000}.tabbed_slider_bar_left,.tabbed_slider_bar_right{border-top:28px solid #535}.tabbed_slider_bar_barcenter,#pageheaderlobby{background:#535}.switcher_zone{background:linear-gradient(#442244, #220022);border-left:1px solid #646}.switcher_zone .fa-caret-down{text-shadow:1px 0 1px #868;color:#333}.icon_plus span{top:-3px !important}.statstable th{background-color:#313}.gametable_separator{background-color:#313}.playernotification_not_read{background-color:#edbab7}.dijitInputInner{background-color:#313 !important;color:#fff}.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle{color:unset}.dj_webkit .tundra .dijitTooltipContainer{box-shadow:0 5px 10px #202}.dijitPopup>a.bgabutton_gray,.dijitPopup a.bgabutton_gray{color:#202}.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray{border:1px solid #202;color:#202}#welcome-module .post{border-bottom:1px #757 solid}#welcome-module .comment{background-image:none;background-color:rgba(255,228,255,.15);border-radius:6px}#welcome-module .extended_message_hidden:after{left:67px;background:linear-gradient(to /**/bottom, rgba(49, 15, 49, 0), #310f31)}#welcome-module .board_fake_input{background-color:#313;border:1px solid #c4a2c4}#gamelist-module select{background-color:#313;color:#fff}#gamelist-module .game_category_more_wrap{display:none}#gamelist-module #col_filter_gamename{margin-right:50px}#gamelist-module .gamelist_item{box-shadow:none;margin-right:30px}#gamelist-module .gamelist_item .game_box_image_wrap{padding:10px;border-radius:8px;border:2px solid #202;background:radial-gradient(ellipse /**/at /**/center, #555/**/ -50%, #2a082a)}#gamelist-module .gamelist_item .game_box_image_wrap img:hover{transform:scale(1.05)}#gamelist-module .gamelist_item .game_box_image_wrap .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelist-module .gamelist_item{zoom:110%}#gamelist-module .gamelist_itemrow{overflow:visible}#gamelist-module .gamename{font-size:20px;position:relative;left:10px;top:2px;color:#757}.notouch-device #gamelist-module .gamelist_item:hover{background-color:transparent}.notouch-device #gamelist-module a:hover{color:#757;text-decoration:none}.notouch-device #gamelist-module a .gamename:hover{color:#757;text-decoration:underline}#gamepanel-module .icon16_duration{filter:invert(1)}#gamepanel-module .challenge_image{filter:grayscale(1)}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch{background-color:#565656}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover .switcher_zone,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch .switcher_zone{background:linear-gradient(#d3b1d3, #ffdeff)}#gamelobby-module .pageheader_menu #lobby_friend_list_state>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invited_friend_section>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invite_more_friend_button .lobby_invite_friend_avatar,#gamelobby-module .pageheader_menu #lobby_add_friend_button .lobby_invite_friend_avatar{background-color:#313}#gamelobby-module .game_box_wrap{margin-right:20px;border:2px solid #202}#gamelobby-module .game_box_wrap.tables_available{border:2px solid #101}#gamelobby-module .game_box_wrap .wannaplay_item{background:radial-gradient(ellipse /**/at /**/center, #664466 /**/ -50%, #2a082a)}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask{left:unset;right:-20px;top:40px}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask .wannaplay_mask_button.del_favorite{background-color:#535;border:1px solid #101}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_image_wrap{position:absolute;top:7px;zoom:120%}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename{top:250px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner{width:90%;text-align:center;left:8px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:link,#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:visited{color:#757}#gamelobby-module .game_box_wrap .wannaplay_item .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelobby-module .wannaplayauto_play_zone_content{display:none}#gamelobby-module .wannaplayauto_play_zone_content .wannaplayauto_button{box-shadow:0 5px 10px 0 rgba(17,0,17,.7)}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:15px}#gamelobby-module .tiny_verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:2px;left:2px;zoom:unset}#table-module .pageheader{background-color:rgba(17,0,17,.4);color:#fff}#table-module .game_progression_bar{top:inherit;border:1px #a8a solid}#table-module .whiteblock{background-image:none;background-color:#535;border-radius:10px}#table-module .active_player_left{border-right:1px #757 solid}#player-module #pagesection_lastresults .post{border-bottom:1px #111 solid}.game_interface #spectatorbox{padding-left:8px}.game_interface #not_playing_help{color:#0cc}.game_interface #logs{overflow:scroll;scrollbar-width:none;-ms-overflow-style:none}.game_interface #logs::-webkit-scrollbar{width:0;height:0}.game_interface #logs .log .roundedbox{background-color:rgba(239,205,239,.65);border-radius:5px}.game_interface #logs .playername[style$='"#3ea7c6;"']{text-shadow:-1px -1px 0 #444,1px -1px 0 #444,-1px 1px 0 #444,1px 1px 0 #444}.game_interface #logs #seemorelogs{background:linear-gradient(0deg, black, transparent)}.game_interface .player-board{background:#eee}.game_interface .player-board.spectator-mode .roundedbox_topleft,.game_interface .player-board.spectator-mode .roundedbox_topmain,.game_interface .player-board.spectator-mode .roundedbox_topright,.game_interface .player-board.spectator-mode .roundedbox_main,.game_interface .player-board.spectator-mode .roundedbox_bottomleft,.game_interface .player-board.spectator-mode .roundedbox_bottommain,.game_interface .player-board.spectator-mode .roundedbox_bottomright{background:unset}.game_interface .player-board.spectator-mode .roundedboxinner{left:5px}.game_interface .player-name>a[style="color: #ffffff"]{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span:first-of-type{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span[style$='"#000000;"']:first-of-type{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}.game_interface #pagemaintitletext>span[style$='"#008000;"']:first-of-type{text-shadow:-1px -1px 0 #030,1px -1px 0 #030,-1px 1px 0 #030,1px 1px 0 #030 !important}.game_interface #pagemaintitletext>span[style$='"#0000ff;"']:first-of-type{text-shadow:-1px -1px 0 #116,1px -1px 0 #116,-1px 1px 0 #116,1px 1px 0 #116 !important}#community-module .col-md-6 .tips{background-color:#310f31}#chatbar .dropshadow{background-image:none}#chatbar .msgtime{position:unset;color:#979}#chatbar .chatwindowexpanded{background-color:#fdf}#chatbar .chatwindowcollapsed{border-radius:7px 7px 0 0;box-shadow:0 0 7px 5px rgba(17,0,17,.3);background-color:rgba(255,238,255,.9)}#chatbar .chatwindowcollapsedtitle{top:6px;left:9px}#chatbar .chatwindowlogs{background-color:rgba(17,0,17,.66);box-shadow:0 0 7px 5px rgba(17,0,17,.5)}#chatbar .chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner{background-color:rgba(255,238,255,.7);color:#101}#chatbar .chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner{background-color:rgba(117,83,117,.7);color:#fff}.cantstop_asmodee #dicechoices{color:wheat}#coloretto_wrapper #round_status{color:#fff}#coloretto_wrapper #deck_count{color:#fff}#game_play_area .lettertycoon_area{background-color:rgba(255,255,255,.2);border:none;color:#fff}#game_play_area .lettertycoon_area_label{color:#fff}#game_play_area .lettertycoon_deck_info{color:#fff}#playArea #down #decksizetext{color:#fff}#play-area #cards #cutCardSpace{color:#fff}#decks_and_available_achievements{color:#fff}#sevenwonder_wrap #card_rotation_wrap{color:#fff}#sevenwonder_wrap #card_rotation_wrap #handrotation{filter:invert(1)}#game_play_area_wrap #discard_count{color:#fff}#game_play_area_wrap #trees h3{color:#fff}#hanabi_prefs_button{background-color:#dbd}#betpanel+h3{color:#fff}#myhand+h3{color:#fff}#card_played{color:#fff}#gosu_wrapper h3{color:#fff}.xdu_notifTop{color:#fff}#recruitment{color:#fff}br.clear+h3{color:#fff}#deck_wrap{color:#fff}#table_setup{color:#fff}#flt_counters{color:#fff}#kahuna_right_pane{color:#fff}#krosmaster_interface #master_list .master{-webkit-box-shadow:4px 4px 37px 0 #000;-moz-box-shadow:4px 4px 37px 0 #000;box-shadow:4px 4px 37px 0 #000}#krosmaster_interface .playerstock{background:rgba(255,255,255,.2)}#krosmaster_interface .playerstock h2{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#krosmaster_interface .playerstock h2[style$='"#6f1e6b"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hints_wrap h3{color:#fff}#hints_wrap #deck{border-color:#a8a}#swd_wrap .player_area_name h3,#swd_wrap .end_game_player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#swd_wrap .progress_token_outline{border:1px solid #111;background:rgba(0,0,0,.2)}#pr_game_area .tiles_label{color:#fff}#pr_game_area #plantations,#pr_game_area #buildings{background:rgba(17,0,17,.2)}#thething .player_view,#thething .info{color:#fff;background:rgba(17,0,17,.1)}#sa_main #diceboard{background:rgba(0,0,0,.2);color:#fff;border:2px solid #111}#welcometo-container #plan-cards-container,#welcometo-container #construction-cards-container{background-color:rgba(145,111,145,.2)}#sushigo_wrapper #deck_container h3{color:#fff}#sushigo_wrapper .block_title{background-image:linear-gradient(180deg, rgba(77, 77, 77, 0.75), rgba(26, 26, 26, 0.75))}#zoomBox #characterSelectionDescription{background:rgba(0,0,0,.3) !important}#cards_title #torpedocards_title,#cards_title #playerhand_title{color:#fff}#coc_game #players-zone h3 span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}#lostcities_wrapper #round_count,#lostcities_wrapper #deck_count{color:#fff !important}#game_play_area_wrap #player_bid_zone .player_bid_zone span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hud{box-shadow:inset 0 0 10px rgba(34,0,34,.67)}#hud+.play_grids .play_grid{box-shadow:inset 0 0 10px rgba(34,0,34,.67)}#hud+.play_grids .play_grid .player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important}#bsk{color:#fff}#turn-container #nb-turns-container{color:#fff}#thurntaxis_board #carriages,#thurntaxis_board .gameAreaContainer{border:rgba(117,83,117,.5)}#thurntaxis_board #carriages h3,#thurntaxis_board .gameAreaContainer h3{color:#fff}#player_table h3[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#market_map+#playerareas .playerArea .player-name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#market_map+#playerareas .playerArea .player-name[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}.coord_label.luis{color:#fff}/*# sourceMappingURL=darkmode-purple.css.map */
* Please note, if you don't see the dark mode theme, try holding the Shift key down and reload the page, or close your browser window and come back. Also note, the stylesheet doesn't fully appear on the forums section of the site.


Variant #4: Cafe dark mode

bga_cafe.jpg
bga_cafe.jpg (238.42 KiB) Viewed 9003 times

Installation
  1. Click the "SELECT ALL" link above the CSS code below and then press Crtl+C (Windows) or Cmd+C (Mac).
  2. Navigate to https://boardgamearena.com/preferences?section=advanced
  3. Paste the copied CSS from step #1 into the text box there
  4. Hit the Save button.
  5. Navigate to https://boardgamearena.com. Voila!*

Code: Select all

#overall-footer::after{font-family:Monaco,monospace;white-space:pre;display:block;padding:1em;color:#999;text-align:center;font-size:8pt;content:"Reminder: You are using custom Dark Mode CSS Version 2.1. Licensed under CC BY-NC-SA 4.0. See https://boardgamearena.com/forum/viewtopic.php?f=3&t=18654 for details."}html{background:radial-gradient(ellipse /**/at /**/top, #665544, #1b0a00),radial-gradient(ellipse /**/at /**/bottom, #665544, #1b0a00),url(https://wallpaperaccess.com/full/781329.jpg);background-attachment:fixed;background-position:center}#topbar{background:#321}#async_table_banner{color:#fff;background-color:#e00}#async_table_banner a{color:#0cc}#async_table_banner a:link,#async_table_banner a:visited{color:#0cc}#page-title{background-color:rgba(105,88,71,.75) !important;color:#fff}.current_player_is_active #page-title{background-color:#876}.pageheader{background-color:transparent;color:#fff}.pageheader_menuitembar{border-radius:0 0 6px 6px}.newbgatable th{text-transform:capitalize;color:#fff}.newbgatable td{color:#fff}.whiteblock{background:rgba(255,255,255,.3);background:rgba(0,0,0,.2);color:#fff}.gametable{border:1px #100 solid;background-color:#543;padding-top:10px;padding-bottom:10px}.pagesection{background-color:rgba(81,64,47,.5);color:#fff}#pagesection_about{color:#fff}.pagesection h2,.portlet h2,.pagesection h3,.portlet h3{background:linear-gradient(#998877, #887766);color:#210}a.bgabutton_gray{background-color:#fff}span.bgabutton_gray{background:#cba}.bgabutton_blue{background:#71b648}.pageheader_menu_verylarge .pageheader_big_switch{background-color:#432;color:#fff}#table_warnings{color:#000}.tabbed_slider_bar_left,.tabbed_slider_bar_right{border-top:28px solid #543}.tabbed_slider_bar_barcenter,#pageheaderlobby{background:#543}.switcher_zone{background:linear-gradient(#443322, #221100);border-left:1px solid #654}.switcher_zone .fa-caret-down{text-shadow:1px 0 1px #876;color:#333}.icon_plus span{top:-3px !important}.statstable th{background-color:#321}.gametable_separator{background-color:#321}.playernotification_not_read{background-color:#edbab7}.dijitInputInner{background-color:#321 !important;color:#fff}.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle{color:unset}.dj_webkit .tundra .dijitTooltipContainer{box-shadow:0 5px 10px #210}.dijitPopup>a.bgabutton_gray,.dijitPopup a.bgabutton_gray{color:#210}.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray{border:1px solid #210;color:#210}#welcome-module .post{border-bottom:1px #765 solid}#welcome-module .comment{background-image:none;background-color:rgba(255,245,228,.15);border-radius:6px}#welcome-module .extended_message_hidden:after{left:67px;background:linear-gradient(to /**/bottom, rgba(49, 32, 15, 0), #31200f)}#welcome-module .board_fake_input{background-color:#321;border:1px solid #c4b3a2}#gamelist-module select{background-color:#321;color:#fff}#gamelist-module .game_category_more_wrap{display:none}#gamelist-module #col_filter_gamename{margin-right:50px}#gamelist-module .gamelist_item{box-shadow:none;margin-right:30px}#gamelist-module .gamelist_item .game_box_image_wrap{padding:10px;border-radius:8px;border:2px solid #210;background:radial-gradient(ellipse /**/at /**/center, #555/**/ -50%, #2a1908)}#gamelist-module .gamelist_item .game_box_image_wrap img:hover{transform:scale(1.05)}#gamelist-module .gamelist_item .game_box_image_wrap .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelist-module .gamelist_item{zoom:110%}#gamelist-module .gamelist_itemrow{overflow:visible}#gamelist-module .gamename{font-size:20px;position:relative;left:10px;top:2px;color:#765}.notouch-device #gamelist-module .gamelist_item:hover{background-color:transparent}.notouch-device #gamelist-module a:hover{color:#765;text-decoration:none}.notouch-device #gamelist-module a .gamename:hover{color:#765;text-decoration:underline}#gamepanel-module .icon16_duration{filter:invert(1)}#gamepanel-module .challenge_image{filter:grayscale(1)}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch{background-color:#565656}#gamelobby-module .pageheader_menu .pageheader_big_switch:hover .switcher_zone,#gamelobby-module .pageheader_menu .dropdown_expanded .pageheader_big_switch .switcher_zone{background:linear-gradient(#d3c2b1, #ffefde)}#gamelobby-module .pageheader_menu #lobby_friend_list_state>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invited_friend_section>h3{color:#fff}#gamelobby-module .pageheader_menu #lobby_invite_more_friend_button .lobby_invite_friend_avatar,#gamelobby-module .pageheader_menu #lobby_add_friend_button .lobby_invite_friend_avatar{background-color:#321}#gamelobby-module .game_box_wrap{margin-right:20px;border:2px solid #210}#gamelobby-module .game_box_wrap.tables_available{border:2px solid #100}#gamelobby-module .game_box_wrap .wannaplay_item{background:radial-gradient(ellipse /**/at /**/center, #665544 /**/ -50%, #2a1908)}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask{left:unset;right:-20px;top:40px}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_mask .wannaplay_mask_button.del_favorite{background-color:#543;border:1px solid #100}#gamelobby-module .game_box_wrap .wannaplay_item .game_box_image_wrap{position:absolute;top:7px;zoom:120%}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename{top:250px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner{width:90%;text-align:center;left:8px}#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:link,#gamelobby-module .game_box_wrap .wannaplay_item .wannaplay_gamename .gamenameinner a:visited{color:#765}#gamelobby-module .game_box_wrap .wannaplay_item .emblempremium_big{position:absolute;right:unset;left:-16px}#gamelobby-module .wannaplayauto_play_zone_content{display:none}#gamelobby-module .wannaplayauto_play_zone_content .wannaplayauto_button{box-shadow:0 5px 10px 0 rgba(17,0,0,.7)}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .compactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_mask{right:-26px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .wannaplay_gamename{top:145px}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .gamenameinner{width:90%}#gamelobby-module .verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:15px}#gamelobby-module .tiny_verycompactlobby .game_box_wrap .wannaplay_item .game_box_image_wrap{top:2px;left:2px;zoom:unset}#table-module .pageheader{background-color:rgba(17,0,0,.4);color:#fff}#table-module .game_progression_bar{top:inherit;border:1px #a98 solid}#table-module .whiteblock{background-image:none;background-color:#543;border-radius:10px}#table-module .active_player_left{border-right:1px #765 solid}#player-module #pagesection_lastresults .post{border-bottom:1px #111 solid}.game_interface #spectatorbox{padding-left:8px}.game_interface #not_playing_help{color:#0cc}.game_interface #logs{overflow:scroll;scrollbar-width:none;-ms-overflow-style:none}.game_interface #logs::-webkit-scrollbar{width:0;height:0}.game_interface #logs .log .roundedbox{background-color:rgba(239,222,205,.65);border-radius:5px}.game_interface #logs .playername[style$='"#3ea7c6;"']{text-shadow:-1px -1px 0 #444,1px -1px 0 #444,-1px 1px 0 #444,1px 1px 0 #444}.game_interface #logs #seemorelogs{background:linear-gradient(0deg, black, transparent)}.game_interface .player-board{background:#eee}.game_interface .player-board.spectator-mode .roundedbox_topleft,.game_interface .player-board.spectator-mode .roundedbox_topmain,.game_interface .player-board.spectator-mode .roundedbox_topright,.game_interface .player-board.spectator-mode .roundedbox_main,.game_interface .player-board.spectator-mode .roundedbox_bottomleft,.game_interface .player-board.spectator-mode .roundedbox_bottommain,.game_interface .player-board.spectator-mode .roundedbox_bottomright{background:unset}.game_interface .player-board.spectator-mode .roundedboxinner{left:5px}.game_interface .player-name>a[style="color: #ffffff"]{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span:first-of-type{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}.game_interface #pagemaintitletext>span[style$='"#000000;"']:first-of-type{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}.game_interface #pagemaintitletext>span[style$='"#008000;"']:first-of-type{text-shadow:-1px -1px 0 #030,1px -1px 0 #030,-1px 1px 0 #030,1px 1px 0 #030 !important}.game_interface #pagemaintitletext>span[style$='"#0000ff;"']:first-of-type{text-shadow:-1px -1px 0 #116,1px -1px 0 #116,-1px 1px 0 #116,1px 1px 0 #116 !important}#community-module .col-md-6 .tips{background-color:#31200f}#chatbar .dropshadow{background-image:none}#chatbar .msgtime{position:unset;color:#987}#chatbar .chatwindowexpanded{background-color:#fed}#chatbar .chatwindowcollapsed{border-radius:7px 7px 0 0;box-shadow:0 0 7px 5px rgba(17,0,0,.3);background-color:rgba(255,255,238,.9)}#chatbar .chatwindowcollapsedtitle{top:6px;left:9px}#chatbar .chatwindowlogs{background-color:rgba(17,0,0,.66);box-shadow:0 0 7px 5px rgba(17,0,0,.5)}#chatbar .chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner{background-color:rgba(255,255,238,.7);color:#100}#chatbar .chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner{background-color:rgba(117,100,83,.7);color:#fff}.cantstop_asmodee #dicechoices{color:wheat}#coloretto_wrapper #round_status{color:#fff}#coloretto_wrapper #deck_count{color:#fff}#game_play_area .lettertycoon_area{background-color:rgba(255,255,255,.2);border:none;color:#fff}#game_play_area .lettertycoon_area_label{color:#fff}#game_play_area .lettertycoon_deck_info{color:#fff}#playArea #down #decksizetext{color:#fff}#play-area #cards #cutCardSpace{color:#fff}#decks_and_available_achievements{color:#fff}#sevenwonder_wrap #card_rotation_wrap{color:#fff}#sevenwonder_wrap #card_rotation_wrap #handrotation{filter:invert(1)}#game_play_area_wrap #discard_count{color:#fff}#game_play_area_wrap #trees h3{color:#fff}#hanabi_prefs_button{background-color:#dcb}#betpanel+h3{color:#fff}#myhand+h3{color:#fff}#card_played{color:#fff}#gosu_wrapper h3{color:#fff}.xdu_notifTop{color:#fff}#recruitment{color:#fff}br.clear+h3{color:#fff}#deck_wrap{color:#fff}#table_setup{color:#fff}#flt_counters{color:#fff}#kahuna_right_pane{color:#fff}#krosmaster_interface #master_list .master{-webkit-box-shadow:4px 4px 37px 0 #000;-moz-box-shadow:4px 4px 37px 0 #000;box-shadow:4px 4px 37px 0 #000}#krosmaster_interface .playerstock{background:rgba(255,255,255,.2)}#krosmaster_interface .playerstock h2{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#krosmaster_interface .playerstock h2[style$='"#6f1e6b"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hints_wrap h3{color:#fff}#hints_wrap #deck{border-color:#a98}#swd_wrap .player_area_name h3,#swd_wrap .end_game_player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#swd_wrap .progress_token_outline{border:1px solid #111;background:rgba(0,0,0,.2)}#pr_game_area .tiles_label{color:#fff}#pr_game_area #plantations,#pr_game_area #buildings{background:rgba(17,0,0,.2)}#thething .player_view,#thething .info{color:#fff;background:rgba(17,0,0,.1)}#sa_main #diceboard{background:rgba(0,0,0,.2);color:#fff;border:2px solid #111}#welcometo-container #plan-cards-container,#welcometo-container #construction-cards-container{background-color:rgba(145,128,111,.2)}#sushigo_wrapper #deck_container h3{color:#fff}#sushigo_wrapper .block_title{background-image:linear-gradient(180deg, rgba(77, 77, 77, 0.75), rgba(26, 26, 26, 0.75))}#zoomBox #characterSelectionDescription{background:rgba(0,0,0,.3) !important}#cards_title #torpedocards_title,#cards_title #playerhand_title{color:#fff}#coc_game #players-zone h3 span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777 !important}#lostcities_wrapper #round_count,#lostcities_wrapper #deck_count{color:#fff !important}#game_play_area_wrap #player_bid_zone .player_bid_zone span[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#hud{box-shadow:inset 0 0 10px rgba(34,17,0,.67)}#hud+.play_grids .play_grid{box-shadow:inset 0 0 10px rgba(34,17,0,.67)}#hud+.play_grids .play_grid .player_name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important}#bsk{color:#fff}#turn-container #nb-turns-container{color:#fff}#thurntaxis_board #carriages,#thurntaxis_board .gameAreaContainer{border:rgba(117,100,83,.5)}#thurntaxis_board #carriages h3,#thurntaxis_board .gameAreaContainer h3{color:#fff}#player_table h3[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}#market_map+#playerareas .playerArea .player-name{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#market_map+#playerareas .playerArea .player-name[style*='"#000000"']{text-shadow:-1px -1px 0 #777,1px -1px 0 #777,-1px 1px 0 #777,1px 1px 0 #777}.coord_label.luis{color:#fff}/*# sourceMappingURL=darkmode-cafe.css.map */
* Please note, if you don't see the dark mode theme, try holding the Shift key down and reload the page, or close your browser window and come back. Also note, the stylesheet doesn't fully appear on the forums section of the site.


Contributed variants

Changes:
12/11/20: Revised chat styles
12/12/20: Fix for post-game header
12/23/20: Five across in the favorites section of the Play Now list
12/28/20: Adjust color of #async_table_banner to match icon; Significant changes to the game lobby page to increase box image size, remove redundant "Play Now!" button, and overall put more focus on the game rather than the chrome.
12/29/20: Make games list page consistent with the look and feel of the lobby page
12/29/20: Publish rebuilt black, blue, purple, and cafe variants
12/29/20: Add fix for Can't Stop dice choices text
12/31/20: Fixes and adjustments for dozens of games and main site issues
Last edited by dapotamus on 31 December 2020, 14:38, edited 38 times in total.
User avatar
JPreto
Posts: 48
Joined: 09 September 2020, 23:43

Re: Dark mode CSS...here you go

Post by JPreto »

Great!

Just made some small changes:

Code: Select all

html {
background: #0a0a0a;
}

#page-title {
background-color:rgba(88,88,88,.75)!important;
color:#FFF;
}

.wannaplay_item {
background:rgba(0,0,0,0.0);
}
1) I prefer almost all black BG
2) After game top bar was white
3) bg around game image in "Play" page when you select tables
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Re: Dark mode CSS...here you go

Post by dapotamus »

Thanks for the header fix! For those who prefer a version without without the background image, here's an updated version that uses a subtle gradient background to provide a little more dimensionality:

Code: Select all

html {
background:radial-gradient(ellipse/**/at/**/top,#555,#0A050A), radial-gradient(ellipse/**/at/**/bottom,#555,#0A050A), url(https://wallpaperaccess.com/full/781329.jpg);
background-attachment:fixed;
background-position:center;
}

#topbar {
background:#222;
}

#page-title {
background-color:rgba(88,88,88,.75)!important;
color:#FFF;
}

.current_player_is_active #page-title {
background-color:#777;
}

.pageheader {
background-color:transparent;
color:#fff;
}

#table-module .pageheader {
background-color:rgba(0,0,0,0.4);
color:#fff;
}

#table-module .game_progression_bar {
top:inherit;
border:1px #999 solid;
}

#table-module .whiteblock {
background-image:none;
background-color:#444;
border-radius:10px;
}

#table-module .active_player_left {
border-right:1px #666 solid;
}

.pagesection {
background-color:rgba(64,64,64,.5);
color:#fff;
}

span#pagemaintitletext > span:first-of-type {
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pagesection h2,.portlet h2,.pagesection h3,.portlet h3 {
background:linear-gradient(#888,#777);
color:#111;
}

a.bgabutton_gray {
background-color:#FFF;
}

.gamelist_itemrow {
overflow:visible;
}

#pagesection_about {
color:#FFF;
}

.wannaplay_item {
background:rgba(20,20,20,0.50);
}

.pageheader_menu_verylarge .pageheader_big_switch {
background-color:#333;
color:#FFF;
}

.tabbed_slider_bar_left,.tabbed_slider_bar_right {
border-top:28px solid #444;
}

.tabbed_slider_bar_barcenter,#pageheaderlobby {
background:#444;
}

.switcher_zone {
background:linear-gradient(#333,#111);
border-left:1px solid #555;
}

.switcher_zone .fa-caret-down {
text-shadow:1px 0 1px #777;
color:#333;
}

.icon_plus span {
top:-3px!important;
}

.wannaplay_mask_button.del_favorite {
background-color:#444;
border:1px solid #000;
}

.wannaplayauto_button {
box-shadow:0 5px 10px 0 rgba(0,0,0,0.7);
}

.bgabutton_blue {
background:#71b648;
}

.game_box_wrap,.tiny_verycompactlobby .game_box_wrap.expandedgame_box_wrap {
border:2px solid #111;
}

.game_box_wrap.tables_available {
border:2px solid #000;
}

.game_box_mask {
left:unset;
right:-20px;
}

.wannaplayauto_item .emblempremium_big {
position:absolute;
right:unset;
left:-16px;
}

.wannaplayauto_item .gamenameinner {
width:90%;
text-align:center;
left:18px;
}

.notouch-device .gamelist_item:hover {
background-color:rgba(20,20,20,0.5);
}

#logs {
overflow:scroll;
scrollbar-width:none;
-ms-overflow-style:none;
}

#logs::-webkit-scrollbar {
width:0;
height:0;
}

.log .roundedbox {
background-color:rgba(222,222,222,0.65);
border-radius:5px;
}

.pageheader_menuitembar {
border-radius:0 0 6px 6px;
}

.dj_webkit .tundra .dijitTooltipContainer {
box-shadow:0 5px 10px #111;
-webkit-box-shadow:0 5px 10px #111;
}

.gametable {
border:1px #000 solid;
background-color:#444;
padding-top:10px;
padding-bottom:10px;
}

.dijitPopup > a.bgabutton_gray,.dijitPopup a.bgabutton_gray,. dijitPopup a.bgabutton_gray {
color:#111;
}

.dijitTooltipDialogPopup a.bgabutton_gray,.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray {
border:1px solid #111;
color:#111;
}

.player-board {
background:#eee;
}

span.bgabutton_gray {
background:#bbb;
}

.chatwindowlogs {
background-color:rgba(0,0,0,0.66);
box-shadow:0 0 7px 5px rgba(0,0,0,0.5);
}

.chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner {
background-color:rgba(255,255,255,0.7);
color:#000;
}

.chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner {
background-color:rgba(100,100,100,0.7);
color:#fff;
}

.chatwindowexpanded {
background-color:#eee;
}

.playernotification_not_read {
background-color:#edbab7;
}

.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle {
color:unset;
}

#community-module .col-md-6 .tips {
background-color:#202020;
}

#welcome-module .post {
border-bottom:1px #666 solid;
}

#welcome-module .comment {
background-image:none;
background-color:rgba(245,245,245,0.15);
border-radius:6px;
}

#welcome-module .extended_message_hidden:after {
left:67px;
background:linear-gradient(to/**/bottom,rgba(32,32,32,0), rgba(32,32,32,1) );
}

#gamelist-module select {
background-color:#222;
color:#FFF;
}

#gamelist-module .game_category_more_wrap {
display:none;
}

.dijitInputInner {
background-color:#222!important;
color:#fff;
}

.msgtime {
position:unset;
color:#888;
}

.desktop_version .chatwindowcollapsed {
border-radius:7px 7px 0 0;
-webkit-box-shadow:0 0 7px 5px rgba(0,0,0,0.3);
box-shadow:0 0 7px 5px rgba(0,0,0,0.3);
background-color:rgba(255,255,255,0.9);
}

.chatwindowcollapsedtitle {
top:6px;
left:9px;
}

#chatbar .dropshadow {
background-image:none;
}

.statstable th,#welcome-module .board_fake_input,#lobby_invite_more_friend_button .lobby_invite_friend_avatar,#lobby_add_friend_button .lobby_invite_friend_avatar,.gametable_separator {
background-color:#222;
}

#gamelobby-module .newbgatable th {
text-transform:capitalize;
color:#fff;
}

#gamelobby-module .newbgatable td {
color:#fff;
}
User avatar
TpChristy
Posts: 2
Joined: 13 July 2015, 20:18

Re: Dark mode CSS...here you go

Post by TpChristy »

Any idea how to make it blue?
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Re: Dark mode CSS...here you go

Post by dapotamus »

You would need to adjust the colors in all of the styles in this dark-mode stylesheet. Not necessarily hard but would take some iteration and tuning by eye.
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Re: Dark mode CSS...here you go

Post by dapotamus »

TpChristy wrote: 13 December 2020, 14:04 Any idea how to make it blue?
Hey TpChristy, here is a blue dark mode variant for you to try out. Enjoy!

Code: Select all

html {
background:radial-gradient(ellipse/**/at/**/top,#556,#0A050A), radial-gradient(ellipse/**/at/**/bottom,#556,#0A050A), url(https://wallpaperaccess.com/full/781329.jpg);
background-attachment:fixed;
background-position:center;
}

#topbar {
background:#223;
}

#page-title {
background-color:rgba(88,88,99,.75)!important;
color:#FFF;
}

.current_player_is_active #page-title {
background-color:#778;
}

.pageheader {
background-color:transparent;
color:#fff;
}

#table-module .pageheader {
background-color:rgba(0,0,16,0.4);
color:#fff;
}

#table-module .game_progression_bar {
top:inherit;
border:1px #99a solid;
}

#table-module .whiteblock {
background-image:none;
background-color:#445;
border-radius:10px;
}

#table-module .active_player_left {
border-right:1px #667 solid;
}

.pagesection {
background-color:rgba(64,64,80,.5);
color:#fff;
}

span#pagemaintitletext > span:first-of-type {
text-shadow:-1px -1px 0 #001, 1px -1px 0 #001, -1px 1px 0 #001, 1px 1px 0 #001;
}

.pagesection h2,.portlet h2,.pagesection h3,.portlet h3 {
background:linear-gradient(#889,#778);
color:#112;
}

a.bgabutton_gray {
background-color:#FFF;
}

.gamelist_itemrow {
overflow:visible;
}

#pagesection_about {
color:#FFF;
}

.wannaplay_item {
background:rgba(20,20,36,0.50);
width:230px;
}

.pageheader_menu_verylarge .pageheader_big_switch {
background-color:#334;
color:#FFF;
}

.tabbed_slider_bar_left,.tabbed_slider_bar_right {
border-top:28px solid #445;
}

.tabbed_slider_bar_barcenter,#pageheaderlobby {
background:#445;
}

.switcher_zone {
background:linear-gradient(#333,#111);
border-left:1px solid #556;
}

.switcher_zone .fa-caret-down {
text-shadow:1px 0 1px #778;
color:#334;
}

.icon_plus span {
top:-3px!important;
}

.wannaplay_mask_button.del_favorite {
background-color:#445;
border:1px solid #001;
}

.wannaplayauto_button {
box-shadow:0 5px 10px 0 rgba(0,0,16,0.7);
}

.bgabutton_blue {
background:#71b658;
}

.game_box_wrap,.tiny_verycompactlobby .game_box_wrap.expandedgame_box_wrap {
border:2px solid #111;
width:230px;
margin-right:25px;
}

.game_box_wrap.tables_available {
border:2px solid #001;
}

.game_box_mask {
left:unset;
right:-20px;
}

.wannaplayauto_item .emblempremium_big {
position:absolute;
right:unset;
left:-16px;
}

.wannaplayauto_item .gamenameinner {
text-align:center;
left:8px;
width:95%;
}

.notouch-device .gamelist_item:hover {
background-color:rgba(20,20,36,0.5);
}

#logs {
overflow:scroll;
scrollbar-width:none;
-ms-overflow-style:none;
}

#logs::-webkit-scrollbar {
width:0;
height:0;
}

.log .roundedbox {
background-color:rgba(222,222,238,0.65);
border-radius:5px;
}

.pageheader_menuitembar {
border-radius:0 0 6px 6px;
}

.dj_webkit .tundra .dijitTooltipContainer {
box-shadow:0 5px 10px #112;
-webkit-box-shadow:0 5px 10px #112;
}

.gametable {
border:1px #001 solid;
background-color:#445;
padding-top:10px;
padding-bottom:10px;
}

.dijitPopup > a.bgabutton_gray,.dijitPopup a.bgabutton_gray,. dijitPopup a.bgabutton_gray {
color:#112;
}

.dijitTooltipDialogPopup a.bgabutton_gray,.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray {
border:1px solid #112;
color:#112;
}

.player-board {
background:#eef;
}

span.bgabutton_gray {
background:#bbc;
}

.chatwindowlogs {
background-color:rgba(0,0,16,0.66);
box-shadow:0 0 7px 5px rgba(0,0,16,0.5);
}

.chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner {
background-color:rgba(255,255,255,0.7);
color:#000;
}

.chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner {
background-color:rgba(100,100,116,0.7);
color:#fff;
}

.chatwindowexpanded {
background-color:#eef;
}

.playernotification_not_read {
background-color:#edbac7;
}

.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle {
color:unset;
}

#community-module .col-md-6 .tips {
background-color:#202030;
}

#welcome-module .post {
border-bottom:1px #667 solid;
}

#welcome-module .comment {
background-image:none;
background-color:rgba(245,245,255,0.15);
border-radius:6px;
}

#welcome-module .extended_message_hidden:after {
left:67px;
background:linear-gradient(to/**/bottom,rgba(32,32,48,0), rgba(32,32,48,1) );
}

#gamelist-module select {
background-color:#223;
color:#FFF;
}

#gamelist-module .game_category_more_wrap {
display:none;
}

.dijitInputInner {
background-color:#222!important;
color:#fff;
}

.msgtime {
position:unset;
color:#889;
}

.desktop_version .chatwindowcollapsed {
border-radius:7px 7px 0 0;
-webkit-box-shadow:0 0 7px 5px rgba(0,0,16,0.3);
box-shadow:0 0 7px 5px rgba(0,0,16,0.3);
background-color:rgba(255,255,255,0.9);
}

.chatwindowcollapsedtitle {
top:6px;
left:9px;
}

#chatbar .dropshadow {
background-image:none;
}

.statstable th,#welcome-module .board_fake_input,#lobby_invite_more_friend_button .lobby_invite_friend_avatar,#lobby_add_friend_button .lobby_invite_friend_avatar,.gametable_separator {
background-color:#223;
}

#gamelobby-module .newbgatable th {
text-transform:capitalize;
color:#fff;
}

#gamelobby-module .newbgatable td {
color:#fff;
}
User avatar
JPreto
Posts: 48
Joined: 09 September 2020, 23:43

Re: Dark mode CSS...here you go

Post by JPreto »

Ok, I´ve been fixing some other issues of positioning (overlaping of icons, etc..), specially in the "Play now" page using "Small Icons".

Here is the full code I am using:

Code: Select all

html {
background:#111;
}

#topbar {
background:#222;
}

#page-title {
background-color:rgba(88,88,88,.75)!important;
color:#FFF;
}

.current_player_is_active #page-title {
background-color:#777;
}

.pageheader {
background-color:#000000b0;
color:#fff;
}

#table-module .pageheader {
background-color:#7b7b7b36;
color:#fff;
}

#table-module .game_progression_bar {
top:inherit;
border:1px #999 solid;
}

#table-module .whiteblock {
background-image:none;
background-color:#444;
border-radius:10px;
}

#table-module .active_player_left {
border-right:1px #666 solid;
}

.pagesection {
background-color:rgba(64,64,64,.5);
color:#fff;
}

span#pagemaintitletext > span:first-of-type {
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pagesection h2,.portlet h2,.pagesection h3,.portlet h3 {
background:linear-gradient(#888,#777);
color:#111;
}

a.bgabutton_gray {
background-color:#FFF;
}

.gamelist_itemrow {
overflow:visible;
}

#pagesection_about {
color:#FFF;
}

.wannaplay_item {
background:rgba(0,0,0,0.0);
}

.pageheader_menu_verylarge .pageheader_big_switch {
background-color:#333;
color:#FFF;
}

.tabbed_slider_bar_left,.tabbed_slider_bar_right {
border-top:28px solid #444;
}

.tabbed_slider_bar_barcenter,#pageheaderlobby {
background:#444;
}

.switcher_zone {
background:linear-gradient(#333,#111);
border-left:1px solid #555;
}

.switcher_zone .fa-caret-down {
text-shadow:1px 0 1px #777;
color:#333;
}

.icon_plus span {
top:-3px!important;
}

.wannaplay_mask_button.del_favorite {
background-color:#444;
border:1px solid #000;
}

.wannaplayauto_button {
box-shadow:0 5px 10px 0 rgba(0,0,0,0.7);
}

.bgabutton_blue {
background:#616161;
}

.game_box_wrap,.tiny_verycompactlobby .game_box_wrap.expandedgame_box_wrap {
border:2px solid #111;
}

.game_box_wrap.tables_available {
border:2px solid #000;
}

.game_box_mask {
left:unset;
right:-20px;
}

.wannaplayauto_item .emblempremium_big {
position:absolute;
right:unset;
left:-16px;
}

.wannaplayauto_item .gamenameinner {
width:90%;
text-align:center;
}

.notouch-device .gamelist_item:hover {
background-color:rgba(20,20,20,0.5);
}

#logs {
overflow:scroll;
scrollbar-width:none;
-ms-overflow-style:none;
}

#logs::-webkit-scrollbar {
width:0;
height:0;
}

.log .roundedbox {
background-color:rgba(222,222,222,0.65);
border-radius:5px;
}

.pageheader_menuitembar {
border-radius:0 0 6px 6px;
}

.dj_webkit .tundra .dijitTooltipContainer {
box-shadow:0 5px 10px #111;
-webkit-box-shadow:0 5px 10px #111;
}

.gametable {
border:1px #000 solid;
background-color:#444;
padding-top:10px;
padding-bottom:10px;
}

.dijitPopup > a.bgabutton_gray,.dijitPopup a.bgabutton_gray,. dijitPopup a.bgabutton_gray {
color:#111;
}

.dijitTooltipDialogPopup a.bgabutton_gray,.dijitTooltipDialogPopup a.bgabutton_gray,.gametable a.bgabutton_gray {
border:1px solid #111;
color:#111;
}

.player-board {
background:#eee;
}

span.bgabutton_gray {
background:#bbb;
}

.chatwindowlogs {
background-color:rgba(0,0,0,0.9);
box-shadow:0 0 7px 5px rgba(0,0,0,0.5);
}

.chatwindowlogs_zone .roundedbox.chatlog .roundedboxinner {
background-color:rgba(255,255,255,0.7);
color:#000;
}

.chatwindowlogs_zone .roundedbox.chatlog.ownchatlog .roundedboxinner {
background-color:rgba(100,100,100,0.7);
color:#fff;
}

.chatwindowexpanded {
background-color:#eee;
}

.playernotification_not_read {
background-color:#545454;
}

.controlpanelmenu .panelmenuicon,.controlpanelmenu .subtitle {
color:unset;
}

#community-module .col-md-6 .tips {
background-color:#202020;
}

#welcome-module .post {
border-bottom:1px #666 solid;
}

#welcome-module .comment {
background-image:none;
background-color:rgba(245,245,245,0.15);
border-radius:6px;
}

#welcome-module .extended_message_hidden:after {
left:67px;
background:linear-gradient(to/**/bottom,rgba(32,32,32,0), rgba(32,32,32,1) );
}

#gamelist-module select {
background-color:#222;
color:#FFF;
}

#gamelist-module .game_category_more_wrap {
display:none;
}

.dijitInputInner {
background-color:#222!important;
color:#fff;
}

.msgtime {
position:unset;
color:#888;
}

.desktop_version .chatwindowcollapsed {
border-radius:7px 7px 0 0;
-webkit-box-shadow:0 0 7px 5px rgba(0,0,0,0.3);
box-shadow:0 0 7px 5px rgba(0,0,0,0.3);
background-color:rgba(255,255,255,0.9);
}

.chatwindowcollapsedtitle {
top:6px;
left:9px;
}

#chatbar .dropshadow {
background-image:none;
}

.statstable th,#welcome-module .board_fake_input,#lobby_invite_more_friend_button .lobby_invite_friend_avatar,#lobby_add_friend_button .lobby_invite_friend_avatar,.gametable_separator {
background-color:#222;
}

#gamelobby-module .newbgatable th {
text-transform:capitalize;
color:#fff;
}

.player_is_at_table .gametable.gametable_status_init,.player_is_at_table .gametable.gametable_status_open {
background-color:#0e0e0e;
border-color:#000;
}

.playername,a:link.playername,a:visited.playername {
color:#eb2e2d;
}

a.hiddenlink {
color:#777;
}

.gamestart_overlay {
background:rgba(64,64,64,1)!important;
}

#gamelobby-module .newbgatable td,a.achievement_link {
color:#fff;
}

.achievement_container.top,.achievement_container.bottom {
background-image:none!important;
}

.desktop_version .verycompactlobby .expandedgame_box_wrap .wannaplayauto_item .game_box_image_wrap {
margin-top:-25px!important;
margin-left:-30px!important;
}

.desktop_version .verycompactlobby .expandedgame_box_wrap .game_box_mask {
top:25px!important;
}

.comment {
background-image:none!important;
background-color:#3e3e3e!important;
}

.pageheader_menu_verylarge .pageheader_big_switch_dropdown .pageheader_menuitem.pageheader_menuitemselected {
color:#3f6ab4;
background-color:#1b1a1a;
}

.notouch-device .pageheader_menu_verylarge .pageheader_big_switch:hover #switcher_zone,.pageheader_menu_verylarge .dropdown_expanded .pageheader_big_switch #switcher_zone {
background:linear-gradient(#323232,#121212);
}

.notouch-device .pageheader_menu_verylarge .pageheader_big_switch:hover,.pageheader_menu_verylarge .dropdown_expanded .pageheader_big_switch,.pageheader_menu_verylarge .pageheader_big_switch_dropdown .pageheader_menuitem {
background-color:#323232;
}
I think i am going to add comments on this code, so that it is easy for other people to change as they wish.
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Re: Dark mode CSS...here you go

Post by dapotamus »

FYI, I don't see any issues with small icons using my CSS. Perhaps that was something you introduced in your original variant.
User avatar
JPreto
Posts: 48
Joined: 09 September 2020, 23:43

Re: Dark mode CSS...here you go

Post by JPreto »

dapotamus wrote: 27 December 2020, 04:04 FYI, I don't see any issues with small icons using my CSS. Perhaps that was something you introduced in your original variant.
They moved the Premium icon to the right of the game box, it was on the left and overlaping the ELO and FAV icons. Now it is … ;)

BTW, comments are deleted when CSS code is saved.
User avatar
dapotamus
Posts: 19
Joined: 14 April 2020, 10:09

Re: Dark mode CSS...here you go

Post by dapotamus »

BTW, comments are deleted when CSS code is saved.
Yes, I tried commenting the code early on, but as you found there's no point. ¯\_(ツ)_/¯ They also parse and rewrite the CSS when you submit it, sometimes with incorrectly modified properties. The feature is cool but not fully baked.
Locked

Return to “Discussions”