Add colors in the config

exampleSite/config.toml

@@ -29,4 +29,17 @@ email = "you@example.com"
 linkedin = "john-example-aa80ue8è"
 twitter = "example"
 social_banner = "img/banner.png"
-posts_navigation = true
+posts_navigation = true
+
+[params.colors]
+identifier = "#527fc1f"
+identifier_dark = "#1a3152"
+trivial = "#6a7a8b"
+foreground = "#181d2a"
+background = "#f9f9f9"
+background_dark = "#282a36"
+code = "#87a5d2"
+type = "#97d28b"
+special = "#ffcb8d"
+value = "#96c2d7"
+statement = "#ff8e91"

layouts/partials/colors.css

@@ -1,61 +1,61 @@
 a {
-    color: #527fc1;
+    color: {{ .Param "colors.identifier" }};
 }
 
 a:hover {
-    color: #1a3152;
+    color: {{ .Param "colors.identifier_dark" }};
 }
 
 section.main .content .markdown, section.header .name, section.header nav ul li:hover {
-    color: #181d2a;
+    color: {{ .Param "colors.foreground" }};
 }
 
 section.header nav ul li {
-    color: #6a7a8b;
+    color: {{ .Param "colors.trivial" }};
 }
 
 section.main .content .markdown code {
-    background-color: #f9f9f9;
-    color: #527fc1;
+    background-color: {{ .Param "colors.background" }};
+    color: {{ .Param "colors.identifier" }};
 }
 
 section.main .content .markdown pre, section.main .content .markdown pre code {
-    background-color: #282a36;
-    color: #87a5d2;
+    background-color: {{ .Param "colors.background_dark" }};
+    color: {{ .Param "colors.code" }};
 }
 
 .hljs, .hljs-subst, .hljs-variable {
-    color: #87a5d2;
+    color: {{ .Param "colors.code" }};
 }
 
 .hljs-type {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }
 
 .hljs-quote {
-    color: #ffcb8d;
+    color: {{ .Param "colors.special" }};
 }
 
 .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-template-tag, .hljs-deletion {
-    color: #96c2d7;
+    color: {{ .Param "colors.value" }};
 }
 
 .hljs-comment {
-    color: #9aacbf;
+    color: {{ .Param "colors.trivial" }};
 }
 
 .hljs-regexp, .hljs-symbol, .hljs-template-variable {
-    color: #ffcb8d;
+    color: {{ .Param "colors.special" }};
 }
 
 .hljs-keyword, .hljs-attribute, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }
 
 .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-title, .hljs-section {
-    color: #ff8e91;
+    color: {{ .Param "colors.statement" }};
 }
 
 .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition {
-    color: #97d28b;
+    color: {{ .Param "colors.type" }};
 }

layouts/partials/head_includes.html

@@ -20,6 +20,12 @@
   </style>
 {{ end }}
 
+{{ if .Site.Params.colors }}
+  <style type="text/css" media="screen">
+    {{ partial "colors.css" . | safeCSS }}
+  </style>
+{{ end }}
+
 {{ range .Site.Params.extracssfiles }}
   <link rel="stylesheet" href="{{ . | absURL }}">
 {{ end }}