新增深色模式

src/components/Qrcode.css

@@ -11,14 +11,19 @@
     padding-bottom: calc((10px + 2vmin) * 2);
 }
 
+.Qr-title-svg {
+    height: 1.4em;
+}
+
 .Qr-title {
+    color: var(--b-w);
     margin-top: 2.25em;
     font-weight: bold;
     font-size: 2.25em;
 }
 
 .Qr-subtitle {
-    margin-top: -1em;
+    margin-top: -1.5em;
     margin-bottom: 0;
     line-height: 2em;
 }

src/components/app/PartHeader.js

@@ -6,8 +6,7 @@ import QrbtfLogo from "../svg/QrbtfLogo";
 const PartHeader = () => (
     <div className="Qr-Centered">
         <div>
-            <QrbtfLogo />
-            <h1 className="Qr-title">&ensp;</h1>
+            <h1 className="Qr-title"><QrbtfLogo className="Qr-title-svg" /></h1>
         </div>
         <p className="Qr-subtitle">参数化二维码生成器 <sup className="Gray">测试版</sup></p>
         <InputText/>

src/components/svg/QrbtfLogo.js

@@ -150,7 +150,7 @@ function QrbtfLogo(props) {
                     d="M1810.827 342.464a107.986 107.986 0 00-54.74-18.316 108 108 0 1054.74 197.388"
                 />
             </g>
-            <g>
+            <g opacity="0">
                 <animateTransform
                     attributeName="transform"
                     type="translate"
@@ -187,7 +187,17 @@ function QrbtfLogo(props) {
                     dur="1.75s"
                     additive="sum"
                 />
-                <path d="M1553.483 530.172a45.826 45.826 0 00-62.697-42.61 45.823 45.823 0 00-28.959 42.61A45.823 45.823 0 001507.655 576a45.823 45.823 0 0045.828-45.828z" />
+                <animate
+                    attributeType="CSS"
+                    attributeName="opacity"
+                    begin="0.1s"
+                    values="0; 1"
+                    dur="0.1s"
+                    fill="freeze"
+                    calcMode="spline"
+                    keySplines="0.8 0 0.2 1"
+                />
+                <path fill="currentColor" d="M1553.483 530.172a45.826 45.826 0 00-62.697-42.61 45.823 45.823 0 00-28.959 42.61A45.823 45.823 0 001507.655 576a45.823 45.823 0 0045.828-45.828z" />
             </g>
             <g fill="none" strokeWidth={18}>
                 <g strokeDasharray="235,235" strokeDashoffset={235}>

src/index.css

@@ -19,6 +19,7 @@
     --qr-opacity: calc(1);
     --qr-opacity-hover: calc(1);
     --upload-color: rgba(102,102,102,1);
+    --b-w: rgba(0,0,0,1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,6 +37,7 @@
         --qr-opacity: calc(0.5);
         --qr-opacity-hover: calc(0.65);
         --upload-color: rgba(150,150,150,1);
+        --b-w: rgba(255,255,255,1);
     }
 }