diff --git a/multiplayer/public/index.html b/multiplayer/public/index.html
index 077c11f1b4e3..91a6a607408f 100644
--- a/multiplayer/public/index.html
+++ b/multiplayer/public/index.html
@@ -13,7 +13,7 @@
-
+
@@ -23,6 +23,7 @@
+
diff --git a/multiplayer/src/App.css b/multiplayer/src/App.css
index 95e109efb09d..e8449320d63e 100644
--- a/multiplayer/src/App.css
+++ b/multiplayer/src/App.css
@@ -2,10 +2,6 @@
--black: #000;
--white: #fff;
- --primary-color: #E77038;
- --secondary-color: #ffeb9a;
- --tertiary-color: #E77038;
-
--header-height: 4rem;
--header-padding-top: 1rem;
@@ -29,19 +25,19 @@ code {
font-family: var(--body-font-family);
}
.common-button.primary {
- background: var(--primary-color);
- color: #fff;
- border: 1px solid var(--primary-color);
+ background: var(--pxt-primary-background);
+ color: var(--pxt-primary-foreground);
+ border: 1px solid var(--pxt-primary-background);
}
.common-button.secondary {
- background: var(--secondary-color);
- color: #fff;
- border: 1px solid var(--secondary-color);
+ background: var(--pxt-secondary-background);
+ color: var(--pxt-secondary-foreground);
+ border: 1px solid var(--pxt-secondary-background);
}
.common-button.tertiary {
- background: var(--tertiary-color);
- color: #fff;
- border: 1px solid var(--tertiary-color);
+ background: var(--pxt-tertiary-background);
+ color: var(--pxt-tertiary-foreground);
+ border: 1px solid var(--pxt-tertiary-background);
}
img.pixel-art-image {
diff --git a/multiplayer/src/App.tsx b/multiplayer/src/App.tsx
index 840f26e4ae7d..e77c7fa00e7d 100644
--- a/multiplayer/src/App.tsx
+++ b/multiplayer/src/App.tsx
@@ -12,6 +12,7 @@ import { setDeepLinks, setTargetConfig } from "./state/actions";
import { cleanupJoinCode, cleanupShareCode } from "./util";
import { joinGameAsync, hostGameAsync, visibilityChanged } from "./epics";
import { useVisibilityChange } from "./hooks";
+import { ThemeManager } from "react-common/components/theming/themeManager";
// eslint-disable-next-line import/no-unassigned-import
import "./App.css";
@@ -44,6 +45,17 @@ function App() {
.catch(() => setAuthCheckComplete(true));
}, [setAuthCheckComplete]);
+ useEffect(() => {
+ // We don't currently support switching themes in multiplayer, so just load the default.
+ const themeId = pxt.appTarget?.appTheme?.defaultColorTheme;
+ if (themeId) {
+ const themeManager = ThemeManager.getInstance(document);
+ if (themeId !== themeManager.getCurrentColorTheme()?.id) {
+ themeManager.switchColorTheme(themeId);
+ }
+ }
+ });
+
const parseUrlParams = useCallback(() => {
let params: URLSearchParams | undefined = undefined;
if (window.location.hash[1] === "?") {
diff --git a/multiplayer/src/components/Presence.tsx b/multiplayer/src/components/Presence.tsx
index 77d55cb18eb1..1844fcbd90f0 100644
--- a/multiplayer/src/components/Presence.tsx
+++ b/multiplayer/src/components/Presence.tsx
@@ -141,7 +141,7 @@ function PlayerMenu(
diff --git a/multiplayer/src/index.tsx b/multiplayer/src/index.tsx
index 74966e894be3..ed0187ba5e8c 100644
--- a/multiplayer/src/index.tsx
+++ b/multiplayer/src/index.tsx
@@ -49,7 +49,7 @@ window.addEventListener("DOMContentLoaded", () => {
const wc = pxt.webConfig as any;
for (const key of Object.keys(wc)) {
- if (wc[key]?.startsWith("/") && wc[key]?.indexOf("worker") == -1) {
+ if (typeof wc[key] === "string" && wc[key]?.startsWith("/") && wc[key]?.indexOf("worker") == -1) {
wc[key] = `http://localhost:3232${wc[key]}`;
}
}
diff --git a/multiplayer/tailwind.config.js b/multiplayer/tailwind.config.js
index 2e87932376a3..a4e866c6ae76 100644
--- a/multiplayer/tailwind.config.js
+++ b/multiplayer/tailwind.config.js
@@ -6,11 +6,11 @@ module.exports = {
extend: {
/* TODO multiplayer : How does high contrast work? */
colors: {
- "primary-color": "var(--primary-color)",
- "secondary-color": "var(--secondary-color)",
- "tertiary-color": "var(--tertiary-color)",
- "inactive-color": "var(--inactive-color)",
- "body-background-color": "var(--body-background-color);",
+ "primary-color": "var(--pxt-primary-background)",
+ "secondary-color": "var(--pxt-secondary-background)",
+ "tertiary-color": "var(--pxt-tertiary-background)",
+ "inactive-color": "var(--pxt-neutral-background3)",
+ "body-background-color": "var(--pxt-neutral-background1);",
white: "var(--white)",
slot: {
0: "rgb(var(--slot-0-color))", // empty slot