Browse Source

Fix dark theme switching by adding dark class to html tag

main
Ilija Eftimov 2 years ago
parent
commit
8739bbc868
4 changed files with 53 additions and 54 deletions
  1. +1
    -1
      layouts/index.html
  2. +5
    -6
      layouts/partials/header.html
  3. +38
    -38
      static/css/dark.css
  4. +9
    -9
      static/js/main.js

+ 1
- 1
layouts/index.html View File

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


+ 5
- 6
layouts/partials/header.html View File

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


+ 38
- 38
static/css/dark.css View File

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

+ 9
- 9
static/js/main.js View File

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

Loading…
Cancel
Save