diff --git a/src/modules/contents/posts/tags/components/PostTag.vue b/src/modules/contents/posts/tags/components/PostTag.vue index ba76104ff..d9848338d 100644 --- a/src/modules/contents/posts/tags/components/PostTag.vue +++ b/src/modules/contents/posts/tags/components/PostTag.vue @@ -3,6 +3,7 @@ import { VTag } from "@halo-dev/components"; import type { Tag } from "@halo-dev/api-client"; import { computed } from "vue"; import { useRouter } from "vue-router"; +import Color from "colorjs.io"; const props = withDefaults( defineProps<{ @@ -19,8 +20,9 @@ const labelColor = computed(() => { if (!color) { return "inherit"; } - // TODO computed label color - return "#333"; + const onWhite = Math.abs(Color.contrast(color, "white", "APCA")); + const onBlack = Math.abs(Color.contrast(color, "black", "APCA")); + return onWhite > onBlack ? "white" : "#333"; }); const router = useRouter(); @@ -40,7 +42,6 @@ const handleRouteToDetail = () => { :styles="{ background: tag.spec.color, color: labelColor, - borderColor: tag.spec.color, }" @click="handleRouteToDetail" > diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue index 412b7282d..7389ee983 100644 --- a/src/modules/contents/posts/tags/components/TagEditingModal.vue +++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue @@ -43,7 +43,7 @@ const initialFormState: Tag = { spec: { displayName: "", slug: "", - color: "#b16cBe", + color: "#ffffff", cover: "", }, apiVersion: "content.halo.run/v1alpha1", diff --git a/src/views/system/setup-data/tag.json b/src/views/system/setup-data/tag.json index b8294bafb..c82a11561 100644 --- a/src/views/system/setup-data/tag.json +++ b/src/views/system/setup-data/tag.json @@ -2,7 +2,7 @@ "spec": { "displayName": "Halo", "slug": "halo", - "color": "#ad95b2", + "color": "#ffffff", "cover": "" }, "apiVersion": "content.halo.run/v1alpha1",