Merge pull request #76 from huyb1991/feature/implement-darkmodedevelop

Feature / Implement Dark Mode

4 files changed, 29 insertions, 6 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index dee2d8a..8b2e762 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -23,11 +23,9 @@
     </ul>
   </nav>
 
-  <button
-    [text]="darkMode ? 'Light Mode' : 'Dark Mode'"
-    on="tap:AMP.setState({darkMode: !darkMode})"
-  >
-    Dark Mode
+  <button on="tap:AMP.setState({darkMode: !darkMode})">
+    <svg class="icon moon" fill="currentColor"><use xlink:href="#icon-moon" /></svg>
+    <svg class="icon sunny" fill="currentColor"><use xlink:href="#icon-sunny" /></svg>
   </button>
 
   {{ partial "social.html" . }}
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
index c281c18..a16bce2 100644
--- a/layouts/partials/stylesheet.html
+++ b/layouts/partials/stylesheet.html
@@ -1 +1 @@
-:root{--main-bg-color:$main-background}.dark-mode:root{--main-bg-color:#000}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}body{font-size:18px;font-weight:300;line-height:1.618;font-family:Roboto,sans-serif;color:#777;background-color:var(--main-bg-color);text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch}a{color:#3f9adc;text-decoration:none;font-weight:600}a:focus,a:hover{opacity:.7;outline:none}amp-img{margin:0 auto;box-shadow:2px 20px 40px 10px rgba(0,0,0,.15)}button:hover{cursor:pointer}.main{padding:1rem 2rem;box-sizing:border-box}@media screen and (max-width:800px){.main{margin-left:0;padding:0 1rem 1rem;border:1px solid #ddd;border-right:none;border-left:none}}.footer{display:block;padding:1rem;font-size:.8rem;text-align:center;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.wrapper{display:grid;grid-gap:20px;min-height:100vh}@media screen and (max-width:640px){.wrapper{grid-template-rows:100px 1fr 90px;grid-template-areas:"header" "main" "footer"}}@media screen and (min-width:640px){.wrapper{grid-template-columns:320px 1fr;grid-template-rows:1fr 90px;grid-template-areas:"header main" "header footer"}}.header{grid-area:header}.main{grid-area:main}.footer{grid-area:footer}.icon{font-style:normal;text-decoration:inherit;width:1em;height:1em;font-variant:normal;text-transform:none;line-height:1em}.icon,.share{display:inline-block;text-align:center}.share{font-weight:400;margin-left:.2rem;border:none;outline:none;color:#fff;width:30px;height:30px;border-radius:50%}.share-twitter{background-color:#55acee}.share-twitter-icon{margin:5px 0 0 1px}.share-facebook{background-color:#3b5998}.header{padding:1rem;box-sizing:border-box;text-align:center;background-color:rgba(106,172,14,.9)}.logo{margin-top:3rem;border-radius:20%;border:4px solid #fff;transition:all .5s ease-out}.logo:hover{border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3)}@media screen and (max-width:800px){.logo{position:absolute;top:1rem;left:1rem;width:2rem;height:2rem;margin-top:0;border:2px solid #fff}}.title{font-size:1.5rem;font-family:Roboto,sans-serif;font-weight:600;margin:1rem auto}@media screen and (max-width:800px){.title{margin:0 auto}}.subtitle,.title a{color:#fff}.subtitle{margin-bottom:1rem;opacity:.8}.menu{display:none}@media screen and (min-width:800px){.menu{display:block}}.menu-list{list-style:none;padding:0}.menu-item{padding:1rem 0}.menu-item a{font-weight:100;opacity:.8;color:#fff}.menu-item a:focus,.menu-item a:hover{opacity:1}.menu-item.is-active a{color:#444;opacity:1;font-weight:700}.menu-toggle{border:none;outline:none;font-size:2rem;background-color:transparent;color:#fff;position:absolute;top:1rem;right:1rem}@media screen and (min-width:800px){.menu-toggle{display:none}}.sidebar{background-color:#fff;width:100vw}@media screen and (min-width:640px){.sidebar{width:50vw}}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-menu{text-align:right;padding:16px}.sidebar-item{font-size:2rem;padding:30px 35px 30px 25px;border-top:1px solid #ddd}.sidebar-item:hover{background-color:#f2f2f2}.sidebar-icon{border:none;outline:none;background-color:transparent;font-family:Roboto,sans-serif;font-weight:100;font-size:2rem}.sidebar-link{color:#000;font-weight:100}.social-list{margin:0;padding:0;list-style:none}.social-item{display:inline-block;margin:0 .2rem}.social-item a{color:#fff;font-weight:400}@media screen and (max-width:800px){.entry-list{padding-top:30px}}.entry-single{line-height:1.8;margin-bottom:22px;background-color:#fff;box-shadow:0 0 2px 0 rgba(137,146,177,.15),0 3px 10px 0 rgba(137,146,177,.1);border-radius:5px}.entry-single:hover{box-shadow:0 1px 15px 0 rgba(137,146,177,.15),0 10px 20px 0 rgba(137,146,177,.15)}.entry-cover{max-width:100%;border-radius:5px 5px 0 0;-o-object-fit:cover;object-fit:cover;box-shadow:none}.entry-title{margin:0;padding:20px 30px 0}.entry-link{font-size:1.5rem;font-weight:600;color:#262626}.entry-summary{padding:0 30px;text-align:justify;max-height:4rem;overflow:hidden}.entry-footer{margin:0 30px;padding:10px 0;border-top:1px solid #ddd;display:flex;justify-content:space-between}.entry-meta{margin:0;font-size:.8rem;letter-spacing:1px;text-transform:uppercase}.entry-time{color:#444}.entry-time:after{content:"";border-right:1px solid #ddd;margin:0 8px 0 10px}.pagination{display:flex;justify-content:flex-start}.pagination-btn{color:#777;padding:.8rem;background-color:#fff;border:1px solid #ddd;font-size:.8rem;text-transform:uppercase;border-radius:5px}.pagination-btn:focus,.pagination-btn:hover{color:#fff;background-color:#6aac0e;border-color:#6aac0e}.pagination-next{margin-left:auto}.post-header:after{display:block;content:"";width:60px;padding-top:10px;border-bottom:3px solid #6aac0e}.post-title{font-size:2rem;color:#262626;line-height:1.5;margin-top:1.5rem;margin-bottom:.5rem}.post-footer{margin:1rem 0;line-height:1.8}.post-tags{margin-top:0;margin-bottom:1rem;padding-left:0}.post-tag{display:inline-block;margin:0 .5rem 0 0;border-radius:3px;padding:5px 10px;background:#f2f2f2;font-size:.8rem}.post-tag:hover{background:#ddd;box-shadow:0 1px 15px 0 rgba(137,146,177,.15),0 10px 20px 0 rgba(137,146,177,.15)}.post-content{line-height:1.8}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{color:#6cb505;font-weight:700;line-height:1.125}.post-content h1{margin-top:2rem;margin-bottom:1rem;font-size:2rem}.post-content h2{margin-top:1.75rem;margin-bottom:.75rem;font-size:1.5rem}.post-content h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.25rem}.post-content h4{margin-top:1.25rem;margin-bottom:.25rem;font-size:1rem}.post-content h5,.post-content h6{margin-top:1rem;margin-bottom:0;font-size:.8rem}.post-content li+li{margin-top:.5rem}.post-content em{color:#777;font-style:italic}.post-content strong{color:#444}.post-content del{color:#777;text-decoration:line-through}.post-content ins{color:#444;text-decoration:underline}.post-content hr{position:relative;margin:2rem auto;border-top:1px dashed #ddd;border-bottom:none}.post-content hr:before{content:"sep line";position:absolute;top:-12px;left:calc(50% - 40px);padding:0 .5rem;background-color:#fff;color:#ddd;font-size:.8rem;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.post-content p{margin-top:1.5rem;margin-bottom:1.5rem;text-align:justify}.post-content blockquote{background-color:#f2f2f2;border-left:5px solid #ddd;padding:.5rem 1rem;margin:2rem 0}.post-content blockquote p{margin-top:.5rem;margin-bottom:.5rem}.post-content blockquote cite{margin-top:1.5rem;color:#777;font-size:.9rem}.post-content code,.post-content tt{padding:.2em 0;margin:0;font-size:.9em;background-color:#ddd;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.post-content code:after,.post-content code:before,.post-content tt:after,.post-content tt:before{letter-spacing:-.2em;content:"\00a0"}.post-content kbd{display:inline-block;padding:.25em;background-color:#f2f2f2;border:1px solid #ddd;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);font-size:.8em;line-height:1.25;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace;color:#777}.post-content pre{margin:2rem auto;padding:1rem;overflow-x:auto;border-radius:3px;font-size:.9rem;line-height:1.618;white-space:pre;word-wrap:normal;word-break:normal;background:#ddd;color:#777}.post-content pre code{font-size:.9rem;background-color:transparent}.post-content pre code:after,.post-content pre code:before{content:none}.post-content sub,.post-content sup{font-size:.8rem}.post-content sub a,.post-content sub a:focus,.post-content sub a:hover,.post-content sup a,.post-content sup a:focus,.post-content sup a:hover{border-bottom:none}.post-content ol{margin-left:0;margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;list-style:decimal outside}.post-content ol ol{margin-top:.5rem;margin-bottom:.5rem;list-style:lower-roman outside}.post-content ol ul{margin-top:.5rem;margin-bottom:.5rem;list-style:disc outside}.post-content ul{margin-left:0;margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;list-style:disc outside}.post-content ul ul{margin-top:.5rem;margin-bottom:.5rem;list-style:circle outside}.post-content ul ol{margin-top:.5rem;margin-bottom:.5rem;list-style:decimal outside}.post-content dl{margin-top:2rem;margin-bottom:2rem}.post-content dl dt{color:#6aac0e;margin-top:1rem}.post-content dl dt:after{content:":"}.post-content dl dd{text-indent:2rem;margin-left:0;margin-top:.25rem}.post-content figure{display:block;margin:2rem auto}.post-content figure img{max-width:100%;box-shadow:2px 20px 40px 10px rgba(0,0,0,.15)}@media screen and (max-width:800px){.post-content figure img{box-shadow:none}}.post-content figure figcaption h4{color:#ddd;font-size:.9rem;text-align:center}table{background-color:#f2f2f2;color:#444;margin:2rem auto;width:100%;border-collapse:collapse;border-radius:5px}table td,table th{border:solid #ddd;border-width:0 0 1px;padding:.5em .75em;vertical-align:center}table th{color:#444}table tr:hover{background-color:#ddd}table thead td,table thead th{border-width:0 0 2px;color:#777}table tfoot td,table tfoot th{border-width:2px 0 0;color:#777}table tbody tr:last-child td,table tbody tr:last-child th{border-bottom-width:0}table tr:first-child th:first-child{border-top-left-radius:5px}table tr:first-child th:last-child{border-top-right-radius:5px}table tr:last-child td:first-child{border-bottom-left-radius:5px}table tr:last-child td:last-child{border-bottom-right-radius:5px}.not-found{margin:5rem auto 0;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace;text-align:center}.error-emoji{color:#444;font-size:3rem}.error-text{font-size:1.25rem}.error-link{margin-top:2rem;font-size:1rem;color:#6aac0e}
\ No newline at end of file
+:root{--main-bg-color:$main-background}:root .sunny{display:none}:root .moon{display:block}.dark-mode:root{--main-bg-color:#000}.dark-mode:root .sunny{display:block}.dark-mode:root .moon{display:none}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}body{font-size:18px;font-weight:300;line-height:1.618;font-family:Roboto,sans-serif;color:#777;background-color:var(--main-bg-color);text-rendering:optimizeLegibility;-webkit-overflow-scrolling:touch}a{color:#3f9adc;text-decoration:none;font-weight:600}a:focus,a:hover{opacity:.7;outline:none}amp-img{margin:0 auto;box-shadow:2px 20px 40px 10px rgba(0,0,0,.15)}button:hover{cursor:pointer}.main{padding:1rem 2rem;box-sizing:border-box}@media screen and (max-width:800px){.main{margin-left:0;padding:0 1rem 1rem;border:1px solid #ddd;border-right:none;border-left:none}}.footer{display:block;padding:1rem;font-size:.8rem;text-align:center;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.wrapper{display:grid;grid-gap:20px;min-height:100vh}@media screen and (max-width:640px){.wrapper{grid-template-rows:100px 1fr 90px;grid-template-areas:"header" "main" "footer"}}@media screen and (min-width:640px){.wrapper{grid-template-columns:320px 1fr;grid-template-rows:1fr 90px;grid-template-areas:"header main" "header footer"}}.header{grid-area:header}.main{grid-area:main}.footer{grid-area:footer}.icon{font-style:normal;text-decoration:inherit;width:1em;height:1em;font-variant:normal;text-transform:none;line-height:1em}.icon,.share{display:inline-block;text-align:center}.share{font-weight:400;margin-left:.2rem;border:none;outline:none;color:#fff;width:30px;height:30px;border-radius:50%}.share-twitter{background-color:#55acee}.share-twitter-icon{margin:5px 0 0 1px}.share-facebook{background-color:#3b5998}.header{padding:1rem;box-sizing:border-box;text-align:center;background-color:rgba(106,172,14,.9)}.logo{margin-top:3rem;border-radius:20%;border:4px solid #fff;transition:all .5s ease-out}.logo:hover{border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3)}@media screen and (max-width:800px){.logo{position:absolute;top:1rem;left:1rem;width:2rem;height:2rem;margin-top:0;border:2px solid #fff}}.title{font-size:1.5rem;font-family:Roboto,sans-serif;font-weight:600;margin:1rem auto}@media screen and (max-width:800px){.title{margin:0 auto}}.subtitle,.title a{color:#fff}.subtitle{margin-bottom:1rem;opacity:.8}.menu{display:none}@media screen and (min-width:800px){.menu{display:block}}.menu-list{list-style:none;padding:0}.menu-item{padding:1rem 0}.menu-item a{font-weight:100;opacity:.8;color:#fff}.menu-item a:focus,.menu-item a:hover{opacity:1}.menu-item.is-active a{color:#444;opacity:1;font-weight:700}.menu-toggle{border:none;outline:none;font-size:2rem;background-color:transparent;color:#fff;position:absolute;top:1rem;right:1rem}@media screen and (min-width:800px){.menu-toggle{display:none}}.sidebar{background-color:#fff;width:100vw}@media screen and (min-width:640px){.sidebar{width:50vw}}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-menu{text-align:right;padding:16px}.sidebar-item{font-size:2rem;padding:30px 35px 30px 25px;border-top:1px solid #ddd}.sidebar-item:hover{background-color:#f2f2f2}.sidebar-icon{border:none;outline:none;background-color:transparent;font-family:Roboto,sans-serif;font-weight:100;font-size:2rem}.sidebar-link{color:#000;font-weight:100}.social-list{margin:0;padding:0;list-style:none}.social-item{display:inline-block;margin:0 .2rem}.social-item a{color:#fff;font-weight:400}@media screen and (max-width:800px){.entry-list{padding-top:30px}}.entry-single{line-height:1.8;margin-bottom:22px;background-color:#fff;box-shadow:0 0 2px 0 rgba(137,146,177,.15),0 3px 10px 0 rgba(137,146,177,.1);border-radius:5px}.entry-single:hover{box-shadow:0 1px 15px 0 rgba(137,146,177,.15),0 10px 20px 0 rgba(137,146,177,.15)}.entry-cover{max-width:100%;border-radius:5px 5px 0 0;-o-object-fit:cover;object-fit:cover;box-shadow:none}.entry-title{margin:0;padding:20px 30px 0}.entry-link{font-size:1.5rem;font-weight:600;color:#262626}.entry-summary{padding:0 30px;text-align:justify;max-height:4rem;overflow:hidden}.entry-footer{margin:0 30px;padding:10px 0;border-top:1px solid #ddd;display:flex;justify-content:space-between}.entry-meta{margin:0;font-size:.8rem;letter-spacing:1px;text-transform:uppercase}.entry-time{color:#444}.entry-time:after{content:"";border-right:1px solid #ddd;margin:0 8px 0 10px}.pagination{display:flex;justify-content:flex-start}.pagination-btn{color:#777;padding:.8rem;background-color:#fff;border:1px solid #ddd;font-size:.8rem;text-transform:uppercase;border-radius:5px}.pagination-btn:focus,.pagination-btn:hover{color:#fff;background-color:#6aac0e;border-color:#6aac0e}.pagination-next{margin-left:auto}.post-header:after{display:block;content:"";width:60px;padding-top:10px;border-bottom:3px solid #6aac0e}.post-title{font-size:2rem;color:#262626;line-height:1.5;margin-top:1.5rem;margin-bottom:.5rem}.post-footer{margin:1rem 0;line-height:1.8}.post-tags{margin-top:0;margin-bottom:1rem;padding-left:0}.post-tag{display:inline-block;margin:0 .5rem 0 0;border-radius:3px;padding:5px 10px;background:#f2f2f2;font-size:.8rem}.post-tag:hover{background:#ddd;box-shadow:0 1px 15px 0 rgba(137,146,177,.15),0 10px 20px 0 rgba(137,146,177,.15)}.post-content{line-height:1.8}.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{color:#6cb505;font-weight:700;line-height:1.125}.post-content h1{margin-top:2rem;margin-bottom:1rem;font-size:2rem}.post-content h2{margin-top:1.75rem;margin-bottom:.75rem;font-size:1.5rem}.post-content h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.25rem}.post-content h4{margin-top:1.25rem;margin-bottom:.25rem;font-size:1rem}.post-content h5,.post-content h6{margin-top:1rem;margin-bottom:0;font-size:.8rem}.post-content li+li{margin-top:.5rem}.post-content em{color:#777;font-style:italic}.post-content strong{color:#444}.post-content del{color:#777;text-decoration:line-through}.post-content ins{color:#444;text-decoration:underline}.post-content hr{position:relative;margin:2rem auto;border-top:1px dashed #ddd;border-bottom:none}.post-content hr:before{content:"sep line";position:absolute;top:-12px;left:calc(50% - 40px);padding:0 .5rem;background-color:#fff;color:#ddd;font-size:.8rem;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.post-content p{margin-top:1.5rem;margin-bottom:1.5rem;text-align:justify}.post-content blockquote{background-color:#f2f2f2;border-left:5px solid #ddd;padding:.5rem 1rem;margin:2rem 0}.post-content blockquote p{margin-top:.5rem;margin-bottom:.5rem}.post-content blockquote cite{margin-top:1.5rem;color:#777;font-size:.9rem}.post-content code,.post-content tt{padding:.2em 0;margin:0;font-size:.9em;background-color:#ddd;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace}.post-content code:after,.post-content code:before,.post-content tt:after,.post-content tt:before{letter-spacing:-.2em;content:"\00a0"}.post-content kbd{display:inline-block;padding:.25em;background-color:#f2f2f2;border:1px solid #ddd;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);font-size:.8em;line-height:1.25;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace;color:#777}.post-content pre{margin:2rem auto;padding:1rem;overflow-x:auto;border-radius:3px;font-size:.9rem;line-height:1.618;white-space:pre;word-wrap:normal;word-break:normal;background:#ddd;color:#777}.post-content pre code{font-size:.9rem;background-color:transparent}.post-content pre code:after,.post-content pre code:before{content:none}.post-content sub,.post-content sup{font-size:.8rem}.post-content sub a,.post-content sub a:focus,.post-content sub a:hover,.post-content sup a,.post-content sup a:focus,.post-content sup a:hover{border-bottom:none}.post-content ol{margin-left:0;margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;list-style:decimal outside}.post-content ol ol{margin-top:.5rem;margin-bottom:.5rem;list-style:lower-roman outside}.post-content ol ul{margin-top:.5rem;margin-bottom:.5rem;list-style:disc outside}.post-content ul{margin-left:0;margin-top:2rem;margin-bottom:2rem;padding-left:1.5rem;list-style:disc outside}.post-content ul ul{margin-top:.5rem;margin-bottom:.5rem;list-style:circle outside}.post-content ul ol{margin-top:.5rem;margin-bottom:.5rem;list-style:decimal outside}.post-content dl{margin-top:2rem;margin-bottom:2rem}.post-content dl dt{color:#6aac0e;margin-top:1rem}.post-content dl dt:after{content:":"}.post-content dl dd{text-indent:2rem;margin-left:0;margin-top:.25rem}.post-content figure{display:block;margin:2rem auto}.post-content figure img{max-width:100%;box-shadow:2px 20px 40px 10px rgba(0,0,0,.15)}@media screen and (max-width:800px){.post-content figure img{box-shadow:none}}.post-content figure figcaption h4{color:#ddd;font-size:.9rem;text-align:center}table{background-color:#f2f2f2;color:#444;margin:2rem auto;width:100%;border-collapse:collapse;border-radius:5px}table td,table th{border:solid #ddd;border-width:0 0 1px;padding:.5em .75em;vertical-align:center}table th{color:#444}table tr:hover{background-color:#ddd}table thead td,table thead th{border-width:0 0 2px;color:#777}table tfoot td,table tfoot th{border-width:2px 0 0;color:#777}table tbody tr:last-child td,table tbody tr:last-child th{border-bottom-width:0}table tr:first-child th:first-child{border-top-left-radius:5px}table tr:first-child th:last-child{border-top-right-radius:5px}table tr:last-child td:first-child{border-bottom-left-radius:5px}table tr:last-child td:last-child{border-bottom-right-radius:5px}.not-found{margin:5rem auto 0;font-family:Roboto Mono,Menlo,Monaco,Consolas,Courier New,monospace;text-align:center}.error-emoji{color:#444;font-size:3rem}.error-text{font-size:1.25rem}.error-link{margin-top:2rem;font-size:1rem;color:#6aac0e}
\ No newline at end of file
diff --git a/layouts/partials/svg-icons.html b/layouts/partials/svg-icons.html
index 0f69d5c..d5c5a8d 100644
--- a/layouts/partials/svg-icons.html
+++ b/layouts/partials/svg-icons.html
@@ -7,6 +7,17 @@
     <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z" />
   </symbol>
 
+  <symbol id="icon-sunny" viewBox="0 0 64 64">
+    <path fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M32 2v16m0 28v16m30-30H46m-28 0H2m8.8-21.2l11.3 11.3m19.8 19.8l11.3 11.3m0-42.4L41.9 22.1M22.1 41.9L10.8 53.2" stroke-linejoin="round" stroke-linecap="round" />
+    <circle cx="32" cy="32" r="14" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+  </symbol>
+
+  <symbol id="icon-moon" viewBox="0 0 64 64">
+    <path d="M35 2a25 25 0 0 1-22 36.8 24.9 24.9 0 0 1-10.6-2.3A30 30 0 1 0 35 2z"
+    fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="round"
+    stroke-linecap="round" />
+  </symbol>
+
   <symbol id="icon-email" viewBox="0 0 24 24">
     <path d="M24 4.5v15c0 .85-.65 1.5-1.5 1.5H21V7.387l-9 6.463-9-6.463V21H1.5C.649 21 0 20.35 0 19.5v-15c0-.425.162-.8.431-1.068C.7 3.16 1.076 3 1.5 3H2l10 7.25L22 3h.5c.425 0 .8.162 1.069.432.27.268.431.643.431 1.068z" />
   </symbol>
diff --git a/styles/base/_css_variables.scss b/styles/base/_css_variables.scss
index 3efbe20..b98f099 100644
--- a/styles/base/_css_variables.scss
+++ b/styles/base/_css_variables.scss
@@ -1,7 +1,21 @@
 :root {
   --main-bg-color: $main-background;
+
+  .sunny {
+    display: none;
+  }
+  .moon {
+    display: block;
+  }
 }
 
 .dark-mode:root {
   --main-bg-color: black;
+
+  .sunny {
+    display: block;
+  }
+  .moon {
+    display: none;
+  }
 }