新增深色模式

public/MP_verify_er6mFebsl0UgJtQ2.txt

@@ -0,0 +1 @@
+er6mFebsl0UgJtQ2

public/MP_verify_nGEJNyOtlgsMTFCQ.txt

@@ -0,0 +1 @@
+nGEJNyOtlgsMTFCQ

src/components/Qrcode.css

@@ -1,6 +1,6 @@
 
 .Qr-titled {
-    background-color: #f5f5f7;
+    background-color: var(--content-bg-color);
     box-sizing: border-box;
     padding-top: calc((10px + 2vmin) * 2);
     padding-bottom: calc((10px + 2vmin) * 2);
@@ -121,6 +121,7 @@
     /*padding: 23px;*/
     overflow: hidden;
     display: flex;
+    opacity: var(--qr-opacity);
     background-color: white;
     width: calc((100vw - 56px) / 2);
     height: calc((100vw - 56px) / 2);
@@ -184,14 +185,19 @@
 
 .Qr-item-selected .Qr-item-image {
     border-color: #44D7B6 !important;
+    opacity: 1!important;
 }
 
 .Qr-item-selected .Qr-item-detail {
-    color: #000000;
+    opacity: 1;
+}
+
+.Qr-item:hover .Qr-item-image {
+    opacity: var(--qr-opacity-hover);
 }
 
 .Qr-item:hover .Qr-item-detail {
-    color: #000000;
+    opacity: 1;
 }
 
 .Qr-item-selected .Qr-item-desc-inner {
@@ -200,7 +206,8 @@
 }
 
 .Qr-item-detail {
-    color: rgba(0,0,0,0.3);
+    opacity: 0.3;
+    color: var(--font-color);
     margin-top: 5px;
     font-size: 1em;
     text-align: left;
@@ -226,7 +233,7 @@
     width: calc((100vw - 56px) / 2);
     text-align: left;
     font-size: 12px;
-    color: rgba(0,0,0,0.6);
+    color: var(--input-font-color);
     -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
@@ -246,13 +253,12 @@
 .Qr-item-desc a {
     font-weight: bold;
     padding: 0px 0;
-    color: #000000;
+    color: var(--font-color);
     box-sizing: border-box;
     text-decoration: none;
 }
 
 .Qr-item-desc a:hover {
-    color: #000000;
     text-decoration: underline;
 }
 
@@ -327,21 +333,21 @@ td {
 .big-input {
     height: calc(2em + 6px);
     font-size: calc(10px + 2vmin);
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: var(--border-color) solid 2px;
     margin-left: 10px;
     flex: 1;
 }
 
 @media (min-width: 500px) {
     .big-input {
-        border: rgba(0,0,0,0.12) solid 3px;
+        border: var(--border-color) solid 3px;
     }
 }
 
 .Qr-upload {
-    color: rgba(102,102,102,1);
+    color: var(--upload-color);
     font-size: calc(10px + 2vmin);
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: var(--border-color) solid 2px;
     width: calc(2em + 6px)!important;
     height: calc(2em + 6px);
     cursor: pointer;
@@ -361,7 +367,7 @@ td {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -moz-appearance: none;
     -moz-text-size-adjust: 100%;
-    background: white;
+    background: var(--bg-color);
     font-family: 'Futura', sans-serif;
     display: flex;
     justify-content: center;
@@ -370,13 +376,13 @@ td {
 
 @media (min-width: 500px) {
     .Qr-upload {
-        border: rgba(0,0,0,0.12) solid 3px;
+        border: var(--border-color) solid 3px;
     }
 }
 
 .Qr-upload:hover {
-    border-color: #44D7B6;
+    border-color: var(--border-color-focus);
-    color: #44D7B6;
+    color: var(--border-color-focus);
 }
 
 .Qr-upload:active {
@@ -402,13 +408,13 @@ td {
 .small-input {
     margin: 0;
     font-size: 0.9em;
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: var(--border-color) solid 2px;
     width: calc((100vw - 56px) / 2);
 }
 
 @media (min-width: 500px) {
     .small-input {
-        border: rgba(0,0,0,0.12) solid 3px;
+        border: var(--border-color) solid 3px;
         font-size: 0.8em;
         width: 200px;
     }
@@ -435,7 +441,8 @@ td {
     -moz-appearance: none;
     -moz-text-size-adjust: 100%;
     font-family: 'Futura', sans-serif;
-    color: rgba(0,0,0,0.6);
+    color: var(--input-font-color);
+    background-color: var(--bg-color);
 }
 
 input::-webkit-outer-spin-button,
@@ -466,16 +473,16 @@ input[type="number"]{
     -moz-appearance: none;
     -moz-text-size-adjust: 100%;
     font-family: 'Futura', sans-serif;
-    color: rgba(0,0,0,0.6);
+    color: var(--input-font-color);
     font-size: 0.9em;
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: var(--border-color) solid 2px;
     width: calc((100vw - 56px) / 2);
     padding-left: 1em;
 }
 
 @media (min-width: 500px) {
     .Qr-select {
-        border: rgba(0,0,0,0.12) solid 3px;
+        border: var(--border-color) solid 3px;
         width: 200px;
         font-size: 0.8em;
     }
@@ -483,7 +490,7 @@ input[type="number"]{
 
 .Qr-input::placeholder {
     font-family: 'Futura', sans-serif;
-    color: rgba(0,0,0,0.18);
+    color: var(--border-color);
 }
 
 .Qr-Centered {
@@ -495,13 +502,13 @@ input[type="number"]{
 }
 
 .Qr-input:focus {
-    border-color: #44D7B6;
+    border-color: var(--border-color-focus);
-    color: #000000;
+    color: var(--input-font-color-focus);
 }
 
 .Qr-select:focus {
-    border-color: #44D7B6;
+    border-color: var(--border-color-focus);
-    color: #000000;
+    color: var(--input-font-color-focus);
 }
 
 
@@ -556,7 +563,7 @@ input[type="number"]{
     outline: none;
     padding: 0;
     box-sizing: border-box;
-    border: rgba(0,0,0,0.12) solid 2px;
+    border: var(--border-color) solid 2px;
     -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
@@ -568,13 +575,14 @@ input[type="number"]{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -moz-appearance: none;
     -moz-text-size-adjust: 100%;
-    background: white;
+    background: var(--bg-color);
     font-family: 'Futura', sans-serif;
+    color: var(--input-font-color);
 }
 
 @media (min-width: 500px) {
     .dl-btn {
-        border: rgba(0,0,0,0.12) solid 3px;
+        border: var(--border-color) solid 3px;
         font-size: 0.8em;
     }
 }
@@ -589,21 +597,21 @@ input[type="number"]{
 }
 
 .dl-btn:hover {
-    border-color: #44D7B6;
+    border-color: var(--border-color-focus);
-    color: #44D7B6;
+    color: var(--border-color-focus);
 }
 
 .dl-btn-active {
-    border-color: #44D7B6;
+    border-color: var(--border-color-focus);
-    color: #44D7B6;
+    color: var(--border-color-focus);
 }
 
 .dl-btn:active {
     -webkit-transition-duration: 0s; /* Safari */
     transition-duration: 0s;
     -moz-transition-duration: 0s;
-    border-color: #3BBC9F;
+    border-color: var(--border-color-active);
-    color: #3BBC9F;
+    color: var(--border-color-active);
 }
 
 @media (min-width: 500px) {
@@ -617,16 +625,16 @@ input[type="number"]{
 }
 
 .Qr-footer {
-    color: #515154;
+    color: var(--footer-font-color);
     margin-bottom: -1em;
 }
 
 .Gray {
-    color: #86868B;
+    color: var(--footer-font-color-lighter);
 }
 
 .gray {
-    color: #d2d2d7;
+    color: var(--footer-font-color-lighter);
 }
 
 .Qr-footer div {
@@ -635,7 +643,7 @@ input[type="number"]{
 }
 
 .Qr-footer strong {
-    color: #000000 !important;
+    color: var(--font-color) !important;
 }
 
 .Qr-footer-part span {
@@ -675,25 +683,25 @@ a:hover {
 .Qr-article p {
     font-size: 14px;
     line-height: 1.7em;
-    color: #636366;
+    color: var(--p-font-color);
     letter-spacing: 0.05em;
 }
 
 .Qr-article p b {
     font-weight: bold;
-    color: #000000;
+    color: var(--font-color);
 }
 
 .Qr-article p a {
     font-weight: bold;
     padding: 1px 0;
-    color: #000000;
+    color: var(--font-color);
-    border-bottom: 1px solid #000000;
+    border-bottom: 1px solid var(--font-color);
 }
 
 .Qr-article p a:hover {
-    color: #000000;
+    color: var(--font-color);
-    border-bottom: 1px solid #000000;
+    border-bottom: 1px solid var(--font-color);
     text-decoration: none;
 }
 
@@ -723,7 +731,7 @@ a:hover {
 
 select {
     padding: 0;
-    background-color: #FFFFFF;
+    background-color: var(--bg-color);
 }
 
 select:-moz-focusring {

src/components/app/App.css

@@ -6,14 +6,13 @@
 }
 
 .App-header {
-  background-color: #FFFFFF;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: black;
+    color: var(--font-color);
 }
 
 .Layout {

src/components/app/PartFooter.js

@@ -47,6 +47,8 @@ const PartFooter = () => (
                 <span>董斯佳<span className="gray">&ensp;丨&ensp;</span></span>
                 <span><LinkTrace href="https://mp.weixin.qq.com/s/qCTnkPWEX6AfL2CJua_AqQ" rel="noopener noreferrer"
                                  target="_blank">野生符号</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
+                <span><LinkTrace href="https://github.com/kongxiangyan" rel="noopener noreferrer"
+                                 target="_blank">Cigaret</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
                 <span><LinkTrace href="https://mp.weixin.qq.com/s/NdVsF_FJxqSZOyGionoo1Q" rel="noopener noreferrer"
                                  target="_blank">JaBi 扎比</LinkTrace><span className="gray">&ensp;丨&ensp;</span></span>
                 <span><LinkTrace href="http://nav.6soluo.com/" rel="noopener noreferrer"

src/components/app/PartMore.js

@@ -12,6 +12,7 @@ const PartMore = () => (
             <div className="Qr-article">
                 <p><GitHubButton className="github-btn" href="https://github.com/ciaochaos/qrbtf" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ciaochaos/qrbtf on GitHub">Star</GitHubButton></p>
                 <h2>最新消息</h2>
+                <p><b>2020.6.23</b><br/>新增深色模式。</p>
                 <p><b>2020.6.22</b><br/>新增 A — a1、A — a2、A — b1、A — b2 样式，添加样式描述，新增桌面端横向拖拽滑动。</p>
                 <p><b>2020.6.11</b><br/>QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。<LinkTrace href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目</LinkTrace>。</p>
                 <p><b>2020.5.23</b><br/>网站开源啦！<LinkTrace href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问</LinkTrace> 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 <LinkTrace href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～</LinkTrace>。</p>

src/index.css

@@ -3,7 +3,44 @@
   src: url('./Futura.ttc');
 }
 
+:root {
+    color-scheme: light dark;
+    --bg-color: #FFFFFF;
+    --content-bg-color: #F5F5F7;
+    --font-color: rgba(0,0,0,1);
+    --p-font-color: rgba(0,0,0,0.6);
+    --footer-font-color: rgba(0,0,0,0.6);
+    --footer-font-color-lighter: rgba(0,0,0,0.3);
+    --input-font-color: rgba(0,0,0,0.6);
+    --input-font-color-focus: rgba(0,0,0,1);
+    --border-color: rgba(0,0,0,0.12);
+    --border-color-focus: #44D7B6;
+    --border-color-active: #3BBC9F;
+    --qr-opacity: calc(1);
+    --qr-opacity-hover: calc(1);
+    --upload-color: rgba(102,102,102,1);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-color: #000000;
+        --content-bg-color: #1D1D1F;
+        --font-color: rgba(255, 255, 255, .9);
+        --p-font-color: rgba(255,255,255,0.6);
+        --footer-font-color: rgba(255,255,255,0.6);
+        --footer-font-color-lighter: rgba(255,255,255,0.3);
+        --input-font-color: rgba(255,255,255,0.7);
+        --input-font-color-focus: rgba(255,255,255,.9);
+        --border-color: rgba(255,255,255,0.18);
+        --border-color-focus: #44D7B6;
+        --qr-opacity: calc(0.5);
+        --qr-opacity-hover: calc(0.8);
+        --upload-color: rgba(150,150,150,1);
+    }
+}
+
 body {
+    background-color: var(--bg-color);
   margin: 0;
   font-family: 'Futura', sans-serif;
   -webkit-font-smoothing: antialiased;

src/qrbtf-logo.svg

@@ -42,7 +42,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M2407.3796,576c0-52.6933,0-105.3867,0-158.08
 		c0-2.0784,0.0005-4.1568-0.0034-6.2352c-0.0012-0.6671-0.0029-1.3342-0.0054-2.0013c-0.0046-1.2442-0.0117-2.4883-0.0237-3.7325
@@ -103,7 +103,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="2259.0596" y1="576" x2="2259.0596" y2="288"
         />
@@ -138,7 +138,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M2555.6995,576c0-52.6933,0-105.3867,0-158.08
 		c0-2.0784,0.0005-4.1568-0.0034-6.2352c-0.0012-0.6671-0.0027-1.3342-0.0054-2.0013c-0.0044-1.2442-0.0115-2.4883-0.0234-3.7325
@@ -203,7 +203,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M2119.0391,432
 		c0-6.5931-0.6033-13.1685-1.803-19.6516c-1.2717-6.8726-3.2068-13.6031-5.7795-20.1017
@@ -252,7 +252,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M1810.8269,342.4639
 		c-7.9363-5.353-16.5452-9.6255-25.6079-12.7087c-9.4066-3.2003-19.2096-5.0871-29.1322-5.6072
@@ -345,7 +345,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="1230.6259" y1="324" x2="1461.0259" y2="324"
         />
@@ -380,7 +380,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M1460.1464,121.7508
 		c-2.4275-1.7637-4.9656-3.3752-7.5939-4.8225c-1.3143-0.7236-2.6511-1.4062-4.0079-2.0463
@@ -434,7 +434,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="959.2219" y1="324" x2="1189.6219" y2="324"
         />
@@ -469,7 +469,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M1074.422,208.8c0,76.8,0,153.6,0,230.4
 		c0,1.4623-0.0001,2.9246-0.0015,4.3869c-0.0012,1.447-0.0035,2.894-0.0063,4.341c-0.0033,1.5402-0.0071,3.0804-0.0095,4.6206
@@ -518,7 +518,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="679.5572" y1="72" x2="679.5572" y2="576"
         />
@@ -553,7 +553,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M679.5572,432
 		c0,6.5931,0.6033,13.1685,1.8029,19.6516c1.2719,6.8726,3.2069,13.6031,5.7796,20.1017
@@ -602,7 +602,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="468.0493" y1="576" x2="468.0493" y2="288"
         />
@@ -637,7 +637,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M582.3699,337.7508
 		c-2.1679-1.5751-4.424-3.0288-6.7539-4.3526c-1.1687-0.664-2.3559-1.2954-3.56-1.8929c-1.204-0.5976-2.4249-1.1613-3.6605-1.6905
@@ -691,7 +691,7 @@
         ></animate>
         <path
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           d="M324,432c0-6.5931-0.6033-13.1685-1.8029-19.6516
 		c-1.2718-6.8726-3.2069-13.6031-5.7796-20.1017c-5.4315-13.7201-13.6146-26.1785-24.0485-36.6128
@@ -736,7 +736,7 @@
         ></animate>
         <line
           fill="none"
-          stroke="#000000"
+          stroke="currentColor"
           stroke-linejoin="round"
           x1="324" y1="288" x2="324" y2="756"
         />