From 8a3f85528235372b42911a855409bb2ca8523da2 Mon Sep 17 00:00:00 2001
From: JimQing <jimqing@yeah.net>
Date: Sun, 17 May 2020 16:53:21 +0800
Subject: [PATCH 1/3] feature: dark-theme

---
 public/assets/css/loading.css                 |   4 ++
 src/App.vue                                   |   2 +-
 src/assets/images/light.png                   | Bin 0 -> 5731 bytes
 src/assets/images/night.png                   | Bin 0 -> 5597 bytes
 src/assets/less/theme.less                    |  62 ++++++++++++++++++
 src/components/codeMirror/header.vue          |  56 +++++++++++-----
 src/main.js                                   |   7 +-
 src/router/index.js                           |  29 --------
 src/store/index.js                            |   6 +-
 src/{components => view}/CodemirrorEditor.vue |  21 +++---
 src/views/About.vue                           |   5 --
 src/views/Home.vue                            |  14 ----
 12 files changed, 129 insertions(+), 77 deletions(-)
 create mode 100644 src/assets/images/light.png
 create mode 100644 src/assets/images/night.png
 create mode 100644 src/assets/less/theme.less
 delete mode 100644 src/router/index.js
 rename src/{components => view}/CodemirrorEditor.vue (94%)
 delete mode 100644 src/views/About.vue
 delete mode 100644 src/views/Home.vue

diff --git a/public/assets/css/loading.css b/public/assets/css/loading.css
index f91fef5..aea6b19 100644
--- a/public/assets/css/loading.css
+++ b/public/assets/css/loading.css
@@ -8,6 +8,10 @@
   background-color: #f2f2f2;
 }
 
+.loading_night {
+  background-color: #303133;
+}
+
 .loading-wrapper {
   position: fixed;
   top: 50%;
diff --git a/src/App.vue b/src/App.vue
index 50a4640..4efd1a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@
 
 <script>
 import Loading from './components/Loading'
-import CodemirrorEditor from './components/CodemirrorEditor'
+import CodemirrorEditor from './view/CodemirrorEditor'
 export default {
     name: 'App',
     components: {
diff --git a/src/assets/images/light.png b/src/assets/images/light.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab702c1593f3930dc042b6bf16fc9e40a11287b3
GIT binary patch
literal 5731
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/night.png b/src/assets/images/night.png
new file mode 100644
index 0000000000000000000000000000000000000000..193f117b6add9b56adde04b861ed04b6a466d5d8
GIT binary patch
literal 5597
zcmZ{Ic|26#|Nos~>@wDrFvc!h#-1!S#3)&k42dw7u_Pm88%o9&g_vwLOhQ8%lQk3y
z4Mo{QZ)K1zO9<(Eeg63U_q&hBz31Hfy62qddF|(wY-@9tpXVqK008_}mS}sh?K-%*
zIKU_Ea#axkh?ZKR%`Qf`Efw-+yE%rv-)cc=-lje?dTvWm^3+<N2vv-)Pq{3DysX(Q
z{lp#e#Plsa<#bNAx|GTb_Kr0!I9wDB=MlHnwq>WLLcO*BEE`{)hC9(RDI&h+DR-FR
z;lpn<@QK|<ec{EklT9D7^taf>*B_1lg~m=b%o_KZWg>Y<&@2@qC0z-@bFPXAAWP1O
z<ei2<(07xR5X3HVIBZ%OfwDB3=%`fS;X>%l`}*OGVC<O@jmb{uMc}6X1N{Tc2#~T$
z5Uzd%4*61ALM5+)l<9c|Hyt}uK>2Y=_*Bf6np@NogEqdjsSCVd{PASz{nMF8Oj}Fr
zk1cIlGxyfSTmn`Hy1Ke{paZn99H`~p2@@kDBVGW<7+*3&N3XY@j2nOVeA57Z%$wEU
z*ZOf|V<WA~wc&;~&L||`0s@hv%4lh8*T!79@X-|*DI}XDkfg1YYXkGnLcS>izw}Wi
zG)C;`klmt!lPQpFV93G2v9q(gE8xM(kfA`@_Zlw7`kR_{NDKC#QJ25;)RjF`J*u+b
zcQKxngq)TEe(kGIq-tG#!`zacjzMn_?5whD+#ns4VdjiOaPUe$Gg=8)^!RW3Ww$Id
zS{gOg@6U++euJX^LxFg%pSLiq6Nxq=lf$n+X}4$o=M2<WRaXahgWFxPPje}^g?6z|
zIEQGytJ^+;b9)&y(YP@5+?ifwUve_>9T!3(SwED;4Ah&7UjHl@;sNtXo4;!<ESP)8
zBch#fH*Du0)UvEDX3FFU&}Y#>4m%2bAMarbu(i!#7o-QBllTLxPa#@XKA!2IL)=^V
zNOelr*-#R;LtmV8$Dow#M;<snV7tjsfao{24+UH;(7D5oC0LN6RfpGLBNi@<txnXA
zyWTvpK7Fb3_eH%}#}_n71g4x9__n7)aO(@)K7}ljxceW&VA#bsi~&I_d*gUf_`K0G
zm}pqg{QSIg^NpDv#_E~u_jEC0m%QUowi`Ntssbg-A!G4!TMwHMdwk?mnXOHfcm%0l
ziLae{<jze6FDk?iQ^*S(K3Q^8NB9J)TYfO$sHr#jk(^lXoN3+d7SBtXd%IZK-Fg=T
zMTS?bNm~NfWdt3UIm>Sl+0A~za8--hSGzvdRd1{$cYRfUey&^uMC}QD8|vAx;g(1s
zt+#9Ld2l-vYtHllLhNs#xE8vKq{G@xrYv$jJ$l|+9uU-bHvo(v083&+GVhND;2sA=
zgxkq#r%(hKSejyLg$eDJwSeWsf9@=N?U2tsX*kRK9L|_u@B$l=HgHt)O2>&{h_ns5
zS3SA_rKSTeFTmFPXQ6=_+QZ7soQ>qv%kSNNTH(LBIEorydKKTX7x?fDR>EmDLd1Oc
z6_(}{TBXPMiQ%;@=^q(bH)2bQFTFRjfF?W$Y?nxXS5Q<`^igxYEFi}IWm6H!=DhNy
zWe*H5$^NGypf4ZZ`L+C)KJw?zy~34UMVV=H;6=>6^9DJjs*g1-Un*4O5g28*yO7dX
z-T?uNF_li$`;NyT2?+5t${Z5y3V&~MH>06rESDse@t?~x>v^Djx6!lRchxA^f<79p
z-aQ8jqFT9kI3e=+c}#<pvMfRX+V(z+FHL0|Iep(ld@`q2%?!@;VdbyY|G37g_NSTT
zYR?+|wT6-GdsH_c{!q@W43n8&@(_>JO5fw)<P870wDejUxOjB+X|jhpgPGx~jPV2J
z16Z5Y@?!#e8IbEXk0ex-s8SH(Yb~3-GIXuayRcHR7H#5oOB@UttIK%kr1+@@y|GmL
zDC=|nr&+=N+|NA*AM~j}$Ktc)$VpFU9=o*>)|#)fV2nxnO?I>E@~Ak4^vhWt+ia+n
za>o7^--4w)K^a($i93Rn%EqKtO3LZjX4~trwQ)OlcQQZJ4zakn%Tm{gO4LID@OjmK
zQFPl)#QZQQDbY>!e5?wUiC5)RNIsEMJsY{JoqwJ_SWc(%5xvH&`Zmw4b?oPoHNIfu
z)PkP%EoYekL_|=U-(HYB<-1l&A?9)!<o>8^j`4ocsFKFA3!`Oa1%EHZT0V<AA)-jH
zZZu$DwQ}3)d*dMzQ_3o8J7fPNTbna_V?zHwt^Kq=D##r|LG#+L5HUFU)WAwC&iD*o
z62D+e&5mE_+Mp*){odT{bFR5&{(P%Pt7}$G<_ZTIml1HwWN2BouxyFNz0Ij*dHj;i
zksmcymWmLN1-eLuMz*Y^2ydF~a+GVKn(IpU<B8+RzBU{o!bt?7%z`48f><>ZB4qlY
zn|Y74o8+-g#6N1}A(2nvniMV#t|hZsUBaJ1H=p2ZPptA=JccM7uI_yut~`4Dg_z(L
zcl)Qsp`a^Tw}{)*62Z+Uv<(e+C}Btg@kXvLdz>z(Kc@R^d{pw>i=c`ge=!eMB6dNd
zsaqcJQU)9m7ayr;ZT*)Eya*iP&)p8Td%PeymSfNAw4`rcdNcz;Vou^Hdj(KAu7sGp
zKTptVLbI275YwFPn#XFwHe>$jqxT-tUQ;Ke-@SW>d+zpnN8Wmu*;@cbEB_V%eo>h&
zYN7!Y0HraA)p(hMb9aAS-P&3VxVH_xf2ZD;&X!*v66ne%m*qkV=`7E`T1N*pdM}SG
z&G^EDx?0IFmSqsR*%~;yf`M-zg<e^G^;G$^q)N#?%0bLIQJK$FlS2v*Cr|T%K3NZL
zck&4)J!@`$p3DH9q@4?Q^i(UaV8#nZU5&M;wQT;afPezfqlO`Yyd|Gfk;=AFG$ApN
z#|*A|jdd~ny!LpBKP|YXSH}9J52&~Q{Luu~7|Oa|GUKn3U@yJ528>{=$RdMVG7PQJ
zd%w#aKba$Z06R?g-RoBft`DD{5L?h-Ydh({oR>lFREm7>JTxPOXyqUtsc}Kx^HcdW
zxG;+;mu4gWe(rgHj*i}t;%#D{F95ujzcvKB)CEoa^Pa?(w_S>#LDv@3YF2i0k<+t*
zOM#0!J3IScUS2<RB*s+(3xHA(#&l#6eM;VE6msufY$9ngDBq=|U%zX;+56R|?oB(9
zr7<vK26^UF(}fQVI(rna`{6ETaaqK)LjY8*U|lz7BQRK(FowcMz7!w))x~M=d^4nZ
z1eZUo$yZ&wDkUWq>m*{{%BWd-`?NC5_Ham(Rv0X^5^&GDt<>b7EM8UtAY;||+UWte
zRj6aYx6!c+K1rmj-0hl!VZDSfn~i^0ARPfMdwL;95yqoRZOo~Dtjm@aoE=Y&OcJ3t
zJR&h6CW&H-2aJZG_s~x;mNVZ)=YBfhvF~YCX~m~#O`_3>ar(3D2s60R8)g$#sp<}<
zs*MLZ)~TCj-xIBHYHDcm?XoV?@ZDQ=2Vq4}5T~*>!(rr#OBvtr$-ZaDpQ=z>4gqm^
ze6UBjfS_cMM{arYabliE*Q>r-s!+2FY)H7D^~wgL9E#|>=CV7#nD-|MyP)k;I$u%n
z>t7R;>wS+~ftDkY977BH@bm$KtHrbE%E$<IjPQG))SFq=>k9b+14gPA7CU9|FdHN?
zbY43U+|FT=ekk^gH5<BFgRlLzS}zI}3e7}tb?srjhcMj7oZ<zMJKqR>;JUSRgWyxW
zYk^2Z-CknIH3NvHO<Co;{<G1*(^Eezlyf@e*MyLUujdY3hr*|}R?r<V^HiDN7b@C%
zi)IU_0(6VVN03|zFlMxmSmTLxDs~~1PMSD>?tm9$)Nz{yg^-%wEAdW{$H}A%C)T4N
zZ2`|;gkEw+OgDIlyFGG@9<Q$gZp0fXFm?TEDqEn;=*FR2R{d&W2diB;({Wi*T2$@v
zmtr#Xz0m#0v(=xb*%8ieAH*uEE=sw?E2SI?VqkHyZ%(HQgHC)CN<7Qscv>a=e0(H&
z!?)kc0MZ5KUHb%juWl68_e5!IxCn{zta{M@wH?922DpZ{#gLtj-c1oh{|rAJuSoI@
zKdcqP4X5Yqhp3Z~1|n5$GiZVhnBNhtiFwuU_q$<sa!J=j-C44=L*a+>JEigA93akF
z8OkW}9Hv)PTtXsh>gQl(+)M&rAE2eLUw=M0xY~hJzwwiq4%0(aP{-A;4n-u0{lt}M
zDhgzWQ`;+wI8kv9_?U#_O9Xzn^Rp%`EuJ1W!H<0HzaAx2OqF8G0Pciue7Ke|(Ga<e
zJy8<Hx9%Wq+t<0^TH-+DJ9KFI%lP;%FYsbtY)n)}KH~@I89l)$tQ}dpfz*dt`be&Q
z1Z=m1#OAG3?+1X`KjLYv*YL$jg`q_4qv_vIecZK>O3yVcaCmHnu5|6`F)%f(i|X|r
z(pBe{Z}6%l9v|OJ3#Nt=^Vnmi{&66siUV^k3GYSp(@9mKs*2%7rNOFcE4xXu6z5dS
z@+2rruG|cHYly)zG`J1U-z(U^NUzPpCs-Mim98ra{tZ*OFU%1pl-cL~@EC95i%{zy
z%N?@};rSU=(8`$JtTO8_-4FbYV9#~SQV$z8<kE=*+<ggnh{qZZ!|o(%+F|Y?t{$dq
z;v|fU>{gw=u~PaV|1&+w@5yHriHR)dJMDA3-Z&~73MZQvNKRP^hsJIy!4O)ha*|0w
zJGma4O8nqUy+N0-mt)Fki8irI^?|#R;T-niXvsxThj0LK^ovK^8{^#UMbY|v(!CdY
z8bbqrnl4Lx_`bVuM~aB5d0@4~EfOIGY~EbT*(@J(P%$;k#jf#S5(KfO$5F-487<{q
z#~Nu(1R|4+nw4C-x%-|O5YrV?M<K=R@YKI@Ne<+-<|O&$+55)<+bw~zomH1%@DLHf
zEvdLWE;Y`hgKij8!%SB`AhFoPM=^AXb`MEed1#k70DbBHCZWi&@)EfTYqOMK_s%Rc
zq|ZsPzYJ9+OaDcMbtnx)5+h82fMW7#A^l{iz~=AYlA2mtFO97-kulc%B*ChF-(x=_
zCto7Xvm5ms0m0uRBO~vfXjt!{rH8Mwr84_&{SX1JFW>$*a4+RY^1qDPNa;Y`{A{C(
zHG(P-()~|ce^cSB(y2KP{wqq~I{qa1ZCH2%^GrFG>ypD~xW%;&hc;?^@HFEa%`FF7
z%9h+v7~yqv+A{6H?>oHJY<_Z5qmFi*lXU+iS3(l`k7tne)rQ4BS&D`e%`u0)6qS{C
zKC@7t>!tr~Ty#|4A79#UNyh*mZ^*pq4FJfSm9y8fN2E}$xX>ON9C`kLIzS|-*D?38
z;OS`m_~`9Uot^@GYjNs$;!|a-8OVui{QUfZQ=dP3ie+#<Rd!4Foai4O4xjGoB8@uK
z4N%310dr<kTi&vbciPG1>V9l7S@WFVS3GDmS8f;sd7LSysPpoALNRQBx(tQ)tEFPG
zsy~Q*aO-dDhS7=<Zc;;<{NV~OO2d<7jin7`%>-F(jSdTC@@pwmjX8l?NZZNA+$u4t
zR*R0*%FSQZ`9+mFh(g$26nJUqRa+8dUHJp5GbnQfph^4lj~V(2;|01b=*f|%W_W;+
znm#rtAf+d8Ik{`kWfw_IlYnBBt5%;yWRqBf^?&oVuK<Fkx|d9WBYINoa0nV8U+WPu
z{a>%9wc?=;>A9J%l$zG<E<Pk^8wjo2msJp{1n1HVr!Ee(bX;TEeO$L-wm!W5rH4<@
z$HGo~cn?40?juL!LNq|ukSL8I?3Ayb?sw-uEpaa+CE0;j>4*PQbAytA2fPRk;eK6Z
zzRL@6OnENgj>jh@^TXf}xx=Q1<S4G;#ZDONYGe(7Bzp0ZobkRiANf7`jG3zJos~Pe
z*n=6=5WsZ_K}li!9YumYh6Y+4_ggLm)bbTkbKRcyo5Fru`&Fg=Pd^|};v@jpF~Etq
z0Fj#<5&sL{oDjKqDAbZg%;WL8Uo<JMrv0GVU(04+TS^2u9hc~_JsY_hz(Y^6a#FAH
z;^_9~0OPv>N&`W;isMeP_xC|JAE!FR9RQX#HDu(a4=&?a#WIwJ_H3*N%YamW95{9e
z2)0&!0WSQ5#}e~hw@wp8jU=9Xa)1Q{O8T3o8eXGSpX#mA8v5}6@p#kZ+(G|k4fLRS
z@Q?4B)G^$uxyRdKjDpZ<P+V(lcgU^WK&~IH*Y8~U;i)YNT)r*Z$e8-=fGZM+B*FgI
z%KTrI+rcvlj2LDA%o-f@l9OG~1U!=G{Ey>i@Pba}RmRP{5nGV<6!yae^6eBi$5?Rk
z+ywWYXOjvwRse8$cL=!7D;T2^A2;JVqdxRByhe(RcuHtv<2JfB82WFd3RCU_xFdo9
z^q#%=T~>slvLsjs3OVy;>+d*xHH+J#E7830ds+4^c3?9l|0GI-c`Kh%-yk}pNDScV
zk|%8^vP-@!An_RN+A1?RfSdR7n+)i7_}4~NaiV|OGtX<(Fg0HMk-z8S1|eRd?;rAt
zzQJmO1D}9ThxJy6ug1NO>wToNFumi{e*qvrcFM8W0NQSH8}7Lw4OQdghO5BbB!Bqp
za=K&QA9WhT;I2)N1z466=1W3wJ=9w7wzA+sE=%A2kIm}Z$PR~@W-&R=9dD96k&GsU
zz7@|2J#4BlXFs)-ak^vNVQ#4j^6e@`=@w<spSol2QPQ9HJ#sP$a4+t2N=zR3ZM5>Y
z7q@OA1S@|`2ehopRH)0G0KL#>CiUxNVRI@h)2jA}l+>hJ3Z+=idE;TcDlYcML}OS~
z&vf+kq>$-T@y?c&VleYmZ8yD;>A4&gA>XAF?ga5V+6^9J65G$*SRo%%$+oVXHy1N~
z+VAV`?q0dSzwd2TWP4$X|Bs92x(;>$wO-xes>6d2`>SJQ)a)r@j_Wsm|F)S=p-!kj
z#M`oV?idXILCO}x4{4hLG^YkStx&j@OZb?(S=|PC*}#BznG&^+lgQgh2z~Q)aWAOv
zTytllSI>jnfKW-9;e{#<OoZ6kv`3yzUsFk`?V7HVCr_W3gk`czO0&N?y`ECv{x~n}
z^FZ@Q>vM?m&?=}U&y@kl3_GA%9V>EW3~-->2y5EUaYN)_f_itvj~?AI1q*YNq<THn
z3O}%N?!?~3CvFxUGhnPU!@0Hi4_3^ER@AKxav_e~Tvcyce0im5qUeOK?kid3qt<Y$
zog}LIw^4AQh&g_^`fBS<0%4<5dm58=UKDQXb&&*hIH*<rg2UM1N7yK)Mldgq<g)yT
zK{NzXsvxP>n^r~ygf8f<RwRQy;JhLB(UA*a!LTT3+EEx(;YWm8ZB!9R`TrC-x8vBv
WSh8p9+V{b-EnsDCgRVO5p74L*$}Wfi

literal 0
HcmV?d00001

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
new file mode 100644
index 0000000..46342c3
--- /dev/null
+++ b/src/assets/less/theme.less
@@ -0,0 +1,62 @@
+@nightBgColor: #333333;
+@nightPreviewColor: #1e1e1e;
+@nightHeaderColor: #3c3c3c;
+@nightCodeMirrorColor: #1e1e1e;
+@nightActiveCodeMirrorColor: gray;
+@nightFontColor: gray;
+@nightLinkColor: #8e9eb9;
+@nightLinkTextColor: #84868b;
+@nightBorderColor: #ffffff;
+@nightButtonBg: #1e1e1e;
+@nightButtonHoverColor: #84868b;
+.container_night {
+    background-color: @nightBgColor;
+    .CodeMirror  {
+        caret-color: @nightFontColor;
+        color: @nightFontColor;
+        background-color: @nightCodeMirrorColor;
+        box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
+    }
+    .preview {
+        background-color: @nightPreviewColor;
+        box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
+    }
+    .preview-wrapper {
+        background-color: @nightCodeMirrorColor;
+        box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
+    }
+    .cm-s-xq-light span.cm-variable-2 {
+        color: @nightFontColor;
+    }
+    .cm-s-xq-light .CodeMirror-activeline-background {
+        background-color: transparent;
+    }
+    .cm-s-xq-light span.cm-string {
+        color: @nightLinkColor;
+    }
+    .cm-s-xq-light span.cm-link {
+        color: @nightLinkTextColor;
+    }
+    .editor__header {
+        background-color: @nightHeaderColor;
+    }
+    .el-button {
+        color: @nightBorderColor;
+        background-color: @nightCodeMirrorColor;
+        border: 1px solid #eeeeee;
+    }
+    .el-button.is-plain:focus, .el-button.is-plain:hover {
+        background: @nightButtonBg;
+        color: @nightButtonHoverColor;
+        border: 1px solid @nightButtonHoverColor;
+        i {
+            color: @nightButtonHoverColor;
+        }
+    }
+    i {
+        color: #ffffff;
+    }
+    ::-webkit-scrollbar {
+        background-color: @nightCodeMirrorColor;
+    }
+}
\ No newline at end of file
diff --git a/src/components/codeMirror/header.vue b/src/components/codeMirror/header.vue
index ee2363c..1114dfb 100644
--- a/src/components/codeMirror/header.vue
+++ b/src/components/codeMirror/header.vue
@@ -1,24 +1,24 @@
 <template>
-    <el-container class="top">
+    <el-container class="top is-dark">
         <!-- 图片上传 -->
         <el-upload class="header__item" action="https://imgkr.com/api/files/upload"
             :headers="{'Content-Type': 'multipart/form-data'}"
             :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
             :before-upload="beforeUpload">
-            <el-tooltip effect="dark" content="上传图片" placement="bottom-start">
+            <el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
             <i class="el-icon-upload" size="medium"></i>
             </el-tooltip>
         </el-upload>
         <!-- 下载文本文档 -->
-        <el-tooltip class="header__item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
+        <el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
             <i class="el-icon-download" size="medium" @click="downloadEditorContent"></i>
         </el-tooltip>
         <!-- 页面重置 -->
-        <el-tooltip class="header__item" effect="dark" content="重置页面" placement="bottom-start">
+        <el-tooltip class="header__item" :effect="effect" content="重置页面" placement="bottom-start">
             <i class="el-icon-refresh" size="medium" @click="reset"></i>
         </el-tooltip>
         <!-- 插入表格 -->
-        <el-tooltip class="header__item header__item_last" effect="dark" content="插入表格" placement="bottom-start">
+        <el-tooltip class="header__item header__item_last" :effect="effect" content="插入表格" placement="bottom-start">
             <i class="el-icon-s-grid" size="medium" @click="$emit('showDialogForm')"></i>
         </el-tooltip>
         <el-form size="mini" class="ctrl" :inline=true>
@@ -47,19 +47,23 @@
                 </el-option>
             </el-select>
             </el-form-item>
-            <el-tooltip content="自定义颜色" placement="top">
+            <el-tooltip content="自定义颜色" :effect="effect" placement="top">
             <el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
             </el-tooltip>
-            <el-tooltip content="微信外链自动转为文末引用" placement="top">
-            <el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
-            </el-switch>
+            <el-tooltip content="微信外链自动转为文末引用" :effect="effect" placement="top">
+                <el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
+                </el-switch>
             </el-tooltip>
         </el-form>
-        <el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
-            <el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
+        <el-tooltip class="item" :effect="effect" content="自定义CSS样式" placement="left">
+            <el-button :type="btnType" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
+        </el-tooltip>
+        <el-button :type="btnType" plain size="medium" @click="copy">复制</el-button>
+        <el-button :type="btnType" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button>
+        <el-tooltip content="夜间模式" placement="bottom-start">
+            <div class="mode__switch" v-if="!nightMode" @click="themeChanged"></div>
+            <div class="mode__switch mode__switch_black" v-else @click="themeChanged"></div>
         </el-tooltip>
-        <el-button type="success" plain size="medium" @click="copy">复制</el-button>
-        <el-button type="success" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button>
       </el-container>
 </template>
 
@@ -90,13 +94,20 @@ export default {
         };
     },
     computed: {
+        effect() {
+            return this.nightMode ? 'dark' : 'light'
+        },
+        btnType() {
+            return !this.nightMode ? 'success' : 'default';
+        },
         ...mapState({
             output: state=> state.output,
             editor: state=> state.editor,
             cssEditor: state=> state.cssEditor,
             currentFont: state=> state.currentFont,
             currentSize: state=> state.currentSize,
-            currentColor: state=> state.currentColor
+            currentColor: state=> state.currentColor,
+            nightMode: state=> state.nightMode
         })
     },
     methods: {
@@ -228,7 +239,7 @@ export default {
             downLink.click()
             document.body.removeChild(downLink)
         },
-        ...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus',
+        ...mapMutations(['clearEditorToDefault','setCurrentColor', 'setCiteStatus', 'themeChanged',
             'setHtml', 'setCurrentFont', 'setCurrentSize', 'setCssEditorValue', 'setWxRendererOptions'])
     },
     mounted() {
@@ -252,4 +263,19 @@ export default {
 .header__switch {
     margin-left: 8px;
 }
+.mode__switch {
+    margin-left: 24px;
+    width: 24px;
+    height: 24px;
+    background: url('../../assets/images/night.png') no-repeat;
+    background-size: cover;
+    transition: all .3s;
+}
+.mode__switch_black {
+    background: url('../../assets/images/light.png') no-repeat;
+    background-size: cover;
+}
+.top {
+    margin-right: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 5312c50..ea3fd9b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -9,12 +8,12 @@ import 'codemirror/lib/codemirror.css';
 import "codemirror/theme/ambiance.css";
 import "codemirror/addon/hint/show-hint.css";
 import "codemirror/theme/xq-light.css";
+import "./assets/less/theme.less";
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 
 new Vue({
-  router,
-  store,
-  render: h => h(App)
+    store,
+    render: h => h(App)
 }).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
deleted file mode 100644
index a1898de..0000000
--- a/src/router/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: Home
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
-})
-
-export default router
diff --git a/src/store/index.js b/src/store/index.js
index 4dc19c4..f451bb3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -21,7 +21,8 @@ const state = {
     currentFont: '',
     currentSize: '',
     currentColor: '',
-    citeStatus: 0
+    citeStatus: 0,
+    nightMode: true
 };
 const mutations = {
     setHtml(state, data) {
@@ -52,6 +53,9 @@ const mutations = {
         state.currentColor = data;
         localStorage.setItem('color', data)
     },
+    themeChanged(state) {
+        state.nightMode = !state.nightMode;
+    },
     initEditorState(state) {
         state.currentFont = localStorage.getItem('fonts') || config.builtinFonts[0].value
         state.currentColor = localStorage.getItem('color') || config.colorOption[1].value
diff --git a/src/components/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue
similarity index 94%
rename from src/components/CodemirrorEditor.vue
rename to src/view/CodemirrorEditor.vue
index 5484bd0..d521e2d 100644
--- a/src/components/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -1,7 +1,7 @@
 <template>
-    <div id="app" class="container">
+    <div class="container" :class="{'container_night': nightMode}">
         <el-container>
-            <el-header class="top editor__header">
+            <el-header class="editor__header is-dark">
                 <editor-header
                     @refresh="onEditorRefresh"
                     @uploaded="uploaded"
@@ -53,9 +53,9 @@ import 'codemirror/addon/hint/css-hint.js'
 import '../scripts/format.js'
 
 import fileApi from '../api/file';
-import editorHeader from './codeMirror/header';
-import aboutDialog from './codeMirror/aboutDialog';
-import insertFormDialog from './codeMirror/insertForm';
+import editorHeader from '../components/codeMirror/header';
+import aboutDialog from '../components/codeMirror/aboutDialog';
+import insertFormDialog from '../components/codeMirror/insertForm';
 import {
     setFontSize,
     css2json,
@@ -93,7 +93,8 @@ export default {
             cssEditor: state=> state.cssEditor,
             currentSize: state=> state.currentSize,
             currentColor: state=> state.currentColor,
-            html: state=> state.html
+            html: state=> state.html,
+            nightMode: state=> state.nightMode
         })
     },
     created() {
@@ -207,7 +208,7 @@ export default {
         },
         // 左右栏同步滚动
         leftAndRightScroll() {
-            $('div.CodeMirror-scroll, #preview').on('scroll', function callback() {
+            $('#preview').on('scroll', function callback() {
                 clearTimeout(this.timeout)
 
                 let source = $(this)
@@ -246,6 +247,10 @@ export default {
 <style lang="less" scoped>
 @import url('../scripts/google-code-prettify/prettify.css');
 .main-body {
-    padding-top: 0;
+    padding-top: 12px;
+    overflow: hidden;
+}
+.container {
+    transition: all .3s;
 }
 </style>
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index 7d00042..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="home">
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-
-export default {
-  name: 'home',
-  components: {
-  }
-}
-</script>

From 1d822fb6ef692626281c8c77c61dad2d85a90b1c Mon Sep 17 00:00:00 2001
From: JimQing <jimqing@yeah.net>
Date: Sun, 17 May 2020 18:16:26 +0800
Subject: [PATCH 2/3] feature: dialog-night

---
 src/assets/less/theme.less                | 34 +++++++++++++++++------
 src/components/codeMirror/aboutDialog.vue |  2 +-
 src/components/codeMirror/header.vue      | 12 ++++----
 src/components/codeMirror/insertForm.vue  | 12 +++++---
 src/view/CodemirrorEditor.vue             |  5 ++++
 5 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 46342c3..3815277 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -6,11 +6,14 @@
 @nightFontColor: gray;
 @nightLinkColor: #8e9eb9;
 @nightLinkTextColor: #84868b;
-@nightBorderColor: #ffffff;
+@nightWhiteColor: #ffffff;
 @nightButtonBg: #1e1e1e;
 @nightButtonHoverColor: #84868b;
 .container_night {
     background-color: @nightBgColor;
+    .el-main {
+        background-color: @nightBgColor;
+    }
     .CodeMirror  {
         caret-color: @nightFontColor;
         color: @nightFontColor;
@@ -25,7 +28,11 @@
         background-color: @nightCodeMirrorColor;
         box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
     }
-    .cm-s-xq-light span.cm-variable-2 {
+    .cm-s-style-mirror .CodeMirror-matchingbracket {
+        color: @nightWhiteColor!important;
+        background: rgb(30, 30, 30)!important;
+    }
+    .cm-s-xq-light span.cm-variable-2, .cm-s-style-mirror span.cm-tag {
         color: @nightFontColor;
     }
     .cm-s-xq-light .CodeMirror-activeline-background {
@@ -41,20 +48,31 @@
         background-color: @nightHeaderColor;
     }
     .el-button {
-        color: @nightBorderColor;
+        color: @nightWhiteColor;
         background-color: @nightCodeMirrorColor;
-        border: 1px solid #eeeeee;
+        border: 1px solid transparent;
     }
     .el-button.is-plain:focus, .el-button.is-plain:hover {
         background: @nightButtonBg;
-        color: @nightButtonHoverColor;
-        border: 1px solid @nightButtonHoverColor;
+        color: @nightWhiteColor;
+        border: 1px solid @nightWhiteColor;
         i {
-            color: @nightButtonHoverColor;
+            color: @nightWhiteColor;
+        }
+    }
+    .insert__dialog, .about__dialog {
+        .el-dialog {
+            background-color: @nightBgColor;
+        }
+        .el-dialog__body {
+            color: @nightWhiteColor;
+        }
+        .el-dialog__title, .el-form-item__label {
+            color: @nightWhiteColor;
         }
     }
     i {
-        color: #ffffff;
+        color: @nightWhiteColor;
     }
     ::-webkit-scrollbar {
         background-color: @nightCodeMirrorColor;
diff --git a/src/components/codeMirror/aboutDialog.vue b/src/components/codeMirror/aboutDialog.vue
index 055e894..dc4d8d3 100644
--- a/src/components/codeMirror/aboutDialog.vue
+++ b/src/components/codeMirror/aboutDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="关于" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center>
+    <el-dialog title="关于" class="about__dialog" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center>
         <div style="text-align: center;">
             <h3>一款高度简洁的微信 Markdown 编辑器</h3>
         </div>
diff --git a/src/components/codeMirror/header.vue b/src/components/codeMirror/header.vue
index 1114dfb..c0bff92 100644
--- a/src/components/codeMirror/header.vue
+++ b/src/components/codeMirror/header.vue
@@ -26,24 +26,24 @@
             <el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
                 <el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
                 :label="font.label" :value="font.value">
-                <span class="select-item-left">{{ font.label }}</span>
-                <span class="select-item-right">Abc</span>
+                    <span class="select-item-left">{{ font.label }}</span>
+                    <span class="select-item-right">Abc</span>
                 </el-option>
             </el-select>
             </el-form-item>
             <el-form-item>
             <el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
                 <el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
-                <span class="select-item-left">{{ size.label }}</span>
-                <span class="select-item-right">{{ size.desc }}</span>
+                    <span class="select-item-left">{{ size.label }}</span>
+                    <span class="select-item-right">{{ size.desc }}</span>
                 </el-option>
             </el-select>
             </el-form-item>
             <el-form-item>
             <el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
                 <el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
-                <span class="select-item-left">{{ color.label }}</span>
-                <span class="select-item-right">{{ color.hex }}</span>
+                    <span class="select-item-left">{{ color.label }}</span>
+                    <span class="select-item-right">{{ color.hex }}</span>
                 </el-option>
             </el-select>
             </el-form-item>
diff --git a/src/components/codeMirror/insertForm.vue b/src/components/codeMirror/insertForm.vue
index 8a58938..da39d32 100644
--- a/src/components/codeMirror/insertForm.vue
+++ b/src/components/codeMirror/insertForm.vue
@@ -1,6 +1,6 @@
 <template>
-    <el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')">
-        <el-form :model="config.form">
+    <el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
+        <el-form class="insert__form" :model="config.form">
             <el-form-item label="行数(表头不计入行数)">
             <el-input v-model="config.form.rows"></el-input>
             </el-form-item>
@@ -9,8 +9,8 @@
             </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-            <el-button type="success" plain @click="$emit('close')">取 消</el-button>
-            <el-button type="success" @click="insertTable">确 定</el-button>
+            <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+            <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
         </div>
     </el-dialog>
 </template>
@@ -31,7 +31,11 @@ export default {
         }
     },
     computed: {
+        btnType() {
+            return !this.nightMode ? 'success' : 'default';
+        },
         ...mapState({
+            nightMode: state=> state.nightMode,
             editor: state=> state.editor
         })
     },
diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue
index d521e2d..279a9ed 100644
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -250,6 +250,11 @@ export default {
     padding-top: 12px;
     overflow: hidden;
 }
+.el-main {
+    transition: all .3s;
+    padding: 0;
+    margin: 20px;
+}
 .container {
     transition: all .3s;
 }

From 4b65d3a5cc3075f2e094cb4eb6f4e5ae35d88cd3 Mon Sep 17 00:00:00 2001
From: JimQing <jimqing@yeah.net>
Date: Sun, 17 May 2020 18:25:11 +0800
Subject: [PATCH 3/3] readme

---
 README.md    | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4063f7d..3832eb7 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 支持自定义 CSS 样式并实时渲染
 - [x] 支持一键恢复至默认内容及样式
 - [x] 支持打开或关闭引用链接的选项
+- [x] 支持夜间模式展示
 
 ![select-and-change-color-theme](https://imgkr.cn-bj.ufileos.com/32c05c23-6309-491f-bd0d-f22a62c944b4.gif)
 
diff --git a/package.json b/package.json
index c1961f0..464b9bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-md",
-  "version": "0.1.0",
+  "version": "1.3.0",
   "private": true,
   "homepage": "https://doocs.gitee.io/md",
   "scripts": {