Alternating background colour (#813)

SevenTV · Aug 21, 2023 · 30ca39e · 30ca39e
1 parent cb38daa
commit 30ca39e
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 2 deletions.
diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
@@ -2,6 +2,7 @@
 
 **The changes listed here are not assigned to an official release**.
 
+-   Added an option to select alternating background color for chat messages
 -   Fixed an issue with tab auto-completion on Kick
 -   Fixed emote tile width in emote menu
 

diff --git a/src/app/settings/SettingsNode.vue b/src/app/settings/SettingsNode.vue
@@ -37,6 +37,7 @@ import { db } from "@/db/idb";
 import { useConfig } from "@/composable/useSettings";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import FormCheckbox from "@/app/settings/control/FormCheckbox.vue";
+import FormColor from "@/app/settings/control/FormColor.vue";
 import FormDropdown from "@/app/settings/control/FormDropdown.vue";
 import FormInput from "@/app/settings/control/FormInput.vue";
 import FormSelect from "@/app/settings/control/FormSelect.vue";
@@ -74,6 +75,7 @@ const standard = {
 	DROPDOWN: FormDropdown,
 	CHECKBOX: FormCheckbox,
 	INPUT: FormInput,
+	COLOR: FormColor,
 	TOGGLE: FormToggle,
 	SLIDER: FormSlider,
 	CUSTOM: undefined,

diff --git a/src/app/settings/control/FormColor.vue b/src/app/settings/control/FormColor.vue
@@ -0,0 +1,27 @@
+<template>
+	<div>
+		<input :id="node.key" v-model="setting" type="color" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useConfig } from "@/composable/useSettings";
+
+const props = defineProps<{
+	node: SevenTV.SettingNode<string, "COLOR">;
+}>();
+
+const setting = useConfig<string>(props.node.key);
+</script>
+
+<style scoped lang="scss">
+input {
+	&::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	&::-webkit-color-swatch {
+		border: none;
+	}
+}
+</style>
diff --git a/src/site/twitch.tv/modules/chat/ChatList.vue b/src/site/twitch.tv/modules/chat/ChatList.vue
@@ -551,7 +551,7 @@ defineExpose({
 
 .seventv-chat-list[alternating-background="true"] {
 	.seventv-message:nth-child(even) {
-		background-color: hsla(0deg, 0%, 50%, 6%);
+		background-color: var(--seventv-chat-alternate-background-color);
 	}
 }
 </style>
diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -248,6 +248,16 @@ export const config = [
 		hint: "settings.chat_alternating_background.hint",
 		defaultValue: false,
 	}),
+	declareConfig<string>("chat.alternating_background_color", "COLOR", {
+		path: ["Chat", "Style"],
+		label: "Alternating Background Color",
+		hint: "Configure the color of alternating background (~6% opacity)",
+		disabledIf: () => !useConfig("chat.alternating_background").value,
+		effect(v) {
+			document.body.style.setProperty("--seventv-chat-alternate-background-color", `${v}0f`);
+		},
+		defaultValue: "#808080",
+	}),
 	declareConfig<number>("chat.padding", "DROPDOWN", {
 		path: ["Chat", "Style"],
 		label: "Padding Style",

diff --git a/src/types/app.d.ts b/src/types/app.d.ts
@@ -100,6 +100,7 @@ declare namespace SevenTV {
 			DROPDOWN: [string, T][];
 			CHECKBOX: never;
 			INPUT: string;
+			COLOR: string;
 			TOGGLE: {
 				left: string;
 				right: string;
@@ -124,7 +125,16 @@ declare namespace SevenTV {
 	type SettingType = boolean | number | string | object;
 
 	namespace SettingNode {
-		type ComponentType = "SELECT" | "DROPDOWN" | "CHECKBOX" | "INPUT" | "TOGGLE" | "SLIDER" | "CUSTOM" | "NONE";
+		type ComponentType =
+			| "SELECT"
+			| "DROPDOWN"
+			| "CHECKBOX"
+			| "INPUT"
+			| "COLOR"
+			| "TOGGLE"
+			| "SLIDER"
+			| "CUSTOM"
+			| "NONE";
 	}
 
 	interface ActiveEmote {