feat: update text widget

src/views/dashboard/configuration/Text.vue

@@ -89,6 +89,7 @@ limitations under the License. -->
   const fontSize = ref<number>(graph.fontSize || 12);
   const textAlign = ref(graph.textAlign || "left");
   const Colors = [
+    { label: "Theme", value: "theme" },
     {
       label: "Green",
       value: "green",

src/views/dashboard/controls/Text.vue

@@ -32,7 +32,7 @@ limitations under the License. -->
     <div
       class="body"
       :style="{
-        backgroundColor: TextColors[graph.backgroundColor],
+        backgroundColor,
         justifyContent: graph.textAlign,
       }"
     >
@@ -40,7 +40,7 @@ limitations under the License. -->
         :href="graph.url"
         target="_blank"
         :style="{
-          color: TextColors[graph.fontColor],
+          color: fontColor,
           fontSize: graph.fontSize + 'px',
         }"
       >
@@ -55,6 +55,8 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { TextColors } from "@/views/dashboard/data";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -65,9 +67,17 @@ limitations under the License. -->
     activeIndex: { type: String, default: "" },
   });
   const { t } = useI18n();
+  const appStore = useAppStoreWithOut();
   const graph = computed(() => props.data.graph || {});
   const dashboardStore = useDashboardStore();
 
+  const backgroundColor = computed(
+    () => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
+  );
+  const fontColor = computed(
+    () => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
+  );
+
   function removeTopo() {
     dashboardStore.removeControls(props.data);
   }

src/views/dashboard/data.ts

@@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
   green: "#67C23A",
   blue: "#409EFF",
   red: "#F56C6C",
-  grey: "#909399",
+  grey: "#809399",
   white: "#fff",
-  black: "#000",
+  black: "#303133",
   orange: "#E6A23C",
   purple: "#bf99f8",
 };