syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark theme

Browse Source
This commit is contained in:
Dmitry Kolosov 2020-07-09 22:15:38 +03:00
parent 32818dacf1
commit 5be39c3882
14 changed files with 254 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -6,6 +6,7 @@ Anubis is a simple minimalist theme for [Hugo blog engine](https://gohugo.io/).
## Features
- Dark mode (automatic, by switcher)
- Pagination
- Tags/Categories support
- Archive
@ -61,6 +62,7 @@ params:
- css/my.css # relative path to "static" directory
dateFormat: "2006-01-02"
paginationSinglePost: true
style: light-without-switcher
markup:
goldmark:
@ -78,6 +80,16 @@ Now enter [`localhost:1313`](http://localhost:1313/) in the address bar of your
## Feature Settings
### Dark Mode
Customize via `style` param in `params` section of config.
Options:
- light-without-switcher - light theme, without switcher, JS-free (by default)
- dark-without-switcher - dark theme, without switcher, JS-free
- auto-without-switcher - theme based on user system settings, without switcher, JS-free
- light - light theme by default, can be switched by user to dark theme and back. Theme settings are saved for user
- dark - dark theme by default, can be switched by user to light theme and back. Theme settings are saved for user
- auto - theme based on user system settings by default, can be switched by user to dark/light theme. Theme settings are saved for user
### Google Analytics
Only works for production environment. You either build your site with variable like
`HUGO_ENV=production hugo --minify`

3
exampleSite/config.toml
View File

@ -13,6 +13,9 @@ googleAnalytics = ""
[params]
author = "Dmitry Kolosov"
description = "Anubis is a simple minimalist theme for Hugo blog engine."
dateFormat = "2006-01-02"
paginationSinglePost = true
style = "light-without-switcher"
[menu]

3
exampleSiteMultilingual/config.toml
View File

@ -14,6 +14,9 @@ googleAnalytics = ""
[params]
author = "Dmitry Kolosov"
description = "Anubis is a simple minimalist theme for Hugo blog engine."
dateFormat = "2006-01-02"
paginationSinglePost = true
style = "light-without-switcher"
[languages.en]
languageName = "English"

BIN
images/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 106 KiB

BIN
images/tn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 106 KiB

19
layouts/_default/baseof.html
View File

@ -1,5 +1,9 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
{{ $dataTheme := "" }}
{{ if eq site.Params.style "dark-without-switcher" }}
{{ $dataTheme = "dark" }}
{{ end }}
<html lang="{{ .Site.LanguageCode }}" data-theme="{{ $dataTheme }}">
<head>
{{ block "head" . }}
{{ partial "head.html" . }}
@ -16,16 +20,9 @@
<main id="main" tabindex="-1">
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ block "footer" . }}
{{ $languagesCount := $.Site.Home.AllTranslations }}
{{ if gt $languagesCount 1 }}
{{ partial "languageSelect.html" . }}
{{ end }}
{{ partial "footer.html" . }}
{{ end }}
</footer>
{{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }}
</div>
</body>
</html>

18
layouts/partials/cssColors.html Normal file
View File

@ -0,0 +1,18 @@
<style>
{{ if eq site.Params.style "dark-without-switcher" }}
:root {
{{ partial "dark.css" . | safeCSS }}
}
{{ else if eq site.Params.style "auto-without-switcher" }}
@media (prefers-color-scheme: dark) {
:root {
{{ partial "dark.css" . | safeCSS }}
}
}
{{else }}
[data-theme="dark"] {
{{ partial "dark.css" . | safeCSS }}
}
{{ end }}
</style>

23
layouts/partials/dark.css Normal file
View File

@ -0,0 +1,23 @@
--font-color: #eee;
--bg-color: #212121;
--link-color:#599ada;
--link-state-color:#ff5858;
--link-state-border-color: rgba(238, 54, 54, 0.5);
--thead-bg-color: #343a40;
--table-border-color: lightgrey;
--pre-color: #333;
--pre-bg-color: #f1f1f1;
--bq-color: #ccc;
--hr-color: #ccc;
--pagination-bg-color: #373737;
--pagination-link-color: #b6b6b6;
--post-info-color: grey;
--switcher-color: #333;
--switcher-bg-color: #fff;

17
layouts/partials/footer.html
View File

@ -1,3 +1,14 @@
<p>© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}<br>
{{ i18n "powered" | humanize }} <a target="_blank" href="https://gohugo.io/">Hugo</a>, {{ i18n "theme" }} <a target="_blank" href="https://github.com/mitrichius/hugo-theme-anubis">Anubis</a>.
</p>
<footer class="common-footer">
{{ $languagesCount := $.Site.Home.AllTranslations }}
{{ if gt $languagesCount 1 }}
{{ partial "languageSelect.html" . }}
{{ end }}
<div class="copyright">
<p>© {{ if isset .Site.Params "author"}}{{ .Site.Params.author }}, {{end}}{{ now.Year }}<br>
{{ i18n "powered" | humanize }} <a target="_blank" href="https://gohugo.io/">Hugo</a>, {{ i18n "theme" }} <a target="_blank" href="https://github.com/mitrichius/hugo-theme-anubis">Anubis</a>.
</p>
</div>
{{ partial "themeSwitcher.html" . }}
</footer>

13
layouts/partials/head.html
View File

@ -14,19 +14,10 @@
<link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | absURL }}">
<link rel="apple-touch-icon-precomposed" href="{{ "favicon.png" | absURL }}">
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{ partial "cssColors.html" }}
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
{{- $style := "light" -}}
{{- if and (isset site.Params "style") (ne site.Params.style "") -}}
{{- $style = site.Params.style | lower -}}
{{- end -}}
{{- if eq $style "dark" -}}
<link rel="stylesheet" href="{{ "css/dark.css" | absURL }}?rnd={{ now.Unix }}" />
{{- else -}}
<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
{{- end -}}
{{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
{{- end }}

77
layouts/partials/themeSwitcher.html Normal file
View File

@ -0,0 +1,77 @@
{{ $style := "light-without-switcher" }}
{{ if and (isset site.Params "style") (ne site.Params.style "") }}
{{ $style = site.Params.style | lower }}
{{ end }}
{{ if not (in (slice "light-without-switcher" "dark-without-switcher" "auto-without-switcher") $style) }}
<button class="theme-switcher">
Dark theme
</button>
<script>
const STORAGE_KEY = 'user-color-scheme'
const defaultTheme = {{ $style }}
let currentTheme
let switchButton
let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
changeButtonText()
}
document.addEventListener('DOMContentLoaded', function() {
switchButton = document.querySelector('.theme-switcher')
currentTheme = detectCurrentScheme()
if (currentTheme == 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
}
if (currentTheme == 'auto') {
autoChangeScheme(autoDefinedScheme);
autoDefinedScheme.addListener(autoChangeScheme);
}
changeButtonText()
switchButton.addEventListener('click', switchTheme, false)
})
function detectCurrentScheme() {
if (localStorage.getItem(STORAGE_KEY)) {
return localStorage.getItem(STORAGE_KEY)
}
if (defaultTheme) {
return defaultTheme
}
if (!window.matchMedia) {
return 'light'
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'
}
return 'light'
}
function changeButtonText()
{
console.log(currentTheme)
switchButton.textContent = currentTheme == 'dark' ? 'Light theme' : 'Dark theme'
}
function switchTheme(e) {
if (currentTheme == 'dark') {
localStorage.setItem(STORAGE_KEY, 'light')
document.documentElement.setAttribute('data-theme', 'light')
currentTheme = 'light'
} else {
localStorage.setItem(STORAGE_KEY, 'dark')
document.documentElement.setAttribute('data-theme', 'dark')
currentTheme = 'dark'
}
changeButtonText()
}
</script>
{{ end }}

129
static/css/dark.css
View File

@ -1,129 +0,0 @@
body {
background: #212121;
color: #eee;
}
/* Links */
a {
color: #599ada;
}
a:hover,
a:focus,
a:active {
color: #ff5858;
border-bottom: 1px solid rgba(238, 54, 54, 0.5);
}
/* Table */
thead {
background: #343a40;
}
th, td {
border: 1px double lightgrey;
}
/* Code */
pre {
background-color: #f1f1f1;
color: #333;
}
/* Styles */
blockquote {
border-left: 2px solid #ccc;
}
hr {
border-top: 1px solid #ccc;
}
/* Header */
header a {
color: #eee;
}
.common-header {
border-bottom: thin solid #333;
}
/* Articles */
.post-navigation {
background: #373737;
}
.post-navigation a {
color: #b6b6b6;
}
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: #ff5858;
}
article:not(:last-of-type) {
border-bottom: thin solid #333;
}
article header h1 a {
color: #eee;
}
.post-info {
color: grey;
}
.post-info a {
color: grey;
}
.post-info a:hover {
color: #ff5858;
}
article figcaption {
color: lightgrey;
}
.divider {
border-top: thin solid #ccc;
}
/* Pagination */
.pagination-item {
background: #373737;
}
.pagination-item a {
color: #eee;
}
.pagination-item a:hover, .pagination-item a:focus {
color: #ff5858;
}
/* Footer */
footer {
border-top: thin solid #333;
}
/* Media Queries */
@media (max-width: 840px) {
header nav {
background: #373737;
}
.post-navigation {
background: #373737;
}
}

139
static/css/light.css
View File

@ -1,128 +1,25 @@
body {
background: #fff;
color: #333;
}
:root {
--font-color: #333;
--bg-color: #fff;
/* Links */
--link-color:#1d60a3;
--link-state-color:#a31d1d;
--link-state-border-color: rgba(163, 29, 29, .5);
a {
color: #1d60a3;
}
--thead-bg-color: lightgrey;
--table-border-color: lightgrey;
a:hover,
a:focus,
a:active {
color: #a31d1d;
border-bottom: 1px solid rgba(163, 29, 29, .5);
}
--pre-color: #333;
--pre-bg-color: #f1f1f1;
--bq-color: #ccc;
--hr-color: #ccc;
/* Table */
thead {
background: lightgrey;
}
--pagination-bg-color: #fafafa;
--pagination-link-color: #696969;
th, td {
border: 1px double lightgrey;
}
--post-info-color: grey;
/* Code */
pre {
background-color: #f1f1f1;
}
/* Styles */
blockquote {
border-left: 2px solid #ccc;
}
hr {
border-top: 1px solid #ccc;
}
/* Header */
header a {
color: #333;
}
.common-header {
border-bottom: thin solid #f1f1f1;
}
/* Articles */
.post-navigation {
background: #fafafa;
}
.post-navigation a {
color: #696969;
}
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: #a31d1d;
}
article:not(:last-of-type) {
border-bottom: thin solid #f1f1f1;
}
article header h1 a {
color: #333;
}
.post-info {
color: grey;
}
.post-info a {
color: grey;
}
.post-info a:hover {
color: #a31d1d;
}
article figcaption {
color: grey;
}
.divider {
border-top: thin solid #f1f1f1;
}
/* Pagination */
.pagination-item {
background: #fafafa;
}
.pagination-item a {
color: #333;
}
.pagination-item a:hover, .pagination-item a:focus {
color: #a31d1d;
}
/* Footer */
footer {
border-top: thin solid #f1f1f1;
}
/* Media Queries */
@media (max-width: 840px) {
header nav {
background: #fafafa;
}
.post-navigation {
background: #fafafa;
}
--switcher-color: #fff;
--switcher-bg-color: #333;
}

82
static/css/style.css
View File

@ -1,5 +1,6 @@
/* Basic */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
html {
font-family: -apple-system, BlinkMacSystemFont, 'Montserrat', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* 1 */
@ -14,6 +15,8 @@ body {
font-size: 18px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
color: var(--font-color);
background: var(--bg-color);
}
article,
@ -57,9 +60,17 @@ h3 {
/* Links */
a {
color: var(--link-color);
text-decoration: none;
}
a:hover,
a:focus,
a:active {
color: var(--link-state-color);
border-bottom: 1px solid var(--link-state-border-color);
}
a:active,
a:hover {
outline: 0;
@ -93,6 +104,10 @@ a.skip-main:active {
}
/* Table */
thead {
background: var(--thead-bg-color);
}
.table-wrapper {
overflow-x: auto;
}
@ -105,10 +120,13 @@ table {
th, td {
padding: 0.5em 1em;
border: 1px double var(--table-border-color);
}
/* Code */
pre {
color: var(--pre-color)
background-color: var(--pre-bg-color);
padding: 1em;
max-width: 100%;
overflow: auto;
@ -125,6 +143,7 @@ kbd {
/* Styles */
blockquote {
border-left: 2px solid var(--bq-color);
padding: 0.1em 1em;
margin-left: 0.75em;
}
@ -135,6 +154,7 @@ p {
}
hr {
border-top: 1px solid var(--hr-color);
height: 1px;
border: 0;
}
@ -150,6 +170,10 @@ header {
justify-content: space-between;
}
header a {
color: var(--font-color);
}
header h1 {
font-size: 1em;
margin-top: 1em;
@ -178,7 +202,8 @@ header nav a {
}
.common-header {
padding-bottom: 2em;
padding-bottom: 1.5em;
border-bottom: thin solid var(--hr-color);
}
/* Pages */
@ -197,6 +222,7 @@ main h1 {
/* Articles */
.post-navigation {
background: var(--pagination-bg-color);
text-align: center;
margin-top: 1em;
max-width: 100%;
@ -208,9 +234,16 @@ main h1 {
}
.post-navigation a {
color: var(--pagination-link-color);
margin-left: 2em;
}
.post-navigation a:hover,
.post-navigation a:focus,
.post-navigation a:active {
color: var(--link-state-color);
}
.post-title.favorite::after {
content: "☆";
display: inline-block;
@ -230,6 +263,7 @@ main h1 {
}
article:not(:last-of-type) {
border-bottom: thin solid var(--hr-color);
padding-bottom: 2em;
}
@ -241,15 +275,25 @@ article header h1 {
}
article header h1 a {
color: var(--font-color);
border: none;
text-decoration: none;
}
.post-info {
color: var(--post-info-color);
font-size: 0.75em;
margin-top: 1em;
}
.post-info a {
color: var(--post-info-color);
}
.post-info a:hover {
color: var(--link-state-color);
}
.post-short-list .post-info {
margin-top: 0;
margin-bottom: 1.5em;
@ -294,6 +338,7 @@ article img {
}
article figcaption {
color: grey;
text-align: center;
font-size: 0.85em;
margin-bottom: 2em;
@ -304,6 +349,7 @@ article figcaption {
}
.divider {
border-top: thin solid var(--hr-color);
display: block;
height: 1px;
border: 0;
@ -333,16 +379,23 @@ article figcaption {
display: flex;
justify-content: space-between;
margin-top: 3em;
}
.pagination {
text-align: center;
}
.pagination-item {
background: var(--pagination-bg-color);
padding: 0.75em 0.75em;
}
.pagination-item a {
color: var(--pagination-link-color);
}
.pagination-item a:hover,
.pagination-item a:focus {
color: var(--link-state-color);
}
.disabled {
visibility: hidden;
}
@ -360,9 +413,15 @@ article figcaption {
/* Footer */
footer {
.common-footer {
border-top: thin solid var(--hr-color);
padding-top: 1.5em;
margin-top: 3em;
font-size: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
ul.language-select {
@ -375,6 +434,15 @@ ul.language-select > li {
margin-right: 1em;
}
.theme-switcher {
color: var(--switcher-color);
background: var(--switcher-bg-color);
padding: 0.5em 1em;
font-size: 16px;
border: none;
margin-right: 1em;
}
/* Media Queries */
@media (max-width: 840px) {
@ -405,6 +473,7 @@ ul.language-select > li {
}
header nav {
background: var(--pagination-bg-color);
margin-top: 1em;
max-width: 100%;
text-align: center;
@ -420,6 +489,7 @@ ul.language-select > li {
}
.post-navigation {
background: var(--pagination-bg-color);
text-align: center;
padding: 0.5em 0;
}
@ -431,4 +501,4 @@ ul.language-select > li {
.post-pagination .pagination-item {
max-width: 10em;
}
}
}