color diy

src/views/Content/LoadingIcon.js

@@ -1,3 +1,5 @@
+import { DEFAULT_COLOR } from "../../config";
+
 export default function LoadingIcon() {
   return (
     <svg
@@ -7,7 +9,7 @@ export default function LoadingIcon() {
         maxHeight: "1.2em",
       }}
     >
-      <circle fill="#209CEE" stroke="none" cx="6" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="6" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"
@@ -17,7 +19,7 @@ export default function LoadingIcon() {
           begin="0.1"
         />
       </circle>
-      <circle fill="#209CEE" stroke="none" cx="30" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="30" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"
@@ -27,7 +29,7 @@ export default function LoadingIcon() {
           begin="0.2"
         />
       </circle>
-      <circle fill="#209CEE" stroke="none" cx="54" cy="50" r="6">
+      <circle fill={DEFAULT_COLOR} stroke="none" cx="54" cy="50" r="6">
         <animateTransform
           attributeName="transform"
           dur="1s"

src/views/Content/index.js

@@ -7,12 +7,13 @@ import {
   OPT_STYLE_WAVYLINE,
   OPT_STYLE_FUZZY,
   OPT_STYLE_HIGHTLIGHT,
+  DEFAULT_COLOR,
 } from "../../config";
 import { useTranslate } from "../../hooks/Translate";
 
 export default function Content({ q, rule }) {
   const [hover, setHover] = useState(false);
-  const { text, sameLang, loading, textStyle } = useTranslate(q, rule);
+  const { text, sameLang, loading, textStyle, bgColor } = useTranslate(q, rule);
 
   const handleMouseEnter = () => {
     setHover(true);
@@ -23,29 +24,30 @@ export default function Content({ q, rule }) {
   };
 
   const style = useMemo(() => {
+    const lineColor = bgColor || "";
     switch (textStyle) {
       case OPT_STYLE_LINE: // 下划线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "underline 2px",
+          textDecoration: `underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_DOTLINE: // 点状线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "dotted underline 2px",
+          textDecoration: `dotted underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_DASHLINE: // 虚线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "dashed underline 2px",
+          textDecoration: `dashed underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_WAVYLINE: // 波浪线
         return {
           opacity: hover ? 1 : 0.6,
-          textDecoration: "wavy underline 2px",
+          textDecoration: `wavy underline 2px ${lineColor}`,
           textUnderlineOffset: "0.3em",
         };
       case OPT_STYLE_FUZZY: // 模糊
@@ -56,12 +58,12 @@ export default function Content({ q, rule }) {
       case OPT_STYLE_HIGHTLIGHT: // 高亮
         return {
           color: "#FFF",
-          backgroundColor: "#209CEE",
+          backgroundColor: bgColor || DEFAULT_COLOR,
         };
       default:
         return {};
     }
-  }, [textStyle, hover]);
+  }, [textStyle, hover, bgColor]);
 
   if (loading) {
     return (