diff --git a/components/ButtonColorPicker.vue b/components/ButtonColorPicker.vue
index 85e791e..6eae143 100644
--- a/components/ButtonColorPicker.vue
+++ b/components/ButtonColorPicker.vue
@@ -1,111 +1,15 @@
-
-
-
- {
- $emit('change', {
- red: rgba.r,
- green: rgba.g,
- blue: rgba.b,
- alpha: rgba.a,
- });
- }
- "
- />
-
-
+
-
-
-
-
diff --git a/components/ColorPicker.vue b/components/ColorPicker.vue
new file mode 100644
index 0000000..e230c32
--- /dev/null
+++ b/components/ColorPicker.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Preview.vue b/components/Preview.vue
index a58260f..0c30239 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -190,8 +190,10 @@
v-if="active === 'backgrounds'"
:backgrounds="backgrounds"
:background="settings.background"
+ :background-color="backgroundColor"
@delete="deleteBackground"
@select="settings.background = $event"
+ @color="settings.backgroundColor = $event"
@add="showingBackgroundsModal = $config.isDesktop"
/>
@@ -310,6 +312,7 @@ export default {
showTitle,
showHeader,
background,
+ backgroundColor,
themeName,
themeType,
themeOpacity,
@@ -436,7 +439,24 @@ export default {
},
]);
- const backgroundAttrs = computed(() => getBackgroundAttrs(background.value));
+ const backgroundAttrs = computed(() => {
+ if (backgroundColor.value) {
+ const color = [
+ backgroundColor.value.red,
+ backgroundColor.value.green,
+ backgroundColor.value.blue,
+ backgroundColor.value.alpha,
+ ].join(', ');
+
+ return {
+ style: {
+ backgroundColor: `rgba(${color})`,
+ },
+ };
+ }
+
+ return getBackgroundAttrs(background.value);
+ });
let templateGenerationDebounce = null;
@@ -457,6 +477,8 @@ export default {
watch([languages, themeName], generateTokens);
+ watch(background, () => (backgroundColor.value = null));
+
watch(
[
scale,
@@ -511,6 +533,7 @@ export default {
setWidth,
setHeight,
backgrounds,
+ backgroundColor,
resetViewport,
backgroundAttrs,
deleteBackground,
diff --git a/components/TabBackgrounds.vue b/components/TabBackgrounds.vue
index a78c8f1..cf176b3 100644
--- a/components/TabBackgrounds.vue
+++ b/components/TabBackgrounds.vue
@@ -16,6 +16,16 @@
+
+
+
+
+
+
@@ -35,7 +45,7 @@