From a8fce7c6f47b105f9b729be4d4a4e8010aae34cd Mon Sep 17 00:00:00 2001 From: athul Date: Thu, 16 Apr 2020 12:50:38 +0530 Subject: [PATCH] Dark Mode Support --- layouts/_default/terms.html | 8 ++-- layouts/partials/header.html | 3 ++ static/css/dark.css | 90 ++++++++++++++++++++++++++++++++++++ static/css/main.css | 3 +- 4 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 static/css/dark.css diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html index 92330b1..cec21f6 100644 --- a/layouts/_default/terms.html +++ b/layouts/_default/terms.html @@ -16,15 +16,15 @@ {{ $data := .Data }}
+
- -
- {{ partial "footer.html" . }} + {{ partial "footer.html" . }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 937cd57..4e491d6 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -28,6 +28,9 @@ + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} + + {{- end -}} {{- range .Site.Params.customJS }} {{- if or (hasPrefix . "http://") (hasPrefix . "https://") }} diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..4675652 --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,90 @@ +body { + color: white; + background-color: #202124; +} + +::-moz-selection { + background: blue; + color: #fff; + text-shadow: none +} + +::selection { + background: red; + color: #fff; + text-shadow: none +} + +hr { + border-top: 3px dotted blue; +} +code { + background-color: lightblue; + color:black; + text-decoration: bold; + padding: .1em .2em; + } +pre { + background-color: #272822; + line-height: 1.4; + overflow-x: auto; + padding: 1em; + } +blockquote { + border-color: blue; +} + +h1,h2,h3,h4,h5,h6 { + color: #ddd; +} +h1::before { color: var(--darkMaincolor); content: '# '; } +h2::before { color: var(--darkMaincolor); content: '## '; } +h3::before { color: var(--darkMaincolor); content: '### '; } +h4::before { color: var(--darkMaincolor); content: '#### '; } +h5::before { color: var(--darkMaincolor); content: '##### '; } +h6::before { color: var(--darkMaincolor); content: '###### '; } + +a{ + border-bottom: 3px solid var(--darkMaincolor); + color:inherit; +} +a:hover { + background-color: var(--darkMaincolor); + color:black; +} + +.site-description a{ + color: #ddd; +} +.site-description a:hover { + color: black; + +} + +.tags a{ + border-bottom: 3px solid var(--darkMaincolor); + } + .tags a:hover{ + color: black; + } + +.site-title a { + color: white; + text-decoration: none !important; +} + +.header nav, +.footer { + border-color: #333; +} + +.highlight { + background-color: #333; +} +.soc:hover{ + color: black; + } + .draft-label{ + color:var(--darkMaincolor); + background-color: blue; + } \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 83a830c..e9abc78 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -6,6 +6,7 @@ --bordercl:rebeccapurple; --callouctcolor:dodgerblue; --hovercolor:navy; +--darkMaincolor: #50fa7b; } html { color: #232333; @@ -51,7 +52,7 @@ a { } a:hover { background-color: var(--hovercolor); - color: #fff; + color: #fff; } ul {