From fb0ba4fba123a3bdcfa5da372c457971ca9f71f7 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Fri, 2 Jul 2021 00:42:14 -0500
Subject: [PATCH] Update accent color option

---
 src/locales/en.json                 |  2 +-
 src/packager/PackagerOptions.svelte | 10 ++++------
 src/packager/packager.js            |  1 +
 src/scaffolding/index.js            |  9 +++++++++
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index e8490c4..02ef8d9 100644
--- a/src/locales/en.json
+++ b/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."
diff --git a/src/packager/PackagerOptions.svelte b/src/packager/PackagerOptions.svelte
index 196ad2c..d6dd95d 100644
--- a/src/packager/PackagerOptions.svelte
+++ b/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>
diff --git a/src/packager/packager.js b/src/packager/packager.js
index 53b4ab2..26bb4eb 100644
--- a/src/packager/packager.js
+++ b/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()})` :
diff --git a/src/scaffolding/index.js b/src/scaffolding/index.js
index 8314d76..d3141cc 100644
--- a/src/scaffolding/index.js
+++ b/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();