Order Themes in Theme Picker (#10398)

This allows us to specify a weight for each theme. Themes will be ordered with higher weights at the bottom. If a theme does not have a weight, it is put last. I've also moved when themes are loaded to before the page is shown, so there is no time where the default theme will be visible (unless something goes wrong).

Author: thsparks

cli/cli.ts

@@ -2308,6 +2308,7 @@ function updateColorThemes(cfg: pxt.TargetBundle) {
         const theme: pxt.ColorThemeInfo = {
             id: themeData.id,
             name: themeData.name,
+            weight: themeData.weight,
             monacoBaseTheme: themeData.monacoBaseTheme,
             colors: themeData.colors
         };

localtypings/pxtarget.d.ts

@@ -614,11 +614,12 @@ declare namespace pxt {
     }
 
     interface ColorThemeInfo {
-        id: string;
-        name: string;
-        overrideCss?: string;
-        monacoBaseTheme?: string; // https://code.visualstudio.com/docs/getstarted/themes
-        colors: { [key: string]: string };
+        id: string; // Unique identifier
+        name: string; // Human-readable name
+        weight?: number; // Lower weights appear first in theme list, no value = go to end
+        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
     }
 
     interface ServiceWorkerEvent {

react-common/components/theming/themeManager.ts

@@ -31,7 +31,16 @@ export class ThemeManager {
     }
 
     public getAllColorThemes(): pxt.ColorThemeInfo[] {
-        return pxt.appTarget?.colorThemeMap ? Object.values(pxt.appTarget.colorThemeMap) : [];
+        const allThemes = pxt.appTarget?.colorThemeMap ? Object.values(pxt.appTarget.colorThemeMap) : [];
+        return allThemes.sort((a, b) => {
+            // Lower weight at the front.
+            if (a.weight !== b.weight) {
+                return (a.weight ?? Infinity) - (b.weight ?? Infinity);
+            }
+            else {
+                return a.id.localeCompare(b.id);
+            }
+        });
     }
 
     public isHighContrast(themeId: string) {

theme/color-themes/high-contrast.json

@@ -1,6 +1,7 @@
 {
     "id": "pxt-high-contrast",
     "name": "High Contrast",
+    "weight": 100,
     "monacoBaseTheme": "hc-black",
     "overrideFiles": [
         "/overrides/high-contrast-overrides.css"

webapp/src/app.tsx

@@ -6224,6 +6224,28 @@ document.addEventListener("DOMContentLoaded", async () => {
                     .then(simStrings => simStrings && simulator.setTranslations(simStrings))
             });
         })
+        .then(() => {
+            // Load theme colors
+            let initialTheme = data.getData<string>(auth.THEMEID);
+            if (!initialTheme) {
+                initialTheme = pxt.appTarget?.appTheme?.defaultColorTheme;
+            }
+
+            // We have a legacy preference stored if the user has enabled high contrast.
+            // Respect it here by switching to the hc color theme.
+            const hcEnabled = data.getData<boolean>(auth.HIGHCONTRAST);
+            if (hcEnabled) {
+                initialTheme = pxt.appTarget?.appTheme?.highContrastColorTheme;
+            }
+
+            if (initialTheme) {
+                const themeManager = ThemeManager.getInstance(document);
+                if (initialTheme !== themeManager.getCurrentColorTheme()?.id) {
+                    return themeManager.switchColorTheme(initialTheme);
+                }
+            }
+            return Promise.resolve();
+        })
         .then(() => {
             pxt.BrowserUtils.initTheme();
             theme = pxteditor.experiments.syncTheme();
@@ -6256,28 +6278,6 @@ document.addEventListener("DOMContentLoaded", async () => {
             socketbridge.tryInit();
             electron.initElectron(theEditor);
         })
-        .then(() => {
-            // Load theme colors
-            let initialTheme = data.getData<string>(auth.THEMEID);
-            if (!initialTheme) {
-                initialTheme = pxt.appTarget?.appTheme?.defaultColorTheme;
-            }
-
-            // We have a legacy preference stored if the user has enabled high contrast.
-            // Respect it here by switching to the hc color theme.
-            const hcEnabled = data.getData<boolean>(auth.HIGHCONTRAST);
-            if (hcEnabled) {
-                initialTheme = pxt.appTarget?.appTheme?.highContrastColorTheme;
-            }
-
-            if (initialTheme) {
-                const themeManager = ThemeManager.getInstance(document);
-                if (initialTheme !== themeManager.getCurrentColorTheme()?.id) {
-                    return themeManager.switchColorTheme(initialTheme);
-                }
-            }
-            return Promise.resolve();
-        })
         .then(() => {
             const showHome = theEditor.shouldShowHomeScreen();
             if (!showHome) {