Update accent color option

src/locales/en.json

@@ -147,7 +147,7 @@
       "string": "Show fullscreen button in controls"
     },
     "accentColor": {
-      "string": "Accent color (background color of controls when active or hovered)"
+      "string": "Accent color (active/hovered controls, ask prompt, context menus)"
     },
     "controlsHelp": {
       "string": "If all controls are disabled, the controls bar is removed entirely. If only fullscreen is enabled, it will always be located in the top left corner, not in the controls header."

src/packager/PackagerOptions.svelte

@@ -243,12 +243,6 @@
     <input type="checkbox" bind:checked={$options.controls.fullscreen.enabled}>
     {$_('options.showFullscreen')}
   </label>
-  {#if $options.controls.greenFlag.enabled || $options.controls.stopAll.enabled}
-    <label transition:slide|local>
-      <input type="color" bind:value={$options.appearance.accent}>
-      {$_('options.accentColor')}
-    </label>
-  {/if}
   <p>{$_('options.controlsHelp')}</p>
 
   <h3>{$_('options.colors')}</h3>
@@ -260,6 +254,10 @@
     <input type="color" bind:value={$options.appearance.foreground}>
     {$_('options.foregroundColor')}
   </label>
+  <label>
+    <input type="color" bind:value={$options.appearance.accent}>
+    {$_('options.accentColor')}
+  </label>
 
   <h3>{$_('options.addons')}</h3>
   <label>

src/packager/packager.js

@@ -484,6 +484,7 @@ cd "$(dirname "$0")"
     setProgress(${PROGRESS_LOADED_SCRIPTS});
 
     scaffolding.setUsername(${JSON.stringify(this.options.username)}.replace(/#/g, () => Math.floor(Math.random() * 10)));
+    scaffolding.setAccentColor(${JSON.stringify(this.options.appearance.accent)});
 
     ${this.options.cloudVariables.mode === 'ws' ?
       `scaffolding.addCloudProvider(${this.makeWebSocketProvider()})` :

src/scaffolding/index.js

@@ -394,6 +394,15 @@ class Scaffolding extends EventTarget {
     return this.messages[id] || id;
   }
 
+  /**
+   * Change primary accent color.
+   * @param {string} color Color in the format #abcdef
+   */
+  setAccentColor (color) {
+    this._root.style.setProperty('--sc-accent-color', color);
+    this._root.style.setProperty('--sc-accent-color-transparent', `${color}59`);
+  }
+
   start () {
     this.vm.start();
     this.vm.greenFlag();