Dark Mode Support

layouts/_default/terms.html

@@ -16,15 +16,15 @@
 
 		{{ $data := .Data }}
 		<div class="tag-cloud">
+		<ul>
 		{{ range $key, $value := .Data.Terms.ByCount }}
 			{{ $size := (add (mul (div $value.Count $biggest) (sub $max $min)) $min) }}
 			{{ $size := (cond (eq $biggest $smallest) $min $size) }}
-			<a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a>
+			<li><a style="font-size: {{ $size }}rem;" href="{{ $.Site.LanguagePrefix | absURL }}{{ $data.Plural }}/{{ $value.Name | urlize }}/">{{ $value.Name }}</a></li>
 		{{ end }}
+		</ul>
 		</div>
-	
+		{{ partial "footer.html" . }}
-<hr>
-	{{ partial "footer.html" . }}
 	</div>
 </body>
 

layouts/partials/header.html

@@ -28,6 +28,9 @@
 	<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
+	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
+		<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{- end -}}
 	{{- range .Site.Params.customJS }}
 	{{- if or (hasPrefix . "http://") (hasPrefix . "https://") }}
 	<script src="{{ . }}"></script>

static/css/dark.css

@@ -0,0 +1,90 @@
+body {
+	color: white;
+	background-color: #202124;
+}
+
+::-moz-selection {
+	background: blue;
+	color: #fff;
+    text-shadow: none
+}
+
+::selection {
+	background: red;
+	color: #fff;
+    text-shadow: none
+}
+
+hr {
+    border-top: 3px dotted blue;
+}
+code {
+	background-color: lightblue;
+	color:black;
+	text-decoration: bold;
+	padding: .1em .2em;
+  }
+pre {
+	background-color: #272822;
+	line-height: 1.4;
+	overflow-x: auto;
+	padding: 1em;
+  }
+blockquote {
+	border-color: blue;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: #ddd;
+}
+h1::before { color: var(--darkMaincolor); content: '# '; }
+h2::before { color: var(--darkMaincolor); content: '## '; }
+h3::before { color: var(--darkMaincolor); content: '### '; }
+h4::before { color: var(--darkMaincolor); content: '#### '; }
+h5::before { color: var(--darkMaincolor); content: '##### '; }
+h6::before { color: var(--darkMaincolor); content: '###### '; }
+
+a{
+    border-bottom: 3px solid var(--darkMaincolor);
+    color:inherit;
+}
+a:hover {
+	background-color: var(--darkMaincolor);
+	color:black;
+}
+
+.site-description a{
+	color: #ddd;
+}
+.site-description a:hover {
+	color: 	black;
+	
+}
+
+.tags a{
+	border-bottom: 3px solid var(--darkMaincolor); 
+  }
+  .tags a:hover{
+	color: black; 
+  }
+
+.site-title a {
+	color: white;
+	text-decoration: none !important;
+}
+
+.header nav,
+.footer {
+	border-color: #333;
+}
+
+.highlight {
+	background-color: #333;
+}
+.soc:hover{
+	color: black;
+  }
+  .draft-label{ 
+	color:var(--darkMaincolor);
+	background-color: blue;
+  }

static/css/main.css

@@ -6,6 +6,7 @@
 --bordercl:rebeccapurple;
 --callouctcolor:dodgerblue;
 --hovercolor:navy;
+--darkMaincolor: #50fa7b;
 }
 html {
   color: #232333;
@@ -51,7 +52,7 @@ a {
 }
 a:hover {
     background-color: var(--hovercolor);
-  color: #fff;
+    color: #fff;
 }
 
 ul {