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 (

src/views/Options/Rules.js

@@ -39,6 +39,7 @@ function RuleFields({ rule, rules, setShow }) {
     toLang,
     textStyle,
     transOpen,
+    bgColor,
   } = formValues;
 
   const hasSamePattern = (str) => {
@@ -138,8 +139,8 @@ function RuleFields({ rule, rules, setShow }) {
         />
 
         <Box>
-          <Grid container spacing={2} columns={20}>
-            <Grid item xs={10} md={4}>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -155,7 +156,7 @@ function RuleFields({ rule, rules, setShow }) {
                 <MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -174,7 +175,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -193,7 +194,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -212,7 +213,7 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={10} md={4}>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -231,6 +232,17 @@ function RuleFields({ rule, rules, setShow }) {
                 ))}
               </TextField>
             </Grid>
+            <Grid item xs={12} sm={6} md={3} lg={2}>
+              <TextField
+                size="small"
+                fullWidth
+                name="bgColor"
+                value={bgColor}
+                label={i18n("bg_color")}
+                disabled={disabled}
+                onChange={handleChange}
+              />
+            </Grid>
           </Grid>
         </Box>