Permalink
Browse files

themes: Add dark theme

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

See #299 and #139
  • Loading branch information...
gcushen committed Nov 11, 2017
1 parent ee63fde commit 09b91845a0d2b276743d5f6f2eaa42d7b0f7533d
View
@@ -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:
View
@@ -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)"
View
@@ -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.
@@ -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`:
View
Binary file not shown.
@@ -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);
}
@@ -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 -}}
@@ -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 }}>

This file was deleted.

Oops, something went wrong.

0 comments on commit 09b9184

Please sign in to comment.