added full dark theme

Author: killshot13

gatsby-ssr.js

@@ -4,17 +4,17 @@
  * See: https://www.gatsbyjs.org/docs/ssr-apis/
  */
 
-const React = require("react");
-const withPrefix = require("./src/utils/withPrefix").default;
+const React = require('react')
+const withPrefix = require('./src/utils/withPrefix').default
 
 exports.onRenderBody = function ({ setHeadComponents, setPostBodyComponents }) {
-  setHeadComponents([]);
+	setHeadComponents([])
 
-  setPostBodyComponents([
-    <React.Fragment>
-      <script src={withPrefix("js/init.js")} />
-      <script src={withPrefix("js/page-load.js")} />
-      <script src={withPrefix("js/page-unload.js")} />
-    </React.Fragment>,
-  ]);
-};
+	setPostBodyComponents([
+		<React.Fragment>
+			<script src={withPrefix('js/init.js')} />
+			<script src={withPrefix('js/page-load.js')} />
+			<script src={withPrefix('js/page-unload.js')} />
+		</React.Fragment>,
+	])
+}

package-lock.json

@@ -30,7 +30,7 @@
     text-transform: uppercase;
 
     .copyright,
-    > a {
+    >a {
       font-size: 11px;
       margin-bottom: 0.5em;
       margin-right: 8px;
@@ -43,7 +43,7 @@
 
   .to-top {
     border: 0;
-    color: _palette(primary);
+    color: _palette(accent);
     display: none;
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;

src/sass/imports/_footer.scss

@@ -8,15 +8,15 @@ html {
 }
 
 body {
-  font-family: _font(text);
-  background: _palette(blue10);
-  color: _palette(text20);
+  font-family: _font(body);
+  background: _palette(primary);
+  color: _palette(txtp20);
   line-height: 1.66667;
 }
 
 a {
-  border-bottom: 2px solid _palette(accent);
-  color: _palette(secondary);
+  border-bottom: 1px solid _palette(acchyp);
+  color: _palette(acchyp);
   text-decoration: none;
   -webkit-transition: border 0.3s ease, color 0.3s ease;
   transition: border 0.3s ease, color 0.3s ease;
@@ -33,12 +33,13 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: _font(primary);
-  color: _palette(text20);
-  font-weight: bold;
+  font-family: _font(head);
+  color: _palette(txth10);
+  font-weight: 500;
   line-height: 1.2;
   margin: 1.66667rem 0 0.83333rem;
   text-rendering: optimizeLegibility;
+  text-transform: uppercase;
 
   &:first-child {
     margin-top: 0;
@@ -91,13 +92,14 @@ ins {
 code,
 pre {
   font-family: _font(monospace);
+  font-weight: normal;
   font-size: 0.88889rem;
 }
 
 pre {
   background-color: _palette(bg);
   border: 1px solid _palette(border);
-  border-radius: 5px;
+  border-radius: 10px;
   color: _palette(secondary);
   margin: 1.66667rem 0;
   overflow: auto;
@@ -133,7 +135,7 @@ blockquote {
 
   small,
   cite {
-    color: _palette(meta);
+    color: _palette(txtmet);
     display: block;
     font-size: 0.52941em;
     font-style: normal;
@@ -187,7 +189,7 @@ table {
 }
 
 caption {
-  color: _palette(meta);
+  color: _palette(txtmet);
   font-size: 0.88889rem;
   font-style: normal;
   margin-bottom: 1em;
@@ -213,7 +215,7 @@ th {
 
 /* Form fields */
 label {
-  color: _palette(secondary);
+  color: _palette(mettxt);
   display: inline-block;
   line-height: 1.5;
   margin-bottom: 0.25em;
@@ -228,10 +230,10 @@ input[type="search"],
 input[type="url"],
 select,
 textarea {
-  font-family: _font(accent);
+  font-family: _font(body);
   background: _palette(bg);
   border: 1px solid _palette(border);
-  border-radius: 5px;
+  border-radius: 10px;
   box-shadow: none;
   box-sizing: border-box;
   color: _palette(primary);
@@ -308,34 +310,34 @@ textarea {
 
 /* Placeholder text */
 ::-webkit-input-placeholder {
-  color: _palette(meta);
+  color: _palette(txtmet);
 }
 
 ::-moz-placeholder {
-  color: _palette(meta);
+  color: _palette(txtmet);
   opacity: 1;
 }
 
 :-ms-input-placeholder {
-  color: _palette(meta);
+  color: _palette(txtmet);
 }
 
 ::-ms-input-placeholder {
-  color: _palette(meta);
+  color: _palette(txtmet);
 }
 
 ::placeholder {
-  color: _palette(meta);
+  color: _palette(txtmet);
 }
 
 button,
 input[type="submit"],
 input[type="button"],
 input[type="reset"],
 .button {
-  background: _palette(blue10);
-  border: 2px solid _palette(accent);
-  border-radius: 30px;
+  background: _palette(secondary);
+  border: 1px solid _palette(accent);
+  border-radius: 15px;
   box-sizing: border-box;
   color: _palette(accent);
   display: inline-block;
@@ -355,7 +357,7 @@ input[type="reset"],
     background: transparent;
     border-color: _palette(accent);
     box-shadow: 0 0 1px 0.5em rgba(_palette(accent), 0.2);
-    color: _palette(secondary);
+    color: _palette(border);
     outline: 0;
   }
 }
@@ -411,7 +413,7 @@ img {
 .post-content,
 .block {
   img {
-    border-radius: 5px;
+    border-radius: 10px;
   }
 }
 

src/sass/imports/_general.scss

@@ -2,9 +2,9 @@
  * Site Header
  */
 .site-header {
-  background: _palette(blue20);
-  border-bottom: 1px solid _palette(border);
-  color: _palette(text20);
+  background: _palette(secondary);
+  border-bottom: 1px solid _palette(meta);
+  color: _palette(txtmet);
 }
 
 .site-header-inside {
@@ -49,18 +49,26 @@
 
   .avatar {
     border: 2px solid _palette(accent);
-    box-shadow: 0 0 1px 7px rgba(_palette(accent), 0.2);
+    box-shadow: 0 0 1px 8px rgba(_palette(accent), 0.2);
     border-radius: 100%;
     display: block;
     -o-object-fit: cover;
     object-fit: cover;
     height: 45px;
     width: 45px;
+
+    &:hover {
+      border: 1px solid _palette(accent);
+      box-shadow: 0 0 1px 6px rgba(_palette(accent), 0.2);
+      -webkit-transition: 0.3s ease;
+      transition: 0.3s ease;
+    }
+
   }
 }
 
 .site-title {
-  color: _palette(secondary);
+  color: _palette(txth10);
   font-size: 1.11111rem;
   font-weight: bold;
   line-height: 1;
@@ -73,6 +81,7 @@
 }
 
 .site-description {
+  color: _palette(txtp20);
   font-size: 12px;
   line-height: 1;
   margin: 0.25em 0 0;
@@ -84,7 +93,7 @@
 }
 
 .site-navigation {
-  background: #fff;
+  background: _palette(secondary);
   bottom: 0;
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
@@ -135,7 +144,7 @@
   &.menu-button {
     padding: 1em 0;
 
-    & + .menu-button {
+    &+.menu-button {
       border-top: 0;
       padding-top: 0;
     }
@@ -144,6 +153,12 @@
   .button {
     padding-bottom: 0.54286em;
     padding-top: 0.54286em;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: _palette(accent);
+    }
   }
 
   a {
@@ -196,45 +211,12 @@
         background: _palette(accent);
         border-color: _palette(accent);
         box-shadow: 0 0 1px 5px rgba(_palette(accent), 0.2);
-        color: #fff;
+        color: _palette(secondary);
       }
     }
   }
 }
 
-.site-header.dark {
-  background: _palette(secondary);
-  border: 0;
-  color: _palette(meta);
-
-  .site-navigation {
-    background: _palette(secondary);
-  }
-
-  .site-title {
-    color: #fff;
-  }
-
-  .menu-item {
-    .button {
-      &:hover,
-      &:focus,
-      &:active {
-        color: _palette(accent);
-      }
-    }
-  }
-
-  .menu-item,
-  .social-links .button-icon {
-    border-color: _palette(primary);
-  }
-
-  .social-links .button-icon:hover {
-    border-color: _palette(accent);
-  }
-}
-
 @media only screen and (min-width: 801px) {
   .site-header {
     border-bottom: 0;
@@ -350,6 +332,7 @@
       width: 100%;
       z-index: 9997;
     }
+
     .site-navigation {
       right: 0;
       -webkit-transition: right 0.3s ease-in-out;

src/sass/imports/_header.scss

@@ -8,7 +8,7 @@
 }
 
 .page-number {
-  color: _palette(meta);
+  color: _palette(accent);
   display: inline-block;
   font-size: 14px;
   letter-spacing: 1px;