themes: Add dark theme

To use, set `color_theme = "dark"` in `config.toml`.

See #299 and #139

README.md

@@ -27,6 +27,10 @@ Academic is available in different color themes and font themes.
 | --- | --- |
 | ![forest theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-forest.png) | ![coffee theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-coffee-playfair.png) |
 
+| `dark` |
+| --- |
+| ![dark theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-dark.png) |
+
 ## 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:

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)"

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.

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
 | --- | --- |
 | ![forest theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-forest.png) | ![coffee theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-coffee-playfair.png) |
 
+| `dark` |
+| --- |
+| ![dark theme](https://raw.githubusercontent.com/gcushen/hugo-academic/master/images/theme-dark.png) |
 
 The following font styles are available and can be set by the `font` option in `config.toml`:
 

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);
+}

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 -}}

layouts/partials/header.html

@@ -9,27 +9,33 @@
   {{ .Hugo.Generator }}
   {{ with .Site.Params.name }}<meta name="author" content="{{ . }}">{{ end }}
   {{ with .Site.Params.role }}<meta name="description" content="{{ . }}">{{ end }}
-  
+
   {{ range .Translations }}
   <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
   {{ end }}
   <link rel="alternate" hreflang="{{ .Site.LanguageCode | default "en-us" }}" href="{{ .Permalink }}">
 
+  {{ $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 }}
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/{{ . }}.min.css">
     {{ else }}
-    <link rel="stylesheet" href="{{ "/css/highlight.min.css" | relURL }}">
+      {{ if eq ($scr.Get "light") true }}
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/github.min.css">
+      {{ else }}
+        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ $v }}/styles/dracula.min.css">
+      {{ 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") }}
   <link rel="stylesheet" href="{{ printf "//fonts.googleapis.com/css?family=%s" . }}">
   {{ end }}
@@ -117,4 +121,4 @@
   <title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
 
 </head>
-<body id="top" data-spy="scroll" data-target="#navbar-main" data-offset="71">
+<body id="top" data-spy="scroll" data-target="#navbar-main" data-offset="71" {{ if not ($scr.Get "light") }}class="dark"{{ end }}>

static/css/highlight.min.css

@@ -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}