From d8269da72245aefa9c71096c553aad00b963b202 Mon Sep 17 00:00:00 2001 From: Vivek R Date: Sat, 12 Oct 2019 22:34:38 +0530 Subject: feat: add dark mode --- README.md | 7 ++++- exampleSite/config.toml | 3 ++- exampleSite/content/posts/post-7.md | 14 ++++++++++ images/screenshot-dark.png | Bin 0 -> 100412 bytes images/screenshot-light.png | Bin 0 -> 108546 bytes layouts/index.html | 2 +- layouts/partials/header.html | 3 +++ static/css/dark.css | 44 +++++++++++++++++++++++++++++++ static/css/main.css | 51 ++++++++++++++++++------------------ theme.toml | 2 +- 10 files changed, 97 insertions(+), 29 deletions(-) create mode 100644 exampleSite/content/posts/post-7.md create mode 100644 images/screenshot-dark.png create mode 100644 images/screenshot-light.png create mode 100644 static/css/dark.css diff --git a/README.md b/README.md index ace07d7..621639a 100644 --- a/README.md +++ b/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]] diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 790bfee..107269c 100644 --- a/exampleSite/config.toml +++ b/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" diff --git a/exampleSite/content/posts/post-7.md b/exampleSite/content/posts/post-7.md new file mode 100644 index 0000000..174b948 --- /dev/null +++ b/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/) diff --git a/images/screenshot-dark.png b/images/screenshot-dark.png new file mode 100644 index 0000000..b02a39d Binary files /dev/null and b/images/screenshot-dark.png differ diff --git a/images/screenshot-light.png b/images/screenshot-light.png new file mode 100644 index 0000000..e77ae6a Binary files /dev/null and b/images/screenshot-light.png differ diff --git a/layouts/index.html b/layouts/index.html index b71dd49..d7711bc 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,7 +3,7 @@ {{ partial "header.html" . }}
- {{ partial "head.html" . }} + {{ partial "head.html" . }}

diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 2d3ba4c..16a7c5f 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -24,6 +24,9 @@ + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }} + + {{ end }} {{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}} diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..1b6eb1f --- /dev/null +++ b/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; +} diff --git a/static/css/main.css b/static/css/main.css index c0603d7..64c8552 100644 --- a/static/css/main.css +++ b/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 { diff --git a/theme.toml b/theme.toml index 356a543..e9dfef4 100644 --- a/theme.toml +++ b/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" -- cgit v1.2.3