Add variable color option

src/locales/en.json

@@ -242,6 +242,9 @@
     "editableLists": {
       "string": "Editable lists"
     },
+    "variableColor": {
+      "string": "Variable color"
+    },
     "interaction": {
       "string": "Input",
       "context": "Input settings header"

src/p4/PackagerOptions.svelte

@@ -429,6 +429,11 @@
       <input type="checkbox" bind:checked={$options.monitors.editableLists}>
       {$_('options.editableLists')}
     </label>
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <label class="option">
+      <ColorPicker bind:value={$options.monitors.variableColor} />
+      {$_('options.variableColor')}
+    </label>
   </div>
 </Section>
 

src/packager/packager.js

@@ -917,6 +917,9 @@ cd "$(dirname "$0")"
     .sc-canvas {
       cursor: ${await this.generateCursor()};
     }
+    .sc-monitor-root[opcode^="data_"] .sc-monitor-value-color {
+      background-color: ${this.options.monitors.variableColor} !important;
+    }
     ${this.options.custom.css}
   </style>
   <meta name="theme-color" content="${this.options.appearance.background}">
@@ -1286,7 +1289,8 @@ Packager.DEFAULT_OPTIONS = () => ({
     }
   },
   monitors: {
-    editableLists: false
+    editableLists: false,
+    variableColor: '#ff8c1a'
   },
   compiler: {
     enabled: true,