Skip to content
Permalink
Browse files
feat: add dark mode
  • Loading branch information
vividvilla committed Oct 12, 2019
1 parent 1025488 commit d8269da72245aefa9c71096c553aad00b963b202
Show file tree
Hide file tree
Showing 10 changed files with 97 additions and 29 deletions.
@@ -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]]
@@ -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"
@@ -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/)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -3,7 +3,7 @@
{{ partial "header.html" . }}
<body>
<div class="container wrapper">
{{ partial "head.html" . }}
{{ partial "head.html" . }}

<div class="recent-posts section">
<h2 class="section-header">
@@ -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>
@@ -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;
}
@@ -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,23 +148,23 @@ ul.flat {
ul.flat li {
display: inline-block;
list-style: none;
margin-left: 0
margin-left: 0;
}

.prevent-collapse {
min-height: .1rem
}

.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 {
@@ -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"

0 comments on commit d8269da

Please sign in to comment.