diff --git a/README.md b/README.md
index 06864cac..3f092ffd 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,10 @@ Academic is available in different color themes and font themes.
| --- | --- |
|  |  |
+| `dark` |
+| --- |
+|  |
+
## Getting Started
1. [Install Hugo](https://georgecushen.com/create-your-website-with-hugo/#installing-hugo) and create a new website by typing the following commands in your *Terminal* or *Command Prompt* app:
diff --git a/data/themes/dark.toml b/data/themes/dark.toml
new file mode 100644
index 00000000..953d9adb
--- /dev/null
+++ b/data/themes/dark.toml
@@ -0,0 +1,20 @@
+# Theme metadata
+name = "Dark"
+
+# Is theme light or dark?
+light = false
+
+# Primary
+primary = "hsl(339, 90%, 68%)"
+primary_light = "hsl(339, 90%, 78%)"
+primary_dark = "hsl(339, 90%, 58%)"
+
+# Menu
+menu_primary = "rgb(20, 22, 34)"
+menu_text = "rgba(255,255,255,0.6)"
+menu_text_active = "rgba(255,255,255,1)"
+menu_title = "#fff"
+
+# Home sections
+home_section_odd = "hsla(231, 15%, 18%, 1)"
+home_section_even = "hsla(231, 15%, 17%, 1)"
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 35742421..ad8f2798 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -31,7 +31,7 @@ defaultContentLanguageInSubdir = false
[params]
# Color theme.
- # Choose from `default`, `ocean`, `forest`, or `coffee`.
+ # Choose from `default`, `ocean`, `forest`, `coffee`, or `dark`.
color_theme = "default"
# Font style.
diff --git a/exampleSite/content/post/getting-started.md b/exampleSite/content/post/getting-started.md
index 2b91312b..b1061f52 100644
--- a/exampleSite/content/post/getting-started.md
+++ b/exampleSite/content/post/getting-started.md
@@ -102,6 +102,9 @@ The following color themes are available and can be set by the `color_theme` opt
| --- | --- |
|  |  |
+| `dark` |
+| --- |
+|  |
The following font styles are available and can be set by the `font` option in `config.toml`:
diff --git a/images/theme-dark.png b/images/theme-dark.png
new file mode 100644
index 00000000..a04ce143
Binary files /dev/null and b/images/theme-dark.png differ
diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index da081035..76b48753 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -144,11 +144,15 @@ figcaption h4 {
pre,
code {
font-family: '{{ .Get "mono_font" }}', monospace;
+ color: #c7254e;
+ background-color: #f9f2f4;
}
pre {
margin: 0 0 1rem 0;
overflow: auto;
+ background-color: rgb(248, 248, 248); /* Match default highlight theme. */
+ border-color: rgb(248, 248, 248);
}
hr {
@@ -557,6 +561,12 @@ article {
padding-right: 0;
}
+.article-style td img,
+.article-style td video {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
.article-style figure {
margin-top: 60px;
margin-bottom: 60px;
@@ -1295,3 +1305,111 @@ div.alert a:hover {
background-color: #f44336; /* Material Red500 */
border-color: #ebccd1;
}
+
+
+/*************************************************
+ * Dark themed components
+ **************************************************/
+
+body.dark {
+ background-color: rgb(40, 42, 54);
+ color: rgb(248, 248, 242);
+}
+
+.dark h1,
+.dark h2,
+.dark h3,
+.dark h4,
+.dark h5,
+.dark h6 {
+ color: rgb(152, 166, 173);
+}
+
+.dark pre,
+.dark code {
+ color: rgb(139, 233, 253);
+ background-color: rgb(68, 71, 90);
+
+}
+
+.dark pre {
+ background-color: rgb(68, 71, 90);
+ border-color: rgb(68, 71, 90);
+}
+
+.dark ul.share li a {
+ background-color: {{ .Get "primary" }};
+}
+
+.dark table table {
+ background-color: rgb(40, 42, 54);
+}
+
+/* Table Striped */
+.dark table > tbody > tr:nth-child(odd) > td,
+.dark table > tbody > tr:nth-child(odd) > th {
+ background-color: rgb(50, 52, 64);
+}
+
+/* Table Hover */
+.dark table > tbody > tr:hover > td,
+.dark table > tbody > tr:hover > th {
+ background-color: rgb(60, 62, 74);
+}
+
+.dark .article-title a {
+ color: #fff;
+}
+
+.dark #profile .portrait-title h2 {
+ color: #fff;
+}
+
+.dark #profile .portrait-title h3 {
+ color: rgba(255, 255, 255, 0.54);
+}
+
+.dark ul.ul-edu li .description p.institution {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+.dark .pub-icon {
+ color: rgba(255, 255, 255, 0.54);
+}
+
+.dark .talk-metadata {
+ color: rgba(255, 255, 255, 0.54);
+}
+
+.dark .pager li > a, .pager li > span {
+ background-color: rgb(40, 42, 54);
+ border: 1px solid #ddd;
+}
+
+.dark .card {
+ background: rgb(10, 12, 24);
+ box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.2);
+}
+
+.dark .card h4 a {
+ color: {{ .Get "primary" }};
+ border-bottom: solid 1px transparent;
+}
+
+.dark .card .card-image.hover-overlay::before {
+ background: #666;
+}
+
+.dark .card .card-image.hover-overlay::after {
+ color: #fff;
+}
+
+.dark .navbar-default {
+ box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11);
+ border-color: #070707;
+}
+
+.dark select {
+ background: rgb(40, 42, 54);
+ color: rgb(248, 248, 242);
+}
diff --git a/layouts/partials/css/parse_theme.css b/layouts/partials/css/parse_theme.css
index 343a84e6..8e5c5bf2 100644
--- a/layouts/partials/css/parse_theme.css
+++ b/layouts/partials/css/parse_theme.css
@@ -19,6 +19,8 @@
{{ if isset .Site.Data.themes $theme_index }}
{{ $theme := index .Site.Data.themes $theme_index }}
+ {{- $scr.Set "light" $theme.light -}}
+
{{- $scr.Set "primary" $theme.primary -}}
{{- $scr.Set "primary_light" $theme.primary_light -}}
{{- $scr.Set "primary_dark" $theme.primary_dark -}}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f46fea37..59f05af7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -9,27 +9,33 @@
{{ .Hugo.Generator }}
{{ with .Site.Params.name }}{{ end }}
{{ with .Site.Params.role }}{{ end }}
-
+
{{ range .Translations }}
{{ end }}
+ {{ $scr := .Scratch }}
+ {{ partial "css/parse_theme.css" . }}
{{ $sri := .Site.Data.sri }}
{{/* Default to enabling highlighting, but allow the user to override it in .Params or .Site.Params.
- Use $.Scratch to store "highlight_enabled", so that we can read it again in footer.html. */}}
- {{ $.Scratch.Set "highlight_enabled" true }}
+ Use $scr to store "highlight_enabled", so that we can read it again in footer.html. */}}
+ {{ $scr.Set "highlight_enabled" true }}
{{ if isset .Params "highlight" }}
- {{ $.Scratch.Set "highlight_enabled" .Params.highlight }}
+ {{ $scr.Set "highlight_enabled" .Params.highlight }}
{{ else if isset .Site.Params "highlight" }}
- {{ $.Scratch.Set "highlight_enabled" .Site.Params.highlight }}
+ {{ $scr.Set "highlight_enabled" .Site.Params.highlight }}
{{ end }}
- {{ if $.Scratch.Get "highlight_enabled" }}
+ {{ if $scr.Get "highlight_enabled" }}
{{ $v := $sri.js.highlight.version }}
{{ with .Site.Params.highlight_style }}
{{ else }}
-
+ {{ if eq ($scr.Get "light") true }}
+
+ {{ else }}
+
+ {{ end }}
{{ end }}
{{ end }}
{{ if not .Site.Params.disable_sri }}
@@ -48,8 +54,6 @@
{{ end }}
{{ end }}
{{/* We cannot use SRI with Google Fonts because the CSS is dynamically generated according to the user agent */}}
- {{- partial "css/parse_theme.css" . -}}
- {{- $scr := .Scratch -}}
{{ with ($scr.Get "google_fonts") }}
{{ end }}
@@ -117,4 +121,4 @@
{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}
-
+
diff --git a/static/css/highlight.min.css b/static/css/highlight.min.css
deleted file mode 100644
index 5477a1b9..00000000
--- a/static/css/highlight.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:bold}.hljs-number,.hljs-literal,.hljs-variable,.hljs-template-variable,.hljs-tag .hljs-attr{color:#008080}.hljs-string,.hljs-doctag{color:#d14}.hljs-title,.hljs-section,.hljs-selector-id{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-type,.hljs-class .hljs-title{color:#458;font-weight:bold}.hljs-tag,.hljs-name,.hljs-attribute{color:#000080;font-weight:normal}.hljs-regexp,.hljs-link{color:#009926}.hljs-symbol,.hljs-bullet{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
\ No newline at end of file