From 0f7465677cd10d2571926f2798ad06e1bc6fd000 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Fri, 7 Feb 2020 12:57:54 +0900 Subject: [PATCH] feat: dark mode --- _layouts/post.html | 8 ++++---- _sass/post.scss | 24 ++++++++++++------------ css/index.scss | 30 +++++++++++++++++++++++++++--- 3 files changed, 43 insertions(+), 19 deletions(-) diff --git a/_layouts/post.html b/_layouts/post.html index a5c04ab..3be7615 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -52,10 +52,10 @@ layout: default rel="stylesheet" href="https://unpkg.com/highlight.js@9.18.1/styles/night-owl.css" /> - - - - + + + + \ No newline at end of file diff --git a/_sass/post.scss b/_sass/post.scss index 561e29c..33e5e99 100644 --- a/_sass/post.scss +++ b/_sass/post.scss @@ -14,15 +14,15 @@ .article-list__item__excerpt { margin-top: 5px; font-size: 20px; - color: #989898; + color: var(--tone); line-height: 1.6em; word-break: break-all; } a.article-list__item__button { - border: 1px solid #989898; + border: 1px solid var(--tone); border-radius: 3px; - color: #989898; + color: var(--tone); font-family: "Open Sans", sans-serif; font-size: 14px; display: inline-block; @@ -31,8 +31,8 @@ a.article-list__item__button { text-transform: uppercase; &:hover { - background-color: #989898; - color: #fff; + background-color: var(--tone); + color: var(--background); } @media screen and (max-width: $break-small) { @@ -42,8 +42,8 @@ a.article-list__item__button { padding: 15px; &:hover { - background-color: #fff; - color: #989898; + background-color: var(--background); + color: var(--tone); } } } @@ -83,12 +83,12 @@ a.article-list__item__button { } .article__pubdate { - color: #989898; + color: var(--tone); font-size: 14px; font-weight: normal; font-family: sans-serif; margin-bottom: 10px; - border: 1px solid #989898; + border: 1px solid var(--tone); display: inline-block; padding: 5px 20px; @@ -179,7 +179,7 @@ a.article-list__item__button { } blockquote { - border-left: 5px solid red; + border-left: 5px solid var(--accent); padding-left: 20px; margin: 0; } @@ -207,8 +207,8 @@ a.article-list__item__button { margin: 10px 0; padding: 20px; display: block; - background: black; - color: white; + background: var(--text); + color: var(--background); text-align: center; border-radius: 2px; } diff --git a/css/index.scss b/css/index.scss index 03b5d4c..1894698 100644 --- a/css/index.scss +++ b/css/index.scss @@ -6,6 +6,24 @@ $break-small: 500px; $break-large: 840px; +:root { + --background: #fff; + --text: #000; + --accent: #4f33e8; + --highlight: #f6f6f6; + --tone: #989898; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #261e3a; + --text: #e2dfea; + --accent: #7033e8; + --highlight: #140d25; + --tone: #989898; + } +} + body { width: 900px; margin: 0 auto; @@ -17,6 +35,8 @@ body { -webkit-font-feature-settings: "kern", "palt", "pwid"; -moz-font-feature-settings: "kern", "palt", "pwid"; -moz-font-feature-settings: "kern=1", "palt", "pwid"; + background: var(--background); + color: var(--text); @media screen and (max-width: $break-large) { width: auto; @@ -34,6 +54,7 @@ body { border-radius: 3px; // font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; // font-size: 14px; + background: #0e0127 !important; padding: 12px 18px !important; line-height: 1.6em !important; } @@ -42,7 +63,7 @@ code { } p code { padding: 3px 10px; - background: #f6f6f6; + background: var(--highlight); border-radius: 3px; font-size: 16px; } @@ -50,7 +71,7 @@ a:hover, a:active, a:link, a:visited { - color: black; + color: var(--text); text-decoration: none; } h1, @@ -66,7 +87,7 @@ hr { display: block; width: 100%; height: 1px; - background-color: #dbdbdb; + background-color: var(--highlight); border: 0; margin: 40px 0; } @@ -86,6 +107,9 @@ hr { .logo { margin: 10px 0 10px; + @media (prefers-color-scheme: dark) { + filter: invert(1); + } } .menu {