From 92c5e9f093b0edb5963d51a01f133dea5226603e Mon Sep 17 00:00:00 2001
From: quinn <kun.peng@outlook.com>
Date: Fri, 11 Oct 2019 23:43:31 +0800
Subject: [PATCH] add dark mode

---
 index.ftl                                   |   2 +-
 layout/.DS_Store                            | Bin 0 -> 8196 bytes
 layout/common/module.ftl                    |   4 +-
 layout/common/navbar.ftl                    |   2 +-
 layout/layout.ftl                           |   1 +
 layout/widget/profile.ftl                   |  16 +--
 photos.ftl                                  |   4 +-
 search.ftl                                  |   2 +-
 source/css/style.css                        |  24 +++-
 source/css/style.dark.css                   | 144 ++++++++++++++++++++
 source/css/style.styl                       |  18 ++-
 source/css/widget_pin.css                   |   3 +-
 source/lib/prism/css/prism-line-numbers.css |   2 +-
 13 files changed, 191 insertions(+), 31 deletions(-)
 create mode 100644 layout/.DS_Store
 create mode 100644 source/css/style.dark.css

diff --git a/index.ftl b/index.ftl
index ad21021..9acc7b6 100644
--- a/index.ftl
+++ b/index.ftl
@@ -24,7 +24,7 @@
                         <#if r == posts.number+1>
                             <li><a class="pagination-link is-current" href="${context!}/page/${posts.number+1}">${posts.number+1}</a></li>
                         <#else>
-                            <li><a class="pagination-link has-text-black-ter" href="${context!}/page/${r}">${r}</a></li>
+                            <li><a class="pagination-link" href="${context!}/page/${r}">${r}</a></li>
                         </#if>
                     </#list>
                 </ul>
diff --git a/layout/.DS_Store b/layout/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..272efae01694a05827849eceb2fc3a1bf9de924f
GIT binary patch
literal 8196
zcmeHM-D(p-6h70RbdqR|AhwDZ3nF?EC24D-h!A2c6a>W-d*M&J$*#@9b~j`<jWtGs
z58$;}Fa5!{P;Y$zz4RS?06k}B8h7(^CqZzg%zU#m-`P3&=42;l3jnO#vho0n0Kl;l
zX42S<C^S!Xs7$Gm3?f5&fF1Cm2@cp046*fqRzNGD70?Q31+)VHf&zGEQ{iLIeL1UJ
zt$<eGzf^#p4+d7klER)u@#w%tqyUIBI4lbGDIFjiLt#l_Pa@7>VbT;)nlhDQFlmnC
zhT@eJ_9RMkU@G}wYGtM}6ed>3`x}A|tRzvlS^=%VumbdTnTHyf5MtII&EGG<V;pnW
zUB6a!{VMW^dkyP_U!q_S;K+dOK8&{eIAAx2c0TOlpA8;_@m1Ku06WoV`{2d7!lPFa
zk7C?vJ7_5Hzg8Qr6NI_kH#RjrGn<&>JjGK-Qx7Y3zg-E<uoaZe=6$-lV}|vr>TmeI
z+wYszdyd`S%AC02d!gxgc2gKTmW`ALn~rDs?XutUtU%nSA}2Uc^5j<Lbf>eFyPP#H
z=2w=wS)-F*T3*Q-#bUABP4b0v`RnW3yZcW&&$`bKNLhS_sb?J=lh^(B4fbLmbFb3$
zT;JOvBQa;8xSrh90l8=+qH?9cMczL0Te#gLH&1Lw)FuH9v}$3vIHR_M@z{0*xWy*E
z7OFvg*q0c07GE3H1=o%<$%7bk4t+Io{gM7sNU$dnAGl%%WB8~^jGurueliR1Z;uMi
z@!Uwb{X7h}?}y=*Or?|Q`E)WKa9f!(Doi#VE39wW-kNLg+1~BuEi<%bJpP3kjK(!T
zTXKJ37yyX4JlW|K3d>m|M?qQ07qiClm8%q!{M7lIcOSK0ynKD|_TBprpFRtlKVf-X
zUiaHC*o#RQ56d1AnFvrqd4TKlpH$IBD=>Klrsa~0l>e`dfB!#u$MlL?0j<Eq6ks!}
zmDMsXcldjAaAi8G4XoQ(sSvLxQJ7#OPIE+&jwAN}VTgSLsbo`9*prAOSo9A8A%kwT
I0uxo>H>=h|umAu6

literal 0
HcmV?d00001

diff --git a/layout/common/module.ftl b/layout/common/module.ftl
index 2cdc821..9865b3d 100644
--- a/layout/common/module.ftl
+++ b/layout/common/module.ftl
@@ -16,7 +16,7 @@
         </div>
     </#if>
     <#if name == 'slider'>
-        <div class="blog-slider">
+        <div class="blog-slider card">
             <div class="blog-slider__wrp swiper-wrapper">
                 <#list posts.content as post>
                     <#if post.topPriority == 1>
@@ -30,7 +30,7 @@
                             <div class="blog-slider__content">
                                 <span class="blog-slider__code">${post.createTime?string["EEE MMM d"]}</span>
                                 <div class="blog-slider__title title is-5">${post.title!}</div>
-                                <div class="blog-slider__text">${post.summary!}</div>
+                                <div class="blog-slider__text" content="">${post.summary!}</div>
                                 <a href="${context!}/archives/${post.url!}" class="blog-slider__button">阅读更多</a>
                             </div>
                         </div>
diff --git a/layout/common/navbar.ftl b/layout/common/navbar.ftl
index 8217924..59494d2 100644
--- a/layout/common/navbar.ftl
+++ b/layout/common/navbar.ftl
@@ -1,5 +1,5 @@
 <#macro navbar layout>
-    <nav class="navbar navbar-main has-background-white is-paddingless " >
+    <nav class="navbar navbar-main  is-paddingless " >
         <div class="container ">
             <div class="navbar-brand transparent">
                 <a class="navbar-item navbar-logo" href="${context!}">
diff --git a/layout/layout.ftl b/layout/layout.ftl
index 815539d..b5380c9 100644
--- a/layout/layout.ftl
+++ b/layout/layout.ftl
@@ -68,6 +68,7 @@
         <link rel="stylesheet" href="${static!}/source/css/style.css">
         <link rel="stylesheet" href="${static!}/source/css/bundle.css">
         <link rel="stylesheet" href="${static!}/source/css/back-to-top.css">
+        <link rel="stylesheet" href="${static!}/source/css/style.dark.css">
 
         <#if post??>
             <link rel="stylesheet" type="text/css"
diff --git a/layout/widget/profile.ftl b/layout/widget/profile.ftl
index fb8d8ae..675e8f6 100644
--- a/layout/widget/profile.ftl
+++ b/layout/widget/profile.ftl
@@ -67,48 +67,48 @@ box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);">
         <#--        </div>-->
         <div class="level is-mobile">
             <#if settings.social_github?? && settings.social_github!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Github"
+                <a class="level-item button  is-marginless" target="_blank" title="Github"
                    href="https://github.com/${settings.social_github}">
                     <i class="fab fa-github"></i>
                 </a>
             </#if>
             <#if settings.social_qq?? && settings.social_qq!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="QQ"
+                <a class="level-item button  is-marginless" target="_blank" title="QQ"
                    href="tencent://message/?uin=${settings.social_qq}&Site=&Menu=yes">
                     <i class="fab fa-qq"></i>
                 </a>
             </#if>
             <#if settings.social_weibo?? && settings.social_weibo!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Weibo"
+                <a class="level-item button  is-marginless" target="_blank" title="Weibo"
                    href="https://weibo.com/${settings.social_weibo}">
                     <i class="fab fa-weibo"></i>
                 </a>
             </#if>
             <#if settings.social_twitter?? && settings.social_twitter!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Twitter"
+                <a class="level-item button  is-marginless" target="_blank" title="Twitter"
                    href="https://twitter.com/${settings.social_twitter}">
                     <i class="fab fa-twitter"></i>
                 </a>
             </#if>
             <#if settings.social_facebook?? && settings.social_facebook!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Facebook"
+                <a class="level-item button  is-marginless" target="_blank" title="Facebook"
                    href="https://www.facebook.com/${settings.social_facebook}">
                     <i class="fab fa-facebook"></i>
                 </a>
             </#if>
             <#if settings.social_email?? && settings.social_email!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Email"
+                <a class="level-item button  is-marginless" target="_blank" title="Email"
                    href="mailto:${settings.social_email}">
                     <i class="fas fa-envelope"></i>
                 </a>
             </#if>
             <#if settings.social_telegram?? && settings.social_telegram!=''>
-                <a class="level-item button is-white is-marginless" target="_blank" title="Telegram"
+                <a class="level-item button  is-marginless" target="_blank" title="Telegram"
                    href="https://t.me/${settings.social_telegram}">
                     <i class="fab fa-telegram"></i>
                 </a>
             </#if>
-            <a class="level-item button is-white is-marginless" target="_blank" title="RSS" href="${context!}/atom.xml">
+            <a class="level-item button  is-marginless" target="_blank" title="RSS" href="${context!}/atom.xml">
                 <i class="fas fa-rss"></i>
             </a>
         </div>
diff --git a/photos.ftl b/photos.ftl
index dcd35e6..170bd38 100644
--- a/photos.ftl
+++ b/photos.ftl
@@ -28,6 +28,8 @@
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css">
     <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.4.1/css/all.css">
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">
+    <link rel="stylesheet" href="${static!}/source/css/style.dark.css">
+
 
     <link rel="stylesheet"
           href="//cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">
@@ -86,7 +88,6 @@
     #aniimated-thumbnials a {
         display: block;
         padding: 1rem;
-        background-color: #fff;
         border-radius: 2px;
     }
 
@@ -105,7 +106,6 @@
         border-radius: 2px;
     }
     .photos .container  {
-        background-color: #fff;
         padding: 1rem;
     }
 </style>
diff --git a/search.ftl b/search.ftl
index 336eca3..9466677 100644
--- a/search.ftl
+++ b/search.ftl
@@ -22,7 +22,7 @@
                         <#if r == posts.number+1>
                             <li><a class="pagination-link is-current" href="${context!}/search/page/${posts.number+1}?keyword=${keyword}">${posts.number+1}</a></li>
                         <#else>
-                            <li><a class="pagination-link has-text-black-ter" href="${context!}/search/page/${r}?keyword=${keyword}">${r}</a></li>
+                            <li><a class="pagination-link " href="${context!}/search/page/${r}?keyword=${keyword}">${r}</a></li>
                         </#if>
                     </#list>
                 </ul>
diff --git a/source/css/style.css b/source/css/style.css
index e987ff6..53f4aef 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -4,9 +4,6 @@
 html {
   font-size: 14px;
 }
-body {
-  background-color: #f7f7f7;
-}
 .section {
   padding: 2rem 1.5rem;
 }
@@ -17,6 +14,19 @@ select,
 textarea {
   font-family: "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif;
 }
+.tag:not(body),
+.button,
+.file-cta,
+.file-name,
+.input,
+.pagination-ellipsis,
+.pagination-link,
+.pagination-next,
+.pagination-previous,
+.select select,
+.textarea {
+  border-radius: 2px;
+}
 @media screen and (min-width: 1280px) {
   .is-1-column .container,
   .is-2-column .container {
@@ -106,7 +116,6 @@ img.thumbnail {
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
 }
 .navbar-main .navbar-item {
-  padding: 1.25rem 0.75rem;
   padding-right: 1.5rem;
 }
 .navbar-main .navbar-item.is-active {
@@ -228,6 +237,7 @@ img.thumbnail {
 }
 .article .content a {
   word-wrap: break-word;
+  border-bottom: 0.0625rem dashed #eee;
 }
 .rtl {
   direction: rtl;
@@ -356,9 +366,6 @@ img.thumbnail {
 .has-link-grey {
   color: #7a7a7a !important;
 }
-.has-link-black-ter {
-  color: #242424 !important;
-}
 @media screen and (max-width: 768px) {
   .has-text-centered-mobile {
     text-align: center !important;
@@ -536,3 +543,6 @@ iframe,
 video {
   height: none;
 }
+.post-content a {
+  border-bottom: 0.0625rem dashed #eee;
+}
diff --git a/source/css/style.dark.css b/source/css/style.dark.css
new file mode 100644
index 0000000..f3f3921
--- /dev/null
+++ b/source/css/style.dark.css
@@ -0,0 +1,144 @@
+/* default for no-preference */
+:root {
+    --color: #333;
+    --background: #f7f7f7;
+    --cardbgcolor: #fff;
+    --cardtitlecolor: #333333;
+    --navbarcolor: #333333;
+    --img-default-filter: none;
+    --img-hover-filter: none;
+    --btn-bg-color:#f5f5f5;
+    --btn-color: #333;
+    --btn-hover-color: #eee;
+    --link-color: #333;
+}
+/* Light mode */
+@media (prefers-color-scheme: light) {
+    :root {
+        --color: #333333;
+        --background: #f7f7f7;
+        --cardbgcolor: #fff;
+        --cardcolor: #333;
+        --cardtitlecolor: #333333;
+        --navbarcolor: #333333;
+        --img-default-filter: none;
+        --img-hover-filter: none;
+        --link-color: #333;
+
+    }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color: #bcbcbc;
+        --background: #2c2a2a !important;
+        --cardbgcolor: #454545;
+        --cardcolor: #bcbcbc;
+        --cardtitlecolor: #bcbcbc;
+        --navbarcolor: #bcbcbc;
+        --img-default-filter: grayscale(100%);
+        --img-hover-filter: none;
+        --btn-bg-color:#2c2a2a;
+        --btn-color: #bcbcbc;
+        --btn-hover-color: #333;
+        --link-color: #bcbcbc
+
+
+    }
+}
+
+html {
+    background: var(--background);
+    color: var(--color);
+}
+body > .footer, body > .navbar {
+    background-color: var(--cardbgcolor);
+    color: var(--cardcolor);
+}
+
+.card {
+    background-color: var(--cardbgcolor);
+    color: var(--cardcolor);
+}
+.card .card-image img,
+img.thumbnail {
+    filter: var(--img-default-filter);
+}
+.card .card-image img:hover,
+img.thumbnail:hover{
+    filter: var(--img-hover-filter);
+}
+
+.card .title {
+    color: var(--color) !important;
+}
+.card .content,
+/*.card .title a{*/
+/*    color: var(--cardtitlecolor) !important;*/
+/*}*/
+.pagination .pagination-link:not(.is-current),
+.pagination .pagination-previous,
+.pagination .pagination-next {
+    background-color: var(--cardbgcolor);
+    color: var(--cardcolor);
+}
+
+.navbar-item, .navbar-link {
+    color: var(--navbarcolor);
+
+}
+.has-link-black-ter {
+    color: var(--cardtitlecolor) !important;
+}
+
+
+
+.button {
+    background-color: var(--btn-bg-color) !important;
+    color: var(--btn-color) !important;
+}
+
+.button:hover {
+    background-color: var(--btn-hover-color) !important;
+}
+.level .level-item.button {
+    background-color: var(--cardbgcolor) !important;
+    border-color: var(--cardbgcolor) !important;
+    color: var(--color) !important;
+}
+
+.menu-list .level {
+    color: var(--link-color);
+}
+
+
+
+.menu-list a:hover {
+    background-color: var(--background);
+    opacity: 0.6;
+    color: var(--link-color);
+}
+.tag:not(body) {
+    background-color: var(--background) !important;
+    color: var(--color) !important;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h7,
+strong {
+    color: var(--color) !important;
+}
+
+.is-active a{
+    color: var(--color) !important;
+}
+
+a.navbar-item:hover {
+    background-color: var(--cardbgcolor);
+    color: #3273dc;
+}
diff --git a/source/css/style.styl b/source/css/style.styl
index 2ec1810..af9656e 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -11,15 +11,16 @@ screen-fullhd = 1472px
 html
     font-size: 14px
 
-body
-    background-color: #f7f7f7
+//body
+//    background-color: #f7f7f7
 
 .section
     padding: 2.0rem 1.5rem
 
 body, button, input, select, textarea
     font-family: family-sans
-
+.tag:not(body),.button,.file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea
+    border-radius: 2px
 @media screen and (min-width: screen-widescreen)
     .is-1-column .container
     .is-2-column .container
@@ -108,7 +109,6 @@ img.thumbnail
 .navbar-main
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
     .navbar-item
-        padding: 1.25rem 0.75rem
         padding-right: 1.5rem
         &.is-active
             color: hsl(217, 71%, 53%)
@@ -207,6 +207,7 @@ img.thumbnail
             position: relative
         a
             word-wrap: break-word
+            border-bottom: .0625rem dashed #eee
 
 .rtl
      direction: rtl
@@ -329,8 +330,8 @@ img.thumbnail
 .has-link-grey
     color: hsl(0, 0%, 48%) !important
 
-.has-link-black-ter
-    color: hsl(0, 0%, 14%) !important
+//.has-link-black-ter
+    //color: hsl(0, 0%, 14%) !important
 
 @media screen and (max-width: screen-tablet - 1)
     .has-text-centered-mobile
@@ -496,3 +497,8 @@ figure.highlight
  iframe,
  video
      height: none
+
+.post-content
+    a
+        border-bottom: .0625rem dashed #eee;
+
diff --git a/source/css/widget_pin.css b/source/css/widget_pin.css
index 8f4715b..4244b62 100644
--- a/source/css/widget_pin.css
+++ b/source/css/widget_pin.css
@@ -3,7 +3,6 @@
   position: relative;
   width: 100%;
   margin: auto;
-  background: #fff;
   padding: 25px;
   border-radius: 2px;
   height: 250px;
@@ -167,7 +166,7 @@
   margin-bottom: 10px;
 }
 .blog-slider__text {
-  color: #4e4a67;
+  /*color: #4e4a67;*/
   margin-bottom: 20px;
   line-height: 1.5em;
 }
diff --git a/source/lib/prism/css/prism-line-numbers.css b/source/lib/prism/css/prism-line-numbers.css
index 5faa1ea..028e758 100644
--- a/source/lib/prism/css/prism-line-numbers.css
+++ b/source/lib/prism/css/prism-line-numbers.css
@@ -12,7 +12,7 @@ pre.line-numbers > code {
 .line-numbers .line-numbers-rows {
     position: absolute;
     pointer-events: none;
-    top: -1.8rem;
+    top: -2rem;
     padding-top: 1.6rem;
     font-size: 100%;
     /*background-color: #EBEDED;*/