Stylesheet (CSS)

All CSS rules for your game should be stored in a file called <yourgamename>.css at the root of your project folder.

General rules

The CSS has three main responsibilities:

• Define the layout of your game
• Define the rules for image sprites
• Set a thematic background

.game-element {
    filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.7));
}    
.dj_safari .game-element {
    filter: none;
}

Examples

Setting a thematic background for the game

body {
    background: url('img/background.webp'), #f2f2f2;
}

Layout

#player-tables {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}

Single-row sprite

.disc {
    position: absolute;
    width: 54px;
    height: 54px;
    background-image: url('img/discs.webp');
    background-size: auto 100%;
}
.disc[data-side="white"] { 
    background-position-x: 0%;
}
.disc[data-side="black"] { 
    background-position-x: 100%; 
}

In this example, <div class="disc" data-side="white"></div> will display a white disc, and changing the data-side attribute to black will show the black disc from the same sprite.

Card sprite

.card {
    position: absolute;
    width: 100px;
    height: 200px;
    background-image: url('img/cards.webp');
    background-size: 1000% 400%;
    background-position-x: calc(var(--card-column) * 100% / 9);
    background-position-y: calc(var(--card-row) * 100% / 3);
}

In this example, <div class="card" style="--card-row: 0; --card-column: 2;"></div> will display the third card in the first row (using zero-based indices).

Dark mode support

BGA supports dark mode natively. Players can toggle it by clicking on their avatar before starting a game or opening the hamburger menu in the top-right corner during a game. When dark mode is enabled, BGA adds the data-theme="dark" attribute to the html element. Use the [data-theme="dark"] selector to override the default light styles when the player enables dark mode.

body {
    background: url('img/light-background.webp'), #f2f2f2;
}
[data-theme="dark"] body {
    background: url('img/dark-background.webp'), #1d1d1d;
}

[data-theme="light"] .player-board {
    --game-bga-player-panel-background: white;
}

Use this selector instead of @media (prefers-color-scheme: dark), because the media query relies on the browser settings and ignores the BGA toggle.

If you don't have a separate image for dark mode, you can try this:

[data-theme="dark"] body {
  background-blend-mode: color-burn;
}

Migrating

Most games work in dark mode out of the box. A common problem occurs when a game sets a fixed light background color for an element without setting its text color. This works in light mode, but in dark mode it can result in light text on a light background. Adding color: black; to elements with a fixed light background fixes this issue in dark mode and continues to work in light mode.

Example of a background option compatible with dark mode

If you have both light and dark backgrounds and want an automatic setting that follows the selected theme, you can add this user preference:

    "103": {
        "name": "Background",
        "values": {
            "0": {
                "name": "Automatic"
            },
            "1": {
                "name": "Light"
            },
            "2": {
                "name": "Dark"
            }
        },
        "default": 0
    }

Then in the CSS:

[data-theme="light"] body[data-background="0"], body[data-background="1"] {
  background: url('img/background-light.webp');
}
[data-theme="dark"] body[data-background="0"], body[data-background="2"] {
  background: url('img/background-dark.webp');
}

If you have this.bga.userPreferences.onChange = (prefId, prefValue) => this.onUserPreferenceChanged(prefId, prefValue); or something similar in your setup, add the following code to the callback so that the body element’s data-background attribute updates as soon as the user preference changes:

    /**
     * @param {number} prefId
     * @param {number} prefValue
     */
    onUserPreferenceChanged(prefId, prefValue) {
        switch (prefId) {
            case 103:
                document.body.dataset.background = `${prefValue}`;
                break;
        }
    }

Using SCSS

You can use SCSS to split your CSS rules into multiple files and use features such as nested rules and loops.

To use SCSS, rename src-disabled to src and write your SCSS rules in the src/scss folder. The build setup will generate yourgamename.css for you. See the VSCode setup page to configure automatic builds when you save SCSS files.