msfjarvis
/
msfjarvis.dev
mirror of https://github.com/msfjarvis/msfjarvis.dev.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21 from vividvilla/feat-dark-mode 

feat: add dark mode
This commit is contained in:
Vivek R 2019-10-12 23:00:32 +05:30 committed by GitHub
parent 22240bed18 43b2c4f1ab
commit a0b079dcad
10 changed files with 97 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -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]]

3
exampleSite/config.toml
View File

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

14
exampleSite/content/posts/post-7.md Normal file
View File

@ -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/)

BIN
images/screenshot-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
images/screenshot-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

2
layouts/index.html
View File

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

3
layouts/partials/header.html
View File

@ -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>

44
static/css/dark.css Normal file
View File

@ -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;
}

51
static/css/main.css
View File

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

2
theme.toml
View File

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