add dark mode

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>

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>

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!}">

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"

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>

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>

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>

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;
+}

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;
+}

source/css/style.styl

@@ -11,15 +11,16 @@ screen-fullhd = 1472px
 html
     font-size: 14px
 
-body
+//body
-    background-color: #f7f7f7
+//    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
+//.has-link-black-ter
-    color: hsl(0, 0%, 14%) !important
+    //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;
+

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;
 }

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;*/