diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index c258da7..deb732b 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -8,6 +8,7 @@ pygmentsUseClasses = true
[params]
description = "Your site description"
+ dark = "auto"
copyright = "Copyright © 2020 Your Name"
highlight = true
diff --git a/layouts/partials/css/dark.css b/layouts/partials/css/dark.css
new file mode 100644
index 0000000..5c71e9c
--- /dev/null
+++ b/layouts/partials/css/dark.css
@@ -0,0 +1,39 @@
+{{ if not (eq .Site.Params.dark "on") -}}
+@media (prefers-color-scheme: dark) {
+{{ end -}}
+body {
+ color: #ebebeb;
+ background: #121212;
+}
+
+header#banner a {
+ color: #e0e0e0;
+ text-decoration: none;
+}
+
+header#banner nav ul li a {
+ color: #cccccc;
+}
+
+main#content a {
+ color: #00b1ed;
+}
+
+main#content p {
+ color: #f5f5f5;
+}
+
+main#content ul#posts small {
+ color: #a7a7a7;
+}
+
+main#content ul#posts li a:hover {
+ color: #21c7ff;
+}
+
+main#content header#post-header time {
+ color: #a7a7a7;
+}
+{{- if not (eq .Site.Params.dark "on") -}}
+}
+{{- end -}}
diff --git a/layouts/partials/css/main.css b/layouts/partials/css/main.css
index 1475abe..cb22968 100644
--- a/layouts/partials/css/main.css
+++ b/layouts/partials/css/main.css
@@ -17,13 +17,6 @@ body {
line-height: 1.6;
}
-@media (prefers-color-scheme: dark) {
- body {
- color: #ebebeb;
- background: #121212;
- }
-}
-
header#banner {
margin: 25px 0;
}
@@ -65,28 +58,11 @@ header#banner nav ul li a {
color: #454545;
}
-@media (prefers-color-scheme: dark) {
- header#banner a {
- color: #e0e0e0;
- text-decoration: none;
- }
-
- header#banner nav ul li a {
- color: #cccccc;
- }
-}
-
main#content a {
color: #007dfa;
text-decoration: none;
}
-@media (prefers-color-scheme: dark) {
- main#content a {
- color: #00b1ed;
- }
-}
-
main#content a:hover {
text-decoration: underline;
}
@@ -96,12 +72,6 @@ main#content p {
margin: 16px 0;
}
-@media (prefers-color-scheme: dark) {
- main#content p {
- color: #f5f5f5;
- }
-}
-
main#content h1,
main#content h2,
main#content h3,
@@ -146,12 +116,6 @@ main#content ul#posts small {
margin-left: 10px;
}
-@media (prefers-color-scheme: dark) {
- main#content ul#posts small {
- color: #a7a7a7;
- }
-}
-
main#content ul#posts li a {
text-decoration: none;
}
@@ -164,12 +128,6 @@ main#content ul#posts li a:hover small {
color: inherit;
}
-@media (prefers-color-scheme: dark) {
- main#content ul#posts li a:hover {
- color: #21c7ff;
- }
-}
-
/* single.html styles */
main#content header#post-header h1 {
display: block;
@@ -184,12 +142,6 @@ main#content header#post-header time {
color: #767676;
}
-@media (prefers-color-scheme: dark) {
- main#content header#post-header time {
- color: #a7a7a7;
- }
-}
-
main#content img {
max-width: 100%;
margin: 0 auto;
@@ -208,7 +160,7 @@ main#content code {
main#content pre {
display: block;
overflow-x: auto;
- font-size 14px;
+ font-size: 14px;
font-size: 1.4rem;
white-space: pre;
margin: 20px 0;
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 27d9e0c..fa82f81 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -13,6 +13,13 @@
{{ partial "css/main.css" . | safeCSS }}
+ {{ $dark := .Site.Params.dark | default "auto" -}}
+ {{ if not (eq $dark "off") -}}
+
+ {{ end -}}
+
diff --git a/theme.toml b/theme.toml
index 2dde654..3cc0a0d 100644
--- a/theme.toml
+++ b/theme.toml
@@ -3,7 +3,7 @@ license = "MIT"
licenselink = "https://github.com/LukasJoswiak/etch/blob/master/LICENSE"
description = "Lightweight Hugo theme with a focus on content"
homepage = "https://github.com/LukasJoswiak/etch"
-tags = ["simple", "clean", "fast", "blog", "responsive", "dark mode"]
+tags = ["simple", "minimal", "clean", "fast", "blog", "responsive", "dark mode"]
features = ["fast", "blog", "syntax highlighting", "dark mode"]
min_version = "0.41"