Game interface stylesheet: yourgamename.css - Revision history

Nalka: Dark mode is now live + fix typos

2026-08-23T15:30:29Z

Dark mode is now live + fix typos

← Older revision		Revision as of 17:30, 23 August 2026
Line 106:		Line 106:

	== Support of the Dark mode ==		== Support of the Dark mode ==
	BGA ~~will soon support~~ Dark mode natively, ~~and~~ it can ~~be tested on the Studio with a toggle~~ available by clicking on your avatar before starting a game. It adds a <code>[data-theme="dark"]</code> to the html tag if the dark mode is enabled. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.		BGA supports Dark mode natively, it can toggled available by clicking on your avatar before starting a game or the hamburger menu (top-right corner) during a game. It adds a <code>[data-theme="dark"]</code> to the html tag if the dark mode is enabled. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.
	<pre>		<pre>
	html {		html {
Line 132:		Line 132:
	=== Migrating ===		=== Migrating ===

	Most games ~~works~~ in dark mode out of the box. The usual problem is if the game ~~set~~ a fixed (light) background color for an element without setting the text color : it works great in light mode, but in dark mode it will have a light text color on a light background. Adding <code>color: black;</code> on the elements you put a fixed light background will fix it on dark mode while still work in light mode.		Most games work in dark mode out of the box. The usual problem is if the game sets a fixed (light) background color for an element without setting the text color: it works great in light mode, but in dark mode it will have a light text color on a light background. Adding <code>color: black;</code> on the elements you put a fixed light background will fix it on dark mode while still work in light mode.

	=== Using the work of the extension to migrate ===		=== Using the work of the extension to migrate ===
	For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.		For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.

	If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode ~~when the toggle is activated to all players in production~~, even if they don't have the extension.		If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode, even if they don't have the extension.

	=== Example of a background option compatible with dark mode ===		=== Example of a background option compatible with dark mode ===
Line 169:		Line 169:
	</pre>		</pre>

	If you have <code>this.bga.userPreferences.onChange = (prefId, prefValue) => this.onUserPreferenceChanged(prefId, prefValue);</code> or something similar in the setup, you can add this extract to the callback (remove the typing in the function signature if you're not using TS), so the html[data-background] updates as soon as the user preference changes :		If you have <code>this.bga.userPreferences.onChange = (prefId, prefValue) => this.onUserPreferenceChanged(prefId, prefValue);</code> or something similar in the setup, you can add this extract to the callback (remove the typing in the function signature if you're not using TS), so the html[data-background] updates as soon as the user preference changes:
	<pre>		<pre>
	public onUserPreferenceChanged(prefId: number, prefValue: number) {		public onUserPreferenceChanged(prefId: number, prefValue: number) {

Thoun: /* Support of the Dark mode */

2026-06-25T09:12:32Z

Support of the Dark mode

← Older revision		Revision as of 11:12, 25 June 2026
Line 129:		Line 129:
	</pre>		</pre>
	Using the DevTool, try the different values of this property to find the one that would work best with your base image.		Using the DevTool, try the different values of this property to find the one that would work best with your base image.

			=== Migrating ===

			Most games works in dark mode out of the box. The usual problem is if the game set a fixed (light) background color for an element without setting the text color : it works great in light mode, but in dark mode it will have a light text color on a light background. Adding <code>color: black;</code> on the elements you put a fixed light background will fix it on dark mode while still work in light mode.

	=== Using the work of the extension to migrate ===		=== Using the work of the extension to migrate ===

Thoun: /* Support of the Dark mode */

2026-06-25T09:10:03Z

Support of the Dark mode

← Older revision		Revision as of 11:10, 25 June 2026
Line 114:		Line 114:
	background: url('img/dark-background.jpg'), #1d1d1d;		background: url('img/dark-background.jpg'), #1d1d1d;
	}		}
			/* Example to change the player panel color, for light mode only */
	html[data-theme="light"] .player-board {		html[data-theme="light"] .player-board {
	--game-bga-player-panel-background: white;		--game-bga-player-panel-background: white;
Line 120:		Line 121:

	It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, ignoring the BGA toggle.		It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, ignoring the BGA toggle.

	~~For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.~~

	If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode when the toggle is activated to all players in production, even if they don't have the extension.

	If you don't have a specific image for the dark mode, you can try this:		If you don't have a specific image for the dark mode, you can try this:
Line 132:		Line 129:
	</pre>		</pre>
	Using the DevTool, try the different values of this property to find the one that would work best with your base image.		Using the DevTool, try the different values of this property to find the one that would work best with your base image.

			=== Using the work of the extension to migrate ===
			For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.

			If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode when the toggle is activated to all players in production, even if they don't have the extension.

	=== Example of a background option compatible with dark mode ===		=== Example of a background option compatible with dark mode ===

Thoun: /* Support of the Dark mode */

2026-06-22T07:54:28Z

Support of the Dark mode

← Older revision		Revision as of 09:54, 22 June 2026
Line 124:		Line 124:

	If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode when the toggle is activated to all players in production, even if they don't have the extension.		If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode when the toggle is activated to all players in production, even if they don't have the extension.

			If you don't have a specific image for the dark mode, you can try this:
			<pre>
			html[data-theme="dark"] {
			background-blend-mode: color-burn;
			}
			</pre>
			Using the DevTool, try the different values of this property to find the one that would work best with your base image.

	=== Example of a background option compatible with dark mode ===		=== Example of a background option compatible with dark mode ===

Thoun: /* Support of the Dark mode */

2026-06-17T11:49:17Z

Support of the Dark mode

← Older revision		Revision as of 13:49, 17 June 2026
Line 113:		Line 113:
	html[data-theme="dark"] {		html[data-theme="dark"] {
	background: url('img/dark-background.jpg'), #1d1d1d;		background: url('img/dark-background.jpg'), #1d1d1d;
			}
			html[data-theme="light"] .player-board {
			--game-bga-player-panel-background: white;
	}		}
	</pre>		</pre>

Thoun: /* Support of the Dark mode */

2026-06-17T10:17:55Z

Support of the Dark mode

← Older revision		Revision as of 12:17, 17 June 2026
Line 120:		Line 120:
	For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.		For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.

	If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension when to toggle is activated to all players in production.		If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode when the toggle is activated to all players in production, even if they don't have the extension.

	=== Example of a background option compatible with dark mode ===		=== Example of a background option compatible with dark mode ===

Thoun: /* Support of the Dark mode */

2026-06-17T10:12:31Z

Support of the Dark mode

← Older revision		Revision as of 12:12, 17 June 2026
Line 106:		Line 106:

	== Support of the Dark mode ==		== Support of the Dark mode ==
	~~Currently,~~ BGA ~~doesn't~~ support Dark mode natively. ~~But it~~ adds a <code>[data-theme="dark"]</code> to the html tag if the ~~player's browser is set to prefer-~~dark-mode. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.		BGA will soon support Dark mode natively, and it can be tested on the Studio with a toggle available by clicking on your avatar before starting a game. It adds a <code>[data-theme="dark"]</code> to the html tag if the dark mode is enabled. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.
	<pre>		<pre>
	html {		html {
Line 116:		Line 116:
	</pre>		</pre>

	~~Currently it~~ is ~~filled with the~~ <code>prefers-color-scheme</code> media query of the browser.		It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, ignoring the BGA toggle.

	~~It is better to use this instead of~~ using ~~<code>@media (prefers-color-scheme~~: ~~dark) {<~~/~~code> because~~ the ~~media query would always rely on the browser settings, while BGA has more control over <code>~~[data-theme~~="dark"~~]~~</code>~~.		For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.

	If one day BGA supports the dark mode with an auto/light/dark toggle in the user settings on BGA, the <code>[data-theme="dark"]</code> will be adapted to use it, when the media query will ignore the player settings and your game may mismatch with the user settings.		If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/css/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension when to toggle is activated to all players in production.

	For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.

	If you wish to manage your game's dark mode, you can ~~contact~~ the [https://~~boardgamearena~~.com/~~player?id=85644210~~ extension~~'s authors]~~ to obtain the css currently applied to your game by the extension, so ~~that~~ you can ~~modify~~ it to ~~your tastes (don't forget~~ to ~~let them know when your modifications are online, so that the css can then be removed from~~ the extension)

	=== Example of a background option compatible with dark mode ===		=== Example of a background option compatible with dark mode ===

Thoun: /* Support of the Dark mode */

2026-06-17T10:08:23Z

Support of the Dark mode

← Older revision		Revision as of 12:08, 17 June 2026
Line 125:		Line 125:

	If you wish to manage your game's dark mode, you can contact the [https://boardgamearena.com/player?id=85644210 extension's authors] to obtain the css currently applied to your game by the extension, so that you can modify it to your tastes (don't forget to let them know when your modifications are online, so that the css can then be removed from the extension)		If you wish to manage your game's dark mode, you can contact the [https://boardgamearena.com/player?id=85644210 extension's authors] to obtain the css currently applied to your game by the extension, so that you can modify it to your tastes (don't forget to let them know when your modifications are online, so that the css can then be removed from the extension)

			=== Example of a background option compatible with dark mode ===
			If you have a light and a dark background, and you want an automatic setting to be based on the dark mode, you can add this as a user preference :
			<pre>
			"103": {
			"name": "Background",
			"values": {
			"0": {
			"name": "Automatic"
			},
			"1": {
			"name": "Light"
			},
			"2": {
			"name": "Dark"
			}
			},
			"default": 0
			}
			</pre>

			Then in the CSS:
			<pre>
			html[data-background="0"][data-theme="light"], html[data-background="1"] {
			background: url('img/background-light.jpg');
			}
			html[data-background="0"][data-theme="dark"], html[data-background="2"] {
			background: url('img/background-dark.jpg');
			}
			</pre>

			If you have <code>this.bga.userPreferences.onChange = (prefId, prefValue) => this.onUserPreferenceChanged(prefId, prefValue);</code> or something similar in the setup, you can add this extract to the callback (remove the typing in the function signature if you're not using TS), so the html[data-background] updates as soon as the user preference changes :
			<pre>
			public onUserPreferenceChanged(prefId: number, prefValue: number) {
			switch (prefId) {
			case 103:
			document.documentElement.dataset.background = `${prefValue}`;
			break;
			}
			}
			</pre>

	[[Category:Studio]]		[[Category:Studio]]

Tof63: Added a comment to encourage developers to contact the extension authors.

2025-07-01T08:35:51Z

Added a comment to encourage developers to contact the extension authors.

← Older revision		Revision as of 10:35, 1 July 2025
Line 123:		Line 123:

	For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.		For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.

			If you wish to manage your game's dark mode, you can contact the [https://boardgamearena.com/player?id=85644210 extension's authors] to obtain the css currently applied to your game by the extension, so that you can modify it to your tastes (don't forget to let them know when your modifications are online, so that the css can then be removed from the extension)

	[[Category:Studio]]		[[Category:Studio]]

Tof63: Add link to BGA extension doc

2025-07-01T08:24:39Z

Add link to BGA extension doc

← Older revision		Revision as of 10:24, 1 July 2025
Line 122:		Line 122:
	If one day BGA supports the dark mode with an auto/light/dark toggle in the user settings on BGA, the <code>[data-theme="dark"]</code> will be adapted to use it, when the media query will ignore the player settings and your game may mismatch with the user settings.		If one day BGA supports the dark mode with an auto/light/dark toggle in the user settings on BGA, the <code>[data-theme="dark"]</code> will be adapted to use it, when the media query will ignore the player settings and your game may mismatch with the user settings.

	For those using the BGA extension, it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.		For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.

	[[Category:Studio]]		[[Category:Studio]]