feat: add dark mode

README.md

@@ -6,11 +6,13 @@ Clean and minimal personal blog and portfolio theme for Hugo.
 
 [View demo](https://ezhil-hugo.netlify.com/)
 
-![Screenshot](images/screenshot.png "Ezhil")
+![Screenshot](images/screenshot-light.png "Ezhil light theme")
+![Screenshot](images/screenshot-dark.png "Ezhil dark theme")
 
 ## Features
 
 * Clean and minimal
+* Dark mode (Auto detect from OS)
 * Responsive
 * Supports tags
 * Social media links
@@ -65,6 +67,9 @@ paginate = 10
     featherIconsCDN = true
     # Specify favicon (icons/i.png maps to static/icons/i.png). No favicon if not defined.
     favicon = "icons/myicon.png"
+    # Switch to dark mode or auto detect mode from OS (Optional).
+    # "dark" will set mode to dark and "auto" will switch to dark mode if OS is in dark mode.
+    mode = "dark" # "dark" or "auto"
 
 # Main menu which appears below site header.
 [[menu.main]]

exampleSite/config.toml

@@ -2,7 +2,7 @@ baseURL = "http://example.org/"
 languageCode = "en-us"
 title = "Ezhil"
 theme = "ezhil"
-paginate = 5
+paginate = 3
 
 copyright = "© Copyright notice"
 
@@ -17,6 +17,7 @@ disqusShortname = "localhost"
 	subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
 	disableDisqusTypes = ["page"]
 	featherIconsCDN = true
+	mode = "auto" # "dark" or "auto"
 
 [[menu.main]]
 name = "Home"

exampleSite/content/posts/post-7.md

@@ -0,0 +1,14 @@
+---
+title: "How to test dark mode?"
+description: "Here is how you can setup dark mode for Ezhil and test on various OS like iOS, Android, macOS and Windows 10."
+date: 2018-03-18T12:13:38+05:30
+---
+
+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)
+
+Here is how you can switch based on your OS
+
+* [iOS](https://www.howtogeek.com/440078/how-to-enable-dark-mode-on-your-iphone-and-ipad/)
+* [Android](https://9to5google.com/2018/12/17/android-dark-mode-theme-pie/)
+* [macOS](https://support.apple.com/en-in/HT208976)
+* [Windows 10](https://www.cnet.com/how-to/turn-on-the-dark-mode-in-windows-10/)

layouts/partials/header.html

@@ -24,6 +24,9 @@
 
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/normalize.css" />
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
+	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }}
+	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{ end }}
 
 	{{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
 	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

static/css/dark.css

@@ -0,0 +1,44 @@
+body {
+	color: #fff;
+	background-color: #000;
+}
+
+::-moz-selection {
+    background: #666;
+    text-shadow: none
+}
+
+::selection {
+    background: #666;
+    text-shadow: none
+}
+
+hr {
+    border-color: #333;
+}
+
+blockquote {
+	border-color: #fff;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: #fff;
+}
+
+a,a:hover {
+	color: #fff;
+	text-decoration: underline;
+}
+
+a:hover {
+	opacity: 0.8;
+}
+
+.header nav,
+.footer {
+	border-color: #333;
+}
+
+.highlight {
+	background-color: #333;
+}

static/css/main.css

@@ -12,17 +12,17 @@ a, a:hover {
 }
 
 html,button,input,select,textarea {
-    color: #222
+    color: #333;
 }
 
 ::-moz-selection {
     background: #b3d4fc;
-    text-shadow: none
+    text-shadow: none;
 }
 
 ::selection {
     background: #b3d4fc;
-    text-shadow: none
+    text-shadow: none;
 }
 
 hr {
@@ -31,7 +31,7 @@ hr {
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1rem 0;
-    padding: 0
+    padding: 0;
 }
 
 img {
@@ -52,11 +52,11 @@ figure {
 fieldset {
     border: 0;
     margin: 0;
-    padding: 0
+    padding: 0;
 }
 
 textarea {
-    resize: vertical
+    resize: vertical;
 }
 
 blockquote {
@@ -66,12 +66,12 @@ blockquote {
     font-family: Georgia,bitstream charter,serif;
     border-left: 3px solid;
     border-color: #a00;
-    padding-left: 20px
+    padding-left: 20px;
 }
 
 blockquote cite {
     font-size: 70%;
-    opacity: .8
+    opacity: .8;
 }
 
 blockquote em {
@@ -95,29 +95,29 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 h1 {
-    font-size: 2.75rem
+    font-size: 2.75rem;
 }
 
 h2 {
-    font-size: 2rem
+    font-size: 2rem;
 }
 
 h3 {
-    font-size: 1.6rem
+    font-size: 1.6rem;
 }
 
 h4 {
-    font-size: 1.2rem
+    font-size: 1.2rem;
 }
 
 h5 {
     font-weight: 300;
-    font-size: 1rem
+    font-size: 1rem;
 }
 
 h6 {
     font-weight: 300;
-    font-size: .9rem
+    font-size: .9rem;
 }
 
 .align-center {
@@ -133,7 +133,7 @@ h6 {
 }
 
 .container {
-    max-width: 800px
+    max-width: 800px;
 }
 
 ul {
@@ -148,7 +148,7 @@ ul.flat {
 ul.flat li {
     display: inline-block;
     list-style: none;
-	margin-left: 0
+	margin-left: 0;
 }
 
 .prevent-collapse {
@@ -156,15 +156,15 @@ ul.flat li {
 }
 
 .page-title {
-    margin: 0
+    margin: 0;
 }
 
 .smaller {
-    font-size: 70%
+    font-size: 70%;
 }
 
 ul {
-    list-style: disc inside
+    list-style: disc inside;
 }
 
 .post ul li {
@@ -179,11 +179,12 @@ ul {
     margin-bottom: 0;
 	margin-top: 0;
 	padding: 20px;
-	background-color: #FAFAFA !important;
+	background-color: transparent !important;
 }
 
 .highlight {
-    background: 0 0
+	background: 0 0;
+	background-color: #FAFAFA;
 }
 
 .wrapper {
@@ -353,19 +354,19 @@ ul {
 	}
 
 	h1 {
-		font-size: 2rem
+		font-size: 2rem;
 	}
 
 	h2 {
-		font-size: 1.6rem
+		font-size: 1.6rem;
 	}
 
 	h3 {
-		font-size: 1.2rem
+		font-size: 1.2rem;
 	}
 
 	h4 {
-		font-size: 1rem
+		font-size: 1rem;
 	}
 
 	.container {

theme.toml

@@ -6,7 +6,7 @@ license = "MIT"
 licenselink = "https://github.com/vividvilla/ezhil/blob/master/LICENSE.md"
 description = "Clean and minimal personal blog and portfolio theme."
 homepage = "https://github.com/vividvilla/ezhil"
-tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio"]
+tags = ["minimal", "clean", "blog", "responsive", "personal", "simple", "minimalist", "portfolio", "dark"]
 features = ["blog", "Clean and minimal", "Responsive", "Social media links", "Syntax highlighting"]
 min_version = "0.37.0"