Modules: notice when activating a theme alongside another active theme

modules/system/languages/en/system.php

@@ -390,6 +390,8 @@
     'system.js.deactivate_ok' => 'Deactivate',
     'system.js.deactivate_required' => 'This module is required by %1$s to function. Deactivate anyway?',
     'system.js.deactivate_theme' => 'Deactivate the "%1$s" theme? The public site reverts to the default theme.',
+    'system.js.activate_theme_multi_title' => 'Multiple active themes',
+    'system.js.activate_theme_multi' => 'Another theme is already active. Activating more than one theme at a time can have unpredictable results — unless the theme is designed to work alongside others. Activate anyway?',
     'system.js.deactivate_confirm' => 'Deactivate "%1$s"? Its routes stop working until you reactivate it. Nothing is deleted.',
     'system.js.confirm_install_title' => 'Install module',
     'system.js.confirm_install_body' => 'This module’s code will run in your app once active.',

modules/system/views/scripts/modules/index.phtml

@@ -166,6 +166,8 @@ $this->i18n([
     'deactivateRequired' => 'system.js.deactivate_required',
     'deactivateTheme' => 'system.js.deactivate_theme',
     'deactivateConfirm' => 'system.js.deactivate_confirm',
+    'activateThemeMultiTitle' => 'system.js.activate_theme_multi_title',
+    'activateThemeMulti' => 'system.js.activate_theme_multi',
 ]);
 ?>
 <script>
@@ -254,6 +256,25 @@ document.addEventListener('DOMContentLoaded', function () {
             }).then(function (ok) { if (ok) { run(); } });
             return;
         }
+
+        /* Activating a theme while another theme is already active is ALLOWED (a theme may be built to
+           coexist), but it can be unpredictable — surface a modal NOTICE first, then proceed on OK.
+           Active themes are the rows showing a Deactivate button tagged data-theme="1". */
+        if (isTheme) {
+            var otherActiveThemes = Array.prototype.filter.call(
+                document.querySelectorAll('[data-mod-toggle="deactivate"][data-theme="1"]'),
+                function (b) { return b.getAttribute('data-slug') !== slug; }
+            );
+            if (otherActiveThemes.length) {
+                TigerModal.confirm({
+                    title: Tiger.t('activateThemeMultiTitle'),
+                    body: Tiger.t('activateThemeMulti'),
+                    confirmLabel: Tiger.t('activateOk'),
+                    variant: 'primary'
+                }).then(function (ok) { if (ok) { run(); } });
+                return;
+            }
+        }
         run();
     }