support ?mode= and remove tw:theme key

Author: Titanium2099

src/lib/themes/gui/dark.js

@@ -31,7 +31,7 @@ const guiColors = {
     'fullscreen-background': '#111111',
     'fullscreen-accent': '#111111',
 
-    'page-background': '#111111',
+    'page-background': '#121212',
     'page-foreground': '#eeeeee',
 
     'project-title-inactive': 'var(--ui-secondary)',

src/lib/themes/themePersistance.js

@@ -4,16 +4,26 @@ const matchMedia = query => (window.matchMedia ? window.matchMedia(query) : null
 const PREFERS_HIGH_CONTRAST_QUERY = matchMedia('(prefers-contrast: more)');
 const PREFERS_DARK_QUERY = matchMedia('(prefers-color-scheme: dark)');
 
-const STORAGE_KEY = 'tw:theme';
-
 /**
  * @returns {Theme} detected theme
  */
 const systemPreferencesTheme = () => {
-    // @OVERRIDE if is on home page, return light theme
+    // Check for URL search parameters first (highest priority)
+    const urlParams = new URLSearchParams(window.location.search);
+    const modeParam = urlParams.get('mode');
+    
+    // Check for mode parameter on any page
+    if (modeParam === 'dark') {
+        return Theme.dark;
+    } else if (modeParam === 'light') {
+        return Theme.light;
+    }
+    
+    // If on home page, default to light theme
     if (window.location.pathname === "/" || window.location.pathname.includes("/index.html") || window.location.pathname === "/build/") {
         return Theme.light;
     }
+    
     if (PREFERS_HIGH_CONTRAST_QUERY && PREFERS_HIGH_CONTRAST_QUERY.matches) {
         return Theme.highContrast;
     }
@@ -52,29 +62,6 @@ const onSystemPreferenceChange = onChange => {
  */
 const detectTheme = () => {
     const systemPreferences = systemPreferencesTheme();
-
-    try {
-        const local = localStorage.getItem(STORAGE_KEY);
-
-        // Migrate legacy preferences
-        if (local === 'dark') {
-            return Theme.dark;
-        }
-        if (local === 'light') {
-            return Theme.light;
-        }
-
-        const parsed = JSON.parse(local);
-        // Any invalid values in storage will be handled by Theme itself
-        return new Theme(
-            parsed.accent || systemPreferences.accent,
-            parsed.gui || systemPreferences.gui,
-            parsed.blocks || systemPreferences.blocks
-        );
-    } catch (e) {
-        // ignore
-    }
-
     return systemPreferences;
 };
 

src/playground/embed.jsx

@@ -30,6 +30,17 @@ const getProjectId = () => {
 const projectId = getProjectId();
 const urlParams = new URLSearchParams(location.search);
 
+// Determine theme based on URL parameters
+const getThemeFromUrl = () => {
+    const modeParam = urlParams.get('mode');
+    if (modeParam === 'dark') {
+        return Theme.dark;
+    } else if (modeParam === 'light') {
+        return Theme.light;
+    }
+    return Theme.light; // Default to light theme
+};
+
 let vm;
 
 const onVmInit = _vm => {
@@ -55,7 +66,7 @@ render(<WrappedGUI
     onVmInit={onVmInit}
     onProjectLoaded={onProjectLoaded}
     routingStyle="none"
-    theme={Theme.light}
+    theme={getThemeFromUrl()}
 />);
 
 if (urlParams.has('addons')) {

src/playground/index.ejs

@@ -100,31 +100,45 @@
         var theme = '';
         var accent = '#d0402e';
 
-        try {
-          var themeSetting = localStorage.getItem('tw:theme');
-        } catch (e) {
-          // ignore
-        }
-        if (themeSetting === 'light') {
-          theme = 'light';
-        } else if (themeSetting === 'dark') {
+        // Check URL parameters first (highest priority)
+        var urlParams = new URLSearchParams(window.location.search);
+        var modeParam = urlParams.get('mode');
+        
+        if (modeParam === 'dark') {
           theme = 'dark';
-        } else if (themeSetting) {
+        } else if (modeParam === 'light') {
+          theme = 'light';
+        }
+
+        // If no URL parameter, check localStorage
+        if (!theme) {
           try {
-            var parsed = JSON.parse(themeSetting);
-            if (parsed.accent === 'purple') {
-              accent = '#855cd6';
-            } else if (parsed.accent === 'blue') {
-              accent = '#4c97ff';
-            }
-            if (parsed.gui === 'dark' || parsed.gui === 'light') {
-              theme = parsed.gui;
-            }
+            var themeSetting = localStorage.getItem('tw:theme');
           } catch (e) {
             // ignore
           }
+          if (themeSetting === 'light') {
+            theme = 'light';
+          } else if (themeSetting === 'dark') {
+            theme = 'dark';
+          } else if (themeSetting) {
+            try {
+              var parsed = JSON.parse(themeSetting);
+              if (parsed.accent === 'purple') {
+                accent = '#855cd6';
+              } else if (parsed.accent === 'blue') {
+                accent = '#4c97ff';
+              }
+              if (parsed.gui === 'dark' || parsed.gui === 'light') {
+                theme = parsed.gui;
+              }
+            } catch (e) {
+              // ignore
+            }
+          }
         }
 
+        // If still no theme, check system preferences
         if (!theme) {
           theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }