add dark mode

v1.2.0
quinn 2019-10-11 23:43:31 +08:00
parent f072e716c5
commit 92c5e9f093
13 changed files with 191 additions and 31 deletions

View File

@ -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>

BIN
layout/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -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>

View File

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

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

144
source/css/style.dark.css Normal file
View File

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

View File

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

View File

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

View File

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