Add inverted variables option (#110)

* add inverted variables option

* create inverted styles

* add missed styles

* add myself as contributor

CONTRIBUTORS.md

@@ -22,3 +22,4 @@
 - [Vinícius dos Santos Oliveira](https://github.com/vinipsmaker)
 - [Vlad Ionescu](https://github.com/Vlaaaaaaad)
 - [Joseph Ting](https://github.com/josephting)
+- [Abner Campanha](https://github.com/abnerpc)

assets/scss/_base_inverted.scss

@@ -0,0 +1,39 @@
+body.inverted {
+
+  color: $fg-color-inverted;
+  background-color: $bg-color-inverted;
+  
+  a {
+    color: $link-color-inverted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $alt-fg-color-inverted;
+  }
+
+  code {
+    background-color: $alt-bg-color-inverted;
+    color: $fg-color-inverted;
+  }
+
+  pre {
+    code {
+      background-color: inherit;
+      color: inherit;
+    }
+  }
+
+  blockquote {
+    border-left: 2px solid $alt-bg-color-inverted;
+  }
+
+  table td, table th {
+    border: 2px solid $alt-fg-color-inverted;
+  }
+
+}

assets/scss/_content_inverted.scss

@@ -0,0 +1,36 @@
+body.inverted {
+
+  .content {
+  
+    .list {
+      ul {
+        li {
+          a {
+            color: $fg-color-inverted;
+            &:hover,
+            &:focus {
+              color: $link-color-inverted
+            }
+          }
+        }
+      }
+    }
+
+    .centered {
+      .about {
+        ul {
+          li {
+            a {
+              color: $fg-color-inverted;
+              &:hover,
+              &:focus {
+                color: $link-color-inverted;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}

assets/scss/_footer_inverted.scss

@@ -0,0 +1,7 @@
+body.inverted {
+  .footer {
+    a {
+      color: $link-color-inverted;
+    }
+  }
+}

assets/scss/_navigation_inverted.scss

@@ -0,0 +1,45 @@
+body.inverted {
+
+
+  .navigation {
+    a, span {
+      color: $fg-color-inverted;
+    }
+    a {
+      &:hover,
+      &:focus {
+        color: $link-color-inverted;
+      }
+    }
+    .navigation-list {
+      @media only screen and (max-device-width : 768px) {
+        background-color: $bg-color-inverted;
+        border-top: solid 2px $alt-bg-color-inverted;
+        border-bottom: solid 2px $alt-bg-color-inverted;
+      }
+      .menu-separator {
+        @media only screen and (max-device-width : 768px) {
+          border-top: 2px solid $fg-color-inverted;
+        }
+      }
+    }
+    #menu-toggle {
+      @media only screen and (max-device-width : 768px) {
+        &:checked + label {
+          color: $alt-bg-color-inverted;
+        }
+      }
+    }
+    .menu-button {
+      display: none;
+      @media only screen and (max-device-width : 768px) {
+        color: $fg-color-inverted;
+        &:hover,
+        &:focus {
+          color: $link-color-inverted;
+        }
+      }
+    }
+  }
+
+}

assets/scss/_variables.scss

@@ -9,3 +9,10 @@ $fg-color: #212121 !default;
 $alt-bg-color: #E0E0E0 !default;
 $alt-fg-color: #000 !default;
 $link-color: #1565c0 !default;
+
+// Colors inverted
+$bg-color-inverted: #212121 !default;
+$fg-color-inverted: #fafafa !default;
+$alt-bg-color-inverted: #424242 !default;
+$alt-fg-color-inverted: #fafafa !default;
+$link-color-inverted: #f44336 !default;

assets/scss/coder-inverted.scss

@@ -0,0 +1,5 @@
+@import "variables";
+@import "base_inverted";
+@import "content_inverted";
+@import "navigation_inverted";
+@import "footer_inverted";

exampleSite/config.toml

@@ -32,6 +32,9 @@ disqusShortname = "yourdiscussshortname"
 
     rtl = false
 
+    # Use inverted colors
+    inverted = false
+
     # Custom CSS
     custom_css = []
 

layouts/_default/baseof.html

@@ -40,6 +40,18 @@
       {{ end }}
     {{ end }}
 
+    {{ if .Site.Params.inverted }}
+      {{ if .Site.IsServer }}
+        {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" "enableSourceMap" true ) }}
+        {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts }}
+        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+      {{ else }}
+        {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" ) }}
+        {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts | minify | fingerprint }}
+        <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+      {{ end }}
+    {{ end }}
+
     {{ range .Site.Params.custom_css }}
       <link rel="stylesheet" href="{{ . | absURL }}">
     {{ end }}
@@ -55,7 +67,7 @@
     {{ .Hugo.Generator }}
   </head>
 
-  <body class="{{ if .Site.Params.rtl }}rtl{{ end }}">
+  <body class="{{ if .Site.Params.rtl }}rtl{{ end }} {{ if .Site.Params.inverted }}inverted{{ end }}">
     <main class="wrapper">
       {{ partial "header.html" . }}