Skip to content

Commit d8269da

Browse files
vividvillavividvilla
committedOct 12, 2019
feat: add dark mode
1 parent 1025488 commit d8269da

File tree

10 files changed

+97
-29
lines changed

10 files changed

+97
-29
lines changed
 

‎README.md

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ Clean and minimal personal blog and portfolio theme for Hugo.
66

77
[View demo](https://ezhil-hugo.netlify.com/)
88

9-
![Screenshot](images/screenshot.png "Ezhil")
9+
![Screenshot](images/screenshot-light.png "Ezhil light theme")
10+
![Screenshot](images/screenshot-dark.png "Ezhil dark theme")
1011

1112
## Features
1213

1314
* Clean and minimal
15+
* Dark mode (Auto detect from OS)
1416
* Responsive
1517
* Supports tags
1618
* Social media links
@@ -65,6 +67,9 @@ paginate = 10
6567
featherIconsCDN = true
6668
# Specify favicon (icons/i.png maps to static/icons/i.png). No favicon if not defined.
6769
favicon = "icons/myicon.png"
70+
# Switch to dark mode or auto detect mode from OS (Optional).
71+
# "dark" will set mode to dark and "auto" will switch to dark mode if OS is in dark mode.
72+
mode = "dark" # "dark" or "auto"
6873

6974
# Main menu which appears below site header.
7075
[[menu.main]]

‎exampleSite/config.toml

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ baseURL = "http://example.org/"
22
languageCode = "en-us"
33
title = "Ezhil"
44
theme = "ezhil"
5-
paginate = 5
5+
paginate = 3
66

77
copyright = "© Copyright notice"
88

@@ -17,6 +17,7 @@ disqusShortname = "localhost"
1717
subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
1818
disableDisqusTypes = ["page"]
1919
featherIconsCDN = true
20+
mode = "auto" # "dark" or "auto"
2021

2122
[[menu.main]]
2223
name = "Home"

‎exampleSite/content/posts/post-7.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: "How to test dark mode?"
3+
description: "Here is how you can setup dark mode for Ezhil and test on various OS like iOS, Android, macOS and Windows 10."
4+
date: 2018-03-18T12:13:38+05:30
5+
---
6+
7+
You can set dark mode as default by setting `params.mode` to `dark` in `config.toml` or set it to `auto` which will detect based on your OS and switch to dark mode. For more details [refer documentation](https://github.com/vividvilla/ezhil#configuration)
8+
9+
Here is how you can switch based on your OS
10+
11+
* [iOS](https://www.howtogeek.com/440078/how-to-enable-dark-mode-on-your-iphone-and-ipad/)
12+
* [Android](https://9to5google.com/2018/12/17/android-dark-mode-theme-pie/)
13+
* [macOS](https://support.apple.com/en-in/HT208976)
14+
* [Windows 10](https://www.cnet.com/how-to/turn-on-the-dark-mode-in-windows-10/)

‎images/screenshot-dark.png

98.1 KB
Loading

‎images/screenshot-light.png

106 KB
Loading

‎layouts/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{{ partial "header.html" . }}
44
<body>
55
<div class="container wrapper">
6-
{{ partial "head.html" . }}
6+
{{ partial "head.html" . }}
77

88
<div class="recent-posts section">
99
<h2 class="section-header">

‎layouts/partials/header.html

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424

2525
<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/normalize.css" />
2626
<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
27+
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }}
28+
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
29+
{{ end }}
2730

2831
{{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
2932
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

‎static/css/dark.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
color: #fff;
3+
background-color: #000;
4+
}
5+
6+
::-moz-selection {
7+
background: #666;
8+
text-shadow: none
9+
}
10+
11+
::selection {
12+
background: #666;
13+
text-shadow: none
14+
}
15+
16+
hr {
17+
border-color: #333;
18+
}
19+
20+
blockquote {
21+
border-color: #fff;
22+
}
23+
24+
h1,h2,h3,h4,h5,h6 {
25+
color: #fff;
26+
}
27+
28+
a,a:hover {
29+
color: #fff;
30+
text-decoration: underline;
31+
}
32+
33+
a:hover {
34+
opacity: 0.8;
35+
}
36+
37+
.header nav,
38+
.footer {
39+
border-color: #333;
40+
}
41+
42+
.highlight {
43+
background-color: #333;
44+
}

‎static/css/main.css

+26-25
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ a, a:hover {
1212
}
1313

1414
html,button,input,select,textarea {
15-
color: #222
15+
color: #333;
1616
}
1717

1818
::-moz-selection {
1919
background: #b3d4fc;
20-
text-shadow: none
20+
text-shadow: none;
2121
}
2222

2323
::selection {
2424
background: #b3d4fc;
25-
text-shadow: none
25+
text-shadow: none;
2626
}
2727

2828
hr {
@@ -31,7 +31,7 @@ hr {
3131
border: 0;
3232
border-top: 1px solid #ccc;
3333
margin: 1rem 0;
34-
padding: 0
34+
padding: 0;
3535
}
3636

3737
img {
@@ -52,11 +52,11 @@ figure {
5252
fieldset {
5353
border: 0;
5454
margin: 0;
55-
padding: 0
55+
padding: 0;
5656
}
5757

5858
textarea {
59-
resize: vertical
59+
resize: vertical;
6060
}
6161

6262
blockquote {
@@ -66,12 +66,12 @@ blockquote {
6666
font-family: Georgia,bitstream charter,serif;
6767
border-left: 3px solid;
6868
border-color: #a00;
69-
padding-left: 20px
69+
padding-left: 20px;
7070
}
7171

7272
blockquote cite {
7373
font-size: 70%;
74-
opacity: .8
74+
opacity: .8;
7575
}
7676

7777
blockquote em {
@@ -95,29 +95,29 @@ h1,h2,h3,h4,h5,h6 {
9595
}
9696

9797
h1 {
98-
font-size: 2.75rem
98+
font-size: 2.75rem;
9999
}
100100

101101
h2 {
102-
font-size: 2rem
102+
font-size: 2rem;
103103
}
104104

105105
h3 {
106-
font-size: 1.6rem
106+
font-size: 1.6rem;
107107
}
108108

109109
h4 {
110-
font-size: 1.2rem
110+
font-size: 1.2rem;
111111
}
112112

113113
h5 {
114114
font-weight: 300;
115-
font-size: 1rem
115+
font-size: 1rem;
116116
}
117117

118118
h6 {
119119
font-weight: 300;
120-
font-size: .9rem
120+
font-size: .9rem;
121121
}
122122

123123
.align-center {
@@ -133,7 +133,7 @@ h6 {
133133
}
134134

135135
.container {
136-
max-width: 800px
136+
max-width: 800px;
137137
}
138138

139139
ul {
@@ -148,23 +148,23 @@ ul.flat {
148148
ul.flat li {
149149
display: inline-block;
150150
list-style: none;
151-
margin-left: 0
151+
margin-left: 0;
152152
}
153153

154154
.prevent-collapse {
155155
min-height: .1rem
156156
}
157157

158158
.page-title {
159-
margin: 0
159+
margin: 0;
160160
}
161161

162162
.smaller {
163-
font-size: 70%
163+
font-size: 70%;
164164
}
165165

166166
ul {
167-
list-style: disc inside
167+
list-style: disc inside;
168168
}
169169

170170
.post ul li {
@@ -179,11 +179,12 @@ ul {
179179
margin-bottom: 0;
180180
margin-top: 0;
181181
padding: 20px;
182-
background-color: #FAFAFA !important;
182+
background-color: transparent !important;
183183
}
184184

185185
.highlight {
186-
background: 0 0
186+
background: 0 0;
187+
background-color: #FAFAFA;
187188
}
188189

189190
.wrapper {
@@ -353,19 +354,19 @@ ul {
353354
}
354355

355356
h1 {
356-
font-size: 2rem
357+
font-size: 2rem;
357358
}
358359

359360
h2 {
360-
font-size: 1.6rem
361+
font-size: 1.6rem;
361362
}
362363

363364
h3 {
364-
font-size: 1.2rem
365+
font-size: 1.2rem;
365366
}
366367

367368
h4 {
368-
font-size: 1rem
369+
font-size: 1rem;
369370
}
370371

371372
.container {

‎theme.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ license = "MIT"
66
licenselink = "https://github.com/vividvilla/ezhil/blob/master/LICENSE.md"
77
description = "Clean and minimal personal blog and portfolio theme."
88
homepage = "https://github.com/vividvilla/ezhil"
9-
tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio"]
9+
tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"]
1010
features = ["blog", "Clean and minimal", "Responsive", "Social media links", "Syntax highlighting"]
1111
min_version = "0.37.0"
1212

0 commit comments

Comments
 (0)
Please sign in to comment.