diff options
| author | Kailash Nadh <kailash@nadh.in> | 2020-04-21 13:08:02 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-04-21 13:08:02 +0300 |
| commit | 61e6f5b72b8e24d1a8f3efbca50f7c26764bdffc (patch) | |
| tree | 359307ce99e312b666828f88afdc96d161accf03 | |
| parent | 4ab319f9c239ae3736f83c8a1c402a69dfdd05fa (diff) | |
| parent | 8739bbc8683701ea9e58fe038c9c4eb95dcaab60 (diff) | |
Merge pull request #17 from fteem/fix-dark-mode
Fix dark theme switching by adding dark class to html tag
| -rw-r--r-- | layouts/index.html | 2 | ||||
| -rw-r--r-- | layouts/partials/header.html | 11 | ||||
| -rw-r--r-- | static/css/dark.css | 76 | ||||
| -rw-r--r-- | static/js/main.js | 18 |
4 files changed, 53 insertions, 54 deletions
diff --git a/layouts/index.html b/layouts/index.html index 936c872..4f4980f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html> +<html {{- if (eq .Site.Params.mode "dark") -}}class="dark"{{ end }}> {{ partial "header.html" . }} <body> <div class="container wrapper"> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 45b651e..c7b901c 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -27,12 +27,11 @@ {{- if isset .Site.Params "customcss" }} <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> {{ end }} - {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} - <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> - {{- if isset .Site.Params "customdarkcss" }} - <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> - {{- end }} - {{- end }} + + <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" /> + {{- if isset .Site.Params "customdarkcss" }} + <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" /> + {{- 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> diff --git a/static/css/dark.css b/static/css/dark.css index 6312c4b..1b4a2bd 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -1,66 +1,66 @@ -body { - color: #ddd; - background-color: #000; +html.dark body { + color: #ddd; + background-color: #000; } -::-moz-selection { - background: #9375fd; - color: #fff; - text-shadow: none +html.dark ::-moz-selection { + background: #9375fd; + color: #fff; + text-shadow: none } -::selection { - background: #9375fd; - color: #fff; - text-shadow: none +html.dark ::selection { + background: #9375fd; + color: #fff; + text-shadow: none } -hr { - border-color: #333; +html.dark hr { + border-color: #333; } -blockquote { - border-color: #ddd; +html.dark blockquote { + border-color: #ddd; } -h1,h2,h3,h4,h5,h6 { - color: #ddd; +html.dark h1,h2,h3,h4,h5,h6 { + color: #ddd; } -a,a:hover { - color: #9375fd; - text-decoration: none; +html.dark a,a:hover { + color: #9375fd; + text-decoration: none; } -table tbody tr:nth-of-type(even) { +html.dark table tbody tr:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.15); } -.site-description a, -.site-description a:hover { - color: #ddd; - text-decoration: underline; +html.dark .site-description a, +html.dark .site-description a:hover { + color: #ddd; + text-decoration: underline; } -a:hover { - opacity: 0.8; +html.dark a:hover { + opacity: 0.8; } -.post-tags .tags a { - border: 1px solid #ddd; - color: #ddd; +html.dark .post-tags .tags a { + border: 1px solid #ddd; + color: #ddd; } -.site-title a { - color: #ddd; - text-decoration: none !important; +html.dark .site-title a { + color: #ddd; + text-decoration: none !important; } -.header nav, -.footer { - border-color: #333; +html.dark .header nav, +html.dark .footer { + border-color: #333; } -.highlight { - background-color: #333; +html.dark .highlight { + background-color: #333; } diff --git a/static/js/main.js b/static/js/main.js index 14fc77b..113c9b6 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(){ var scheme = "light"; var savedScheme = localStorage.getItem("scheme"); - var darkScheme = document.getElementById("dark-scheme"); + var container = document.getElementsByTagName("html")[0]; var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; if (prefersDark) { @@ -16,30 +16,30 @@ document.addEventListener("DOMContentLoaded", function(){ } if(scheme == "dark") { - darkscheme(toggle, darkScheme); + darkscheme(toggle, container); } else { - lightscheme(toggle, darkScheme); + lightscheme(toggle, container); } toggle.addEventListener("click", () => { if (toggle.className === "light") { - darkscheme(toggle, darkScheme); + darkscheme(toggle, container); } else if (toggle.className === "dark") { - lightscheme(toggle, darkScheme); + lightscheme(toggle, container); } }); }); -function darkscheme(toggle, darkScheme) { +function darkscheme(toggle, container) { localStorage.setItem("scheme", "dark"); toggle.innerHTML = feather.icons.sun.toSvg(); toggle.className = "dark"; - darkScheme.disabled = false; + container.className = "dark"; } -function lightscheme(toggle, darkScheme) { +function lightscheme(toggle, container) { localStorage.setItem("scheme", "light"); toggle.innerHTML = feather.icons.moon.toSvg(); toggle.className = "light"; - darkScheme.disabled = true; + container.className = ""; } |