Use Default Theme in Multiplayer (#10399)

thsparks · web-flow · commit ab72ff29f447 · 2025-02-26T11:36:27.000-08:00
Themes impact multiplayer in a few places (though not many, since it primarily uses Tailwind). Notably, the settings dropdown and a few buttons. Actually supporting themes would be a big undertaking, so for now, I've just set it up to always load the default theme.

With themes, the presence buttons were getting dark backgrounds because they were disabled. This looked odd, so I've added a tailwind class to force them back to their white backgrounds instead.

I also had to fix a bug in our multiplayer serve that assumed all webconfig values were strings (no longer the case with ocv).
diff --git a/multiplayer/public/index.html b/multiplayer/public/index.html
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="/blb/icons.css" type="text/css">
     <link rel="stylesheet" href="/blb/react-common-multiplayer.css" type="text/css">
   </head>
-  <body>
+  <body class="pxt-theme-root">
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <!-- @include tracking.html -->
@@ -23,6 +23,7 @@
     <script type="text/javascript" src="/blb/target.js"></script>
     <script type="text/javascript" src="/blb/pxtlib.js"></script>
     <script type="text/javascript" src="/blb/pxtsim.js"></script>
+    <script type="text/javascript" src="/blb/pxtrcdeps.js"></script>
 
 
     <div id="root"></div>
diff --git 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
@@ -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
@@ -141,7 +141,7 @@ function PlayerMenu(
         <div>
             <div className="tw-px-[50%]">{menu}</div>
             <Button
-                className="tw-rounded-full tw-m-0 tw-p-0"
+                className="tw-rounded-full tw-m-0 tw-p-0 !tw-bg-white"
                 hardDisabled={!menu}
                 label={
                     <div
diff --git a/multiplayer/src/components/TabButton.tsx b/multiplayer/src/components/TabButton.tsx
@@ -22,7 +22,7 @@ export default function Render(props: {
                 }
                 style={{
                     borderColor: props.selected
-                        ? "var(--primary-color)"
+                        ? "var(--pxt-primary-background)"
                         : "transparent",
                 }}
             ></div>
diff --git 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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export default function Render(props: {`
`22`	`22`	`}`
`23`	`23`	`style={{`
`24`	`24`	`borderColor: props.selected`
`25`		`- ? "var(--primary-color)"`
	`25`	`+ ? "var(--pxt-primary-background)"`
`26`	`26`	`: "transparent",`
`27`	`27`	`}}`
`28`	`28`	`></div>`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ window.addEventListener("DOMContentLoaded", () => {`
`49`	`49`	`const wc = pxt.webConfig as any;`
`50`	`50`
`51`	`51`	`for (const key of Object.keys(wc)) {`
`52`		`- if (wc[key]?.startsWith("/") && wc[key]?.indexOf("worker") == -1) {`
	`52`	`+ if (typeof wc[key] === "string" && wc[key]?.startsWith("/") && wc[key]?.indexOf("worker") == -1) {`
`53`	`53`	wc[key] = `http://localhost:3232${wc[key]}`;
`54`	`54`	`}`
`55`	`55`	`}`