Google Chrome Extension

[Tof63]

Hello!

Did you find these issues only in Hanabi or in some other games too?
For the first one, it's not related with the dark mode, is it ?

Thanks for your feedbacks!

[Blacktango]

Actually, it's for all games, but some players noticed it and added some extra empty paragraphs directly to some game's wiki to avoid it.

This is not a Dark theme bug, but rather a BGA improvement.

[Tof63]

What you suggest to shorten the game history, I checked with many games but I have the impression that it's only useful for Hanabi?

[Blacktango]

Oh, I never noticed.
Good to know. I will try to get a fix applied directly on the Hanabi code.

Sorry for the fake bug then

[Tof63]

Ok

I will add your css for the wiki in the next version, it's not a big deal: i think it's not necessary to add an option for that...

Thanks!

[Sammy McSam]

Hi Tof63 thanks for a great dark theme extension. The ability to also customise colour is nice. A few suggestions for improvement:

Low contrast
/forum/posting.php

Code: Select all

.message-box textarea, input.inputbox {
    background: #000;
}
#postingbox.panel {
    background-color: #191919; /* change to #2a2a2a & consider using a var --forum-background-color: #2a2a2a; */
}

Code: Select all

.codebox code {
    color: #a00; /* change to (e.g.) #c00 ? */
}
.codebox {
    background-color: #191919;
}

Code: Select all

.phpbb_iframed a {
    color: #4871b6; 
}
.phpbb_iframed a:hover {
    color: #3abdb8;
    text-decoration: underline;
}
html, body, body.mode_3d {
    background: url(chrome-extension://kchnhmpeopknjdjejognciimepllkacb/img/dark_theme/background.jpg);
}

Change classes to:

Code: Select all

.bga-link, .bga-link .pagesection__content, .gamename {
    color: var(--blue-80);
}
.bga-link:hover, .bga-link:hover .pagesection__content, .gamename:hover {
    color: var(--violet-80);
}
.bga-link--active, .bga-link-inside a:not(.playername,.gamename,.bgabutton):active, .bga-link-inside a:not(.playername,.gamename,.bgabutton):hover, .bga-link:active, .bga-link:hover {
    text-decoration: underline;
}

Low contrast
/bugs
Game results

Add class:

Code: Select all

input::placeholder {
    color: #b3b3b3; /* default #757575 */
    border: 1px solid #b3b3b3; /* default #767676 */
}

Code: Select all

.statstable td, .statstable th {
    border: 1px solid #000; /* change to (e.g.) var(--light-70) */
}

Code: Select all

/* raceforthegalaxy.css */
.new_design a:link {
    color: #000; /* change to (e.g.) var(--light-70) */
}
.new_design .player-board, .new_design .roundedbox, .new_design .roundedbox .roundedbox_bottomleft, .new_design .roundedbox .roundedbox_bottommain, .new_design .roundedbox .roundedbox_bottomright, .new_design .roundedbox .roundedbox_main, .new_design .roundedbox .roundedbox_topleft, .new_design .roundedbox .roundedbox_topmain, .new_design .roundedbox .roundedbox_topright {
    background-color: #dadbdf; /* change back to (e.g.) transparent (see common.css)? */
}
/* common.css */
.chatwindowlogs_zone .roundedbox {
    background-color: transparent;
}

Code: Select all

#menubar-holder .bga-menu-subbar, #menubar-holder .bga-sub-menu, #menubar-holder .bga-omni-bar input {
    background: var(--dark-40); /* change to var(--dark-20) */
}

Code: Select all

.bg-bga-whitebg {
    background-color: rgba(244,244,244,var(--tw-bg-opacity));
}
.bga-friends-icon__dropdown {
    background: var(--dark-10); /* overridden by bg-bga-whitebg */
    color: var(--light-80);
}

Code: Select all

.newbgatable td {
    border: 0 solid #000;
    color: #000; /* change to (e.g.) var(--light-70) */
    padding: 9px 10px 0
}

Code: Select all

.bga-menu-bar-items__menu-item.bga-menu-sub-menu-item.svelte-1duixkh {
    background-color:#01408f; /* change to match .bga-menu-bar-items.bga-mobile .bga-menu-bar-items__menu-item--active color: var(--violet-80) */
}
.bga-menu-bar-items.bga-mobile .bga-menu-bar-items__menu-item--active {
    color: var(--violet-80)!important;
}

/gamepanel?game=
Add rule link modal

Code: Select all

.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(209,213,219,var(--tw-bg-opacity)); /* change to (e.g.) var(--dark-10) or transparent */
}
.standard_popin, .bga-popup-modal__content, .bga-popup-modal__content [class*=bg-bga-graybg], .bga-popup-modal__content [class*=text-bga-gray] {
    background: var(--dark-10);
    color: var(--light-80);
}

Ranking highlight

Code: Select all

.bga-ranking-entry.bga-ranking-entry--me.svelte-wtl1h {
    background: linear-gradient(#E9C700, #E88702); /* invert colours (e.g.) #3759FF, #0E6FF4 */
}

Your games in progress

Code: Select all

.notouch-device .bga-hover-for-list:hover {
    background: linear-gradient(180deg,#e6e6e6 20%,#d8d8d8 80%); /* change to (e.g.) var(--dark-20) 20%, var(--dark-40) 80% */
}

Light/low contrast
/report?id=&player=

Code: Select all

.bga-page-section>.bga-page-section__content {
    background-color: #e9e9e9; /* change to (e.g.) var(--dark-20) */
    background-image: linear-gradient(180deg,#e3e3e3,#e9e9e9 30px,#e9e9e9 calc(100% - 15px),#ddd); /* change to (e.g.) var(--dark-10) */
}
.bg-bga-whitebg {
    --tw-bg-opacity: 1;
    background-color: rgba(244,244,244,var(--tw-bg-opacity)); /* change to (e.g.) var(--dark-0) */
}
.text-bga-gray-78 {
    color: rgba(78,78,78,var(--tw-text-opacity)); /* change to (e.g.) var(--light-70) */
}
.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgba(107,114,128,var(--tw-text-opacity)); /* change to (e.g.) var(--light-70) */
}
.text-bga-gray-141 {
    color: rgba(141,141,141,var(--tw-text-opacity)); /* change to (e.g.) var(--light-100) */
}

Code: Select all

html {
    background: #fff; /* change to (e.g.) var(--dark-0) */
    color: #000; /* change to (e.g.) var(--light-100) */
}

Low contrast
General chat remove icon

Code: Select all

.notouch-device .chatwindowremovec:hover {
    background-position: 0 -1800px; /* change black icon to white at -1720px */
}

bga_extension_mode_icon
prevent moon wrap under caret:
600px ≤ viewport width < 660px
900px ≤ viewport width < 1082px

Probably important for most users (I assume this is not just me, correct me if I'm wrong):
light theme flash before opening game box
light theme flash before forum page navigation

[Tof63]

Hello !

Thanks for the appreciations and the suggestions !
I will include them in the next version

[Sammy McSam]

Thanks for considering my suggestions
Tutorials display white background in dark mode:
https://imgur.com/a/IbgzK7x
Tested two tutorials:
https://boardgamearena.com/tutorial?game=chess
https://boardgamearena.com/tutorial?gam ... deldiavolo

Perhaps a missing class?

Code: Select all

html, body, body.mode_3d {
    background: url(chrome-extension://kchnhmpeopknjdjejognciimepllkacb/img/dark_theme/background.jpg);
}

Low contrast
/lobby
bga-player-menu
Black images e.g. https://x.boardgamearena.net/data/theme ... meguru.png
invert same as /community

Code: Select all

.palmares_details .icon20, .whypremium_icon, .panelmenuicon {
    filter: invert(.7);
}

[Tof63]

You are right for the fact that the light theme is flashing sometimes. Actually it's each time the page is refreshed, and it occures for example when you navigate through the forum. I can't find a solution for that ...

For tutorials, it's not just a missing css, it's more complicated. I have some different css code for each game, so I should detect the game (it's not a big deal) and I guess I will have to manage some things for all tutorials stuffs ... Maybe one day, it's a lot of work, and for the moment I'm not convinced that the dark mode is used by a lot of users

i sent you some private messages to discuss about some things you wanted to change

Thanks!

[Blacktango]

Hey,

Here is a new feature idea: replace the custom CSS allowed by BGA and handle it directly in the extension.

I need to add some extra CSS for some games (e.g.: unzoom to fit my screen perfectly), but I don't think it should be part of the extension's CSS.

The very boring thing with the native feature in BGA, is that you can't access to the content of the suggestion/bug reports anymore if you have added some custom CSS. There are no such problems with the CSS coming from the extension.