pxt-core 13.2.0 → 13.2.1

package/localtypings/pxtarget.d.ts

@@ -262,6 +262,28 @@ declare namespace pxt {
         order?: number;     // Sort order
     }
 
+    interface SimulatorTheme extends Map<string> {
+        layout: string;
+    }
+
+    interface SimulatorThemePreset {
+        id: string;
+        name: string;
+        theme: SimulatorTheme;
+    }
+
+    interface SimulatorThemeColorField {
+        property: string;
+        label: string;
+        defaultValue: string;
+    }
+
+    interface SimulatorThemeLayout {
+        id: string;
+        name: string;
+        colorFields?: SimulatorThemeColorField[]; // replaces the standard color fields for this layout
+    }
+
     interface AppSimulator {
         autoRun?: boolean; // enable autoRun in regular mode, not light mode
         autoRunLight?: boolean; // force autorun in light mode
@@ -286,6 +308,8 @@ declare namespace pxt {
         invalidatedClass?: string; // CSS class to be applied to the sim iFrame when it needs to be updated (defaults to sepia filter)
         stoppedClass?: string; // CSS class to be applied to the sim iFrame when it isn't running (defaults to grayscale filter)
         keymap?: boolean; // when non-empty and autoRun is disabled, this code is run upon simulator first start
+        themePresets?: SimulatorThemePreset[]; // customizable simulator themes offered by the editor
+        themeLayouts?: SimulatorThemeLayout[]; // additional simulator layouts offered by the theme editor; Default is always included
 
         // a map of allowed simulator channel to URL to handle specific control messages
         // DEPRECATED. Use `simx` in targetconfig.json approvedRepoLib instead.
@@ -641,6 +665,7 @@ declare namespace pxt {
         id: string; // Unique identifier
         name: string; // Human-readable name
         weight?: number; // Lower weights appear first in theme list, no value = go to end
+        defaultSimulatorTheme?: string | Partial<SimulatorTheme>; // Simulator preset id or partial inline theme used by Default
         overrideCss?: string; // Special css to apply for the theme
         monacoBaseTheme?: string; // Theme for monaco editor, see https://code.visualstudio.com/docs/getstarted/themes
         colors: { [key: string]: string }; // Values for theme variables

package/localtypings/pxteditor.d.ts

@@ -83,6 +83,7 @@ declare namespace pxt.editor {
         | "showthemepicker"
         | "togglehighcontrast"
         | "sethighcontrast" // EditorMessageSetHighContrastRequest
+        | "setsimulatortheme" // EditorMessageSetSimulatorThemeRequest
         | "togglegreenscreen"
         | "togglekeyboardcontrols"
         | "togglescreenreadermode"
@@ -406,6 +407,12 @@ declare namespace pxt.editor {
         on: boolean;
     }
 
+    export interface EditorMessageSetSimulatorThemeRequest extends EditorMessageRequest {
+        action: "setsimulatortheme";
+        preference: pxt.auth.SimulatorThemePreference;
+        savePreference?: boolean;
+    }
+
     export interface EditorMessageStartActivity extends EditorMessageRequest {
         action: "startactivity";
         activityType: "tutorial" | "example" | "recipe";
@@ -830,6 +837,7 @@ declare namespace pxt.editor {
         areaMenuOpen?: boolean;
         feedback?: FeedbackState;
         themePickerOpen?: boolean;
+        simulatorThemePickerOpen?: boolean;
         errorListNote?: string;
         timeMachine?: boolean;
     }
@@ -992,8 +1000,8 @@ declare namespace pxt.editor {
         setEditorOffset(): void;
 
         anonymousPublishHeaderByIdAsync(headerId: string, projectName?: string): Promise<ShareData>;
-        publishCurrentHeaderAsync(persistent: boolean, screenshotUri?: string): Promise<string>;
-        publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean): Promise<ShareData>;
+        publishCurrentHeaderAsync(persistent: boolean, screenshotUri?: string, simulatorTheme?: pxt.SimulatorTheme): Promise<string>;
+        publishAsync (name: string, description?: string,screenshotUri?: string, forceAnonymous?: boolean, simulatorTheme?: pxt.SimulatorTheme): Promise<ShareData>;
 
         startStopSimulator(opts?: SimulatorStartOptions): void;
         stopSimulator(unload?: boolean, opts?: SimulatorStartOptions): void;
@@ -1123,6 +1131,7 @@ declare namespace pxt.editor {
         getSharePreferenceForHeader(): boolean;
         saveSharePreferenceForHeaderAsync(anonymousByDefault: boolean): Promise<void>;
         setColorThemeById(colorThemeId: string, savePreference: boolean): void;
+        setSimulatorThemePreference(preference: pxt.auth.SimulatorThemePreference, savePreference?: boolean): Promise<void>;
     }
 
     export interface IHexFileImporter {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.2.0",
+  "version": "13.2.1",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

package/react-common/components/controls/Card.tsx

@@ -5,6 +5,7 @@ export interface CardProps extends ContainerProps {
     onClick?: () => void;
     tabIndex?: number;
     ariaLabelledBy?: string;
+    ariaPressed?: boolean;
     label?: React.ReactNode;
     labelClass?: string;
 }
@@ -17,6 +18,7 @@ export const Card = (props: CardProps) => {
         children,
         ariaDescribedBy,
         ariaLabelledBy,
+        ariaPressed,
         ariaHidden,
         ariaLabel,
         onClick,
@@ -38,6 +40,7 @@ export const Card = (props: CardProps) => {
                         tabIndex={tabIndex}
                         aria-describedby={ariaDescribedBy}
                         aria-labelledby={ariaLabelledBy}
+                        aria-pressed={ariaPressed}
                         onClick={onClick}
                     />
                 }

package/react-common/components/controls/Modal.tsx

@@ -22,6 +22,7 @@ export interface ModalAction {
 
 export interface ModalProps extends ContainerProps {
     title: string;
+    hideTitle?: boolean;
     leftIcon?: string;
     ariaDescribedBy?: string;
     actions?: ModalAction[];
@@ -42,6 +43,7 @@ export const Modal = (props: ModalProps) => {
         ariaDescribedBy,
         role,
         title,
+        hideTitle,
         leftIcon,
         actions,
         onClose,
@@ -106,11 +108,11 @@ export const Modal = (props: ModalProps) => {
                         />
                     </div>
                 }
-                <div id="modal-title" className="common-modal-title">
+                <div id="modal-title" className={classList("common-modal-title", hideTitle && "sr-only")}>
                     {leftIcon && <i className={leftIcon} aria-hidden={true}/>}
                     {title}
                 </div>
-                {fullscreen && rightHeader &&
+                {rightHeader &&
                     <div className="common-modal-right-menu">
                         {rightHeader}
                     </div>

package/react-common/components/share/Share.tsx

@@ -24,10 +24,11 @@ export interface ShareProps {
     hasProjectBeenPersistentShared?: boolean;
     anonymousShareByDefault?: boolean;
     isMultiplayerGame?: boolean; // Arcade: Does the game being shared have multiplayer enabled?
+    simulatorTheme?: pxt.SimulatorTheme;
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean, simulatorTheme?: pxt.SimulatorTheme) => Promise<ShareData>;
     onClose: () => void;
 }
 
@@ -43,6 +44,7 @@ export const Share = (props: ShareProps) => {
         anonymousShareByDefault,
         setAnonymousSharePreference,
         isMultiplayerGame,
+        simulatorTheme,
         kind,
         onClose
     } = props;
@@ -55,6 +57,7 @@ export const Share = (props: ShareProps) => {
             simRecorder={simRecorder}
             publishAsync={publishAsync}
             isMultiplayerGame={isMultiplayerGame}
+            simulatorTheme={simulatorTheme}
             kind={kind}
             hasProjectBeenPersistentShared={hasProjectBeenPersistentShared}
             anonymousShareByDefault={anonymousShareByDefault}

package/react-common/components/share/ShareInfo.tsx

@@ -25,8 +25,9 @@ export interface ShareInfoProps {
     isLoggedIn?: boolean;
     hasProjectBeenPersistentShared?: boolean;
     simRecorder: SimRecorder;
-    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
+    publishAsync: (name: string, description?: string, screenshotUri?: string, forceAnonymous?: boolean, simulatorTheme?: pxt.SimulatorTheme) => Promise<ShareData>;
     isMultiplayerGame?: boolean; // Arcade: Does the game being shared have multiplayer enabled?
+    simulatorTheme?: pxt.SimulatorTheme;
     kind?: "multiplayer" | "vscode" | "share"; // Arcade: Was the share dialog opened specifically for hosting a multiplayer game?
     anonymousShareByDefault?: boolean;
     setAnonymousSharePreference?: (anonymousByDefault: boolean) => void;
@@ -46,6 +47,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
         anonymousShareByDefault,
         setAnonymousSharePreference,
         isMultiplayerGame,
+        simulatorTheme,
         kind = "share",
         onClose,
     } = props;
@@ -62,6 +64,7 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const [ kioskState, setKioskState ] = React.useState(false);
     const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn || anonymousShareByDefault);
     const [ isShowingMultiConfirmation, setIsShowingMultiConfirmation ] = React.useState(false);
+    const [ shareWithSimulatorTheme, setShareWithSimulatorTheme ] = React.useState(false);
 
     const { simScreenshot, simGif } = pxt.appTarget.appTheme;
     const showSimulator = (simScreenshot || simGif) && !!simRecorder;
@@ -96,7 +99,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous,
+            shareWithSimulatorTheme ? simulatorTheme : undefined);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) setShareState("publish");
         else setShareState("share")
@@ -105,7 +109,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const handlePublishInVscodeClick = async () => {
         setShareState("publishing");
         setLastShareWasAnonymous(isAnonymous);
-        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
+        let publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous,
+            shareWithSimulatorTheme ? simulatorTheme : undefined);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) {
             setShareState("publish-vscode");
@@ -241,7 +246,8 @@ export const ShareInfo = (props: ShareInfoProps) => {
         setIsShowingMultiConfirmation(false);
         setLastShareWasAnonymous(isAnonymous);
 
-        const publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous);
+        const publishedShareData = await publishAsync(name, description, thumbnailUri, isAnonymous,
+            shareWithSimulatorTheme ? simulatorTheme : undefined);
 
         // TODO multiplayer: This won't work on staging (parseScriptId domains check doesn't include staging urls)
         // but those wouldn't load anyways (as staging multiplayer is currently fetching games from prod links)
@@ -323,6 +329,11 @@ export const ShareInfo = (props: ShareInfoProps) => {
         if (setAnonymousSharePreference) setAnonymousSharePreference(!newValue);
     }
 
+    const handleShareWithSimulatorThemeClick = (newValue: boolean) => {
+        pxt.tickEvent("share.simulatorTheme", { checked: newValue.toString() });
+        setShareWithSimulatorTheme(newValue);
+    }
+
     const inputTitle = prePublish ? lf("Project Name") :
         (shareState === "publish-vscode" ? lf("Share Successful") : lf("Project Link"));
 
@@ -400,6 +411,12 @@ export const ShareInfo = (props: ShareInfoProps) => {
                             isChecked={!isAnonymous}
                             onChange={handleAnonymousShareClick}
                             />}
+                        {simulatorTheme && <Checkbox
+                            id="share-simulator-theme-checkbox"
+                            label={lf("Share with your simulator theme")}
+                            isChecked={shareWithSimulatorTheme}
+                            onChange={handleShareWithSimulatorThemeClick}
+                            />}
                         </>
                     }
                     {prePublish && <>

package/react-common/components/theming/SimulatorThemePickerModal.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+
+import { Input } from "../controls/Input";
+import { Modal } from "../controls/Modal";
+import { copySimulatorTheme, getSimulatorThemeForLayout } from "./simulatorThemeDefaults";
+import { ThemePickerToggle } from "./ThemePickerModal";
+
+export interface SimulatorThemePickerModalProps {
+    presets: pxt.SimulatorThemePreset[];
+    layouts?: pxt.SimulatorThemeLayout[];
+    initialPreference?: pxt.auth.SimulatorThemePreference;
+    defaultTheme?: pxt.SimulatorTheme;
+    accountTheme?: pxt.SimulatorTheme;
+    renderPreview: (theme: pxt.SimulatorTheme) => React.ReactNode;
+    onEditorThemeClicked?: () => void;
+    onUseAccountTheme?: () => void | Promise<void>;
+    onThemeChanged?: (preference: pxt.auth.SimulatorThemePreference) => void;
+    onSave: (preference: pxt.auth.SimulatorThemePreference) => void | Promise<void>;
+    onClose: () => void;
+}
+
+const CUSTOM_PRESET_ID = "custom";
+const ACCOUNT_PRESET_ID = "account";
+
+function getDefaultColorFields(theme: pxt.SimulatorTheme): pxt.SimulatorThemeColorField[] {
+    const labels: pxt.Map<string> = {
+        "background-color": lf("Console"),
+        "button-stroke": lf("Button outline"),
+        "text-color": lf("Button labels"),
+        "button-fill": lf("Buttons"),
+        "dpad-fill": lf("D-pad"),
+        "joystick-handle-stroke": lf("Joystick handle outline"),
+    };
+    return pxt.auth.DEFAULT_SIMULATOR_THEME_COLOR_PROPERTIES.map(property => ({
+        property,
+        label: labels[property],
+        defaultValue: theme[property],
+    }));
+}
+
+function getPresetId(theme: pxt.SimulatorTheme, presets: pxt.SimulatorThemePreset[]): string | undefined {
+    return presets.find(preset => pxt.auth.simulatorThemeColorsEqual(preset.theme, theme))?.id;
+}
+
+function normalizeColor(value: string): string | undefined {
+    const normalized = value.startsWith("#") ? value : `#${value}`;
+    return /^#[0-9a-f]{6}$/i.test(normalized) ? normalized.toUpperCase() : undefined;
+}
+
+export const SimulatorThemePickerModal = (props: SimulatorThemePickerModalProps) => {
+    const {
+        presets,
+        layouts,
+        initialPreference,
+        defaultTheme,
+        accountTheme,
+        renderPreview,
+        onEditorThemeClicked,
+        onUseAccountTheme,
+        onThemeChanged,
+        onSave,
+        onClose,
+    } = props;
+    const defaultColorFields = getDefaultColorFields(presets[0].theme);
+    const getColorFields = (layoutId: string) => {
+        const fields = layouts?.find(layout => layout.id === layoutId)?.colorFields;
+        return fields?.map(field => ({
+            ...field,
+            label: pxt.Util.rlf(`{id:simulator-theme-field}${field.label}`),
+        })) || defaultColorFields;
+    };
+    const savedPreset = presets.find(preset => preset.id === initialPreference?.presetId);
+    const initialPresetId = savedPreset
+        ? savedPreset.id
+        : initialPreference
+            ? getPresetId(initialPreference.theme, presets) || CUSTOM_PRESET_ID
+        : onUseAccountTheme
+            ? ACCOUNT_PRESET_ID
+            : presets[0].id;
+    const initialThemeSource = initialPresetId === "default"
+        ? defaultTheme || initialPreference?.theme || savedPreset?.theme || presets[0].theme
+        : initialPreference?.theme || savedPreset?.theme || accountTheme || presets[0].theme;
+    const initialLayoutId = initialPreference?.theme.layout
+        || initialThemeSource.layout
+        || pxt.auth.DEFAULT_SIMULATOR_LAYOUT;
+    const initialTheme = getSimulatorThemeForLayout(
+        initialThemeSource,
+        initialLayoutId,
+        getColorFields(initialLayoutId)
+    );
+    const [presetId, setPresetId] = React.useState(initialPresetId);
+    const [theme, setTheme] = React.useState<pxt.SimulatorTheme>(initialTheme);
+    const layoutId = theme.layout;
+    const layoutIsKnown = layoutId === pxt.auth.DEFAULT_SIMULATOR_LAYOUT || layouts?.some(layout => layout.id === layoutId);
+    const colorFields = getColorFields(layoutId);
+
+    const selectPreset = (id: string) => {
+        if (id === ACCOUNT_PRESET_ID && onUseAccountTheme) {
+            setPresetId(id);
+            const nextTheme = copySimulatorTheme(accountTheme || presets[0].theme);
+            setTheme(getSimulatorThemeForLayout(nextTheme, nextTheme.layout, getColorFields(nextTheme.layout)));
+            return;
+        }
+        const preset = presets.find(candidate => candidate.id === id);
+        if (!preset) return;
+        const presetTheme = copySimulatorTheme(id === "default" ? defaultTheme || preset.theme : preset.theme);
+        const nextTheme = getSimulatorThemeForLayout(
+            presetTheme,
+            presetTheme.layout,
+            getColorFields(presetTheme.layout)
+        );
+        setPresetId(id);
+        setTheme(nextTheme);
+        onThemeChanged?.({ presetId: id, theme: nextTheme });
+    };
+
+    const updateColor = (property: string, color: string) => {
+        const normalized = normalizeColor(color);
+        if (!normalized) return;
+        const nextTheme = {
+            ...theme,
+            [property]: normalized,
+        };
+        setPresetId(CUSTOM_PRESET_ID);
+        setTheme(nextTheme);
+        onThemeChanged?.({ presetId: CUSTOM_PRESET_ID, theme: nextTheme });
+    };
+
+    const selectLayout = (id: string) => {
+        const nextTheme = getSimulatorThemeForLayout(theme, id, getColorFields(id));
+        setPresetId(CUSTOM_PRESET_ID);
+        setTheme(nextTheme);
+        onThemeChanged?.({ presetId: CUSTOM_PRESET_ID, theme: nextTheme });
+    };
+
+    return <Modal
+        id="simulator-theme-picker-modal"
+        title={lf("Simulator Theme")}
+        hideTitle={!!onEditorThemeClicked}
+        className={`simulator-theme-picker-modal${onEditorThemeClicked ? "" : " standalone"}`}
+        onClose={onClose}
+        rightHeader={onEditorThemeClicked && <ThemePickerToggle
+            selected="simulator"
+            onModeChanged={onEditorThemeClicked} />}
+        actions={[
+            {
+                label: lf("Apply"),
+                className: "primary",
+                onClick: () => presetId === ACCOUNT_PRESET_ID
+                    ? onUseAccountTheme?.()
+                    : onSave({ presetId, theme }),
+            },
+        ]}>
+        <div className="simulator-theme-picker">
+            {renderPreview(theme)}
+            <div className="simulator-theme-controls">
+                <div className="simulator-theme-select-field">
+                    <label htmlFor="simulator-theme-preset">
+                        {onUseAccountTheme ? lf("Theme") : lf("Built-in theme")}
+                    </label>
+                    <select
+                        id="simulator-theme-preset"
+                        aria-label={onUseAccountTheme ? lf("Project simulator theme") : lf("Built-in simulator theme")}
+                        className="simulator-theme-select"
+                        value={presetId}
+                        onChange={event => selectPreset(event.target.value)}>
+                        {onUseAccountTheme && <option value={ACCOUNT_PRESET_ID}>{lf("Use account theme")}</option>}
+                        {presetId === CUSTOM_PRESET_ID && <option value={CUSTOM_PRESET_ID} disabled>{lf("Custom")}</option>}
+                        {presets.map(preset => <option key={preset.id} value={preset.id}>
+                            {pxt.Util.rlf(`{id:simulator-theme-name}${preset.name}`)}
+                        </option>)}
+                    </select>
+                </div>
+                {!!layouts?.length && <div className="simulator-theme-select-field">
+                    <label htmlFor="simulator-theme-layout">{lf("Layout")}</label>
+                    <select
+                        id="simulator-theme-layout"
+                        aria-label={lf("Simulator layout")}
+                        className="simulator-theme-select"
+                        value={layoutId}
+                        onChange={event => selectLayout(event.target.value)}>
+                        <option value={pxt.auth.DEFAULT_SIMULATOR_LAYOUT}>{lf("Default")}</option>
+                        {!layoutIsKnown && <option value={layoutId} disabled>{lf("Custom ({0})", layoutId)}</option>}
+                        {layouts.map(layout => <option key={layout.id} value={layout.id}>
+                            {pxt.Util.rlf(`{id:simulator-layout-name}${layout.name}`)}
+                        </option>)}
+                    </select>
+                </div>}
+                <div className="simulator-theme-color-list">
+                    {colorFields.map(field => <div className="simulator-theme-color" key={field.property}>
+                        <span>{field.label}</span>
+                        <input
+                            type="color"
+                            aria-label={lf("{0} color", field.label)}
+                            value={theme[field.property]}
+                            onChange={event => updateColor(field.property, event.target.value)} />
+                        <Input
+                            ariaLabel={lf("{0} hex color", field.label)}
+                            initialValue={theme[field.property]}
+                            onChange={value => updateColor(field.property, value)}
+                            validator={(value, previousValue) => normalizeColor(value) || previousValue} />
+                    </div>)}
+                </div>
+            </div>
+        </div>
+    </Modal>;
+};

package/react-common/components/theming/ThemeCard.tsx

@@ -3,22 +3,24 @@ import { Card } from "../controls/Card";
 
 interface ThemeCardProps {
     theme: pxt.ColorThemeInfo;
-    onClick?: (theme: pxt.ColorThemeInfo) => void;
+    selected: boolean;
+    onClick: (theme: pxt.ColorThemeInfo) => void;
 }
 
 export const ThemeCard = (props: ThemeCardProps) => {
-    const { onClick, theme } = props;
+    const { onClick, selected, theme } = props;
 
     const themeName = pxt.Util.rlf(`{id:color-theme-name}${theme.name}`);
 
     return (
         <Card
-            className="theme-card"
+            className={`theme-card${selected ? " selected" : ""}`}
             role="listitem"
             ariaLabelledBy={theme.id + "-title"}
+            ariaPressed={selected}
             key={theme.id}
             onClick={() => onClick(theme)}
-            tabIndex={onClick && 0}
+            tabIndex={0}
         >
             <div className="theme-info-box">
                 <ThemePreview theme={theme} />

package/react-common/components/theming/ThemePickerModal.tsx

@@ -1,29 +1,90 @@
+import * as React from "react";
 import { Modal } from "../controls/Modal";
+import { EditorToggle } from "../controls/EditorToggle";
 import { ThemeCard } from "./ThemeCard";
 
+export type ThemePickerMode = "editor" | "simulator";
+
+export interface ThemePickerToggleProps {
+    selected: ThemePickerMode;
+    onModeChanged: (mode: ThemePickerMode) => void;
+}
+
+export const ThemePickerToggle = (props: ThemePickerToggleProps) => {
+    const { selected, onModeChanged } = props;
+    const selectMode = (mode: ThemePickerMode) => {
+        if (mode !== selected) onModeChanged(mode);
+    };
+
+    return <div className="theme-picker-toggle">
+        <EditorToggle
+            id="theme-picker-toggle"
+            ariaLabel={lf("Theme type")}
+            selected={selected === "editor" ? 0 : 1}
+            items={[
+                {
+                    label: lf("Editor"),
+                    title: lf("Editor theme"),
+                    icon: "fas fa-paint-brush",
+                    focusable: true,
+                    onClick: () => selectMode("editor"),
+                },
+                {
+                    label: lf("Simulator"),
+                    title: lf("Simulator theme"),
+                    icon: "fas fa-gamepad",
+                    focusable: true,
+                    onClick: () => selectMode("simulator"),
+                },
+            ]} />
+    </div>;
+};
+
 export interface ThemePickerModalProps {
     themes: pxt.ColorThemeInfo[];
-    onThemeClicked(them: pxt.ColorThemeInfo): void;
+    selectedThemeId?: string;
+    onThemeChanged: (theme: pxt.ColorThemeInfo) => void;
+    onSave: (theme: pxt.ColorThemeInfo) => void;
+    onSimulatorThemeClicked?: () => void;
     onClose(): void;
 }
 export const ThemePickerModal = (props: ThemePickerModalProps) => {
+    const [selectedThemeId, setSelectedThemeId] = React.useState(
+        props.selectedThemeId || props.themes[0]?.id
+    );
+    const selectedTheme = props.themes.find(theme => theme.id === selectedThemeId);
+
     return (
         <Modal
-            id="theme-picker-modal" 
+            id="theme-picker-modal"
             title={lf("Choose a Theme")}
+            hideTitle={!!props.onSimulatorThemeClicked}
             onClose={props.onClose}
             className="theme-picker-modal"
+            rightHeader={props.onSimulatorThemeClicked && <ThemePickerToggle
+                selected="editor"
+                onModeChanged={props.onSimulatorThemeClicked} />}
+            actions={[{
+                label: lf("Apply"),
+                className: "primary",
+                disabled: !selectedTheme,
+                onClick: () => selectedTheme && props.onSave(selectedTheme),
+            }]}
         >
             <div
                 className="theme-picker"
                 role="list"
                 aria-label={lf("List of available themes")}
             >
-                {props.themes && props.themes.map(theme => 
+                {props.themes.map(theme =>
                     <ThemeCard
                         key={theme.id}
                         theme={theme}
-                        onClick={props.onThemeClicked}
+                        selected={theme.id === selectedThemeId}
+                        onClick={selected => {
+                            setSelectedThemeId(selected.id);
+                            props.onThemeChanged(selected);
+                        }}
                     />
                 )}
             </div>