PR: Custom Color Choice (#38)

javascripts/discourse/components/site-pallette.gjs

@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import DButton from "discourse/components/d-button";
+
+export default class SitePallette extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorScheme.color}`;
+  }
+
+  @action
+  handleInput(colorScheme) {
+    this.customColor.setColor(colorScheme.name);
+  }
+
+  <template>
+    <div class="color-pallette-menu__item">
+      <DButton
+        class="btn-flat color-pallette-menu__item-choice"
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorScheme.name}}
+        @action={{fn this.handleInput @colorScheme}}
+      />
+    </div>
+  </template>
+}