From 292a8afde384c8ce887f41cc80b94d77b3514879 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Thu, 21 May 2020 17:43:09 +0000
Subject: [PATCH] Fixes issues with flickering in dark mode
---
/dev/null | 48 ----------------
assets/js/anatole-header.js | 54 ++++++++++++++++++
assets/css/style.css | 23 +++++--
layouts/partials/head.html | 4 +
layouts/partials/footer.html | 3
5 files changed, 73 insertions(+), 59 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 8cd46d0..9fd5a50 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -10,22 +10,25 @@
--nav-text-color:#5a5a5a;
--tag-color: #424242;
}
-html {
- background-color: var(--bg-color);
- -webkit-font-smoothing: antialiased;
-}
+
html[data-theme='dark'] {
- --bg-color:rgb(28, 28, 33);
+ --bg-color:#292a2d;
--secondary-bg-color:rgb(119, 119, 122);
- --heading-color:rgba(191, 191, 191, 0.5);
- --body-color: rgba(191, 191, 191, 0.5);
+ --heading-color: rgb(169,169,179);
+ --body-color:rgb(169,169,179);
--post-color: rgba(0, 0, 0, 0.44);
--border-color: rgb(38, 38, 38);
- --pre-bg-color: #21212d;
+ --pre-bg-color:rgb(33,33,45);
--nav-text-color:rgb(191, 191, 191);
--tag-color: rgb(191, 191, 191) !important;
}
+
+html {
+ background-color: var(--bg-color);
+ -webkit-font-smoothing: antialiased;
+}
+
body {
color: var(--body-color);
font-family: 'Verdana', sans-serif;
@@ -121,6 +124,7 @@
}
100% {
opacity: 1;
+ background-color: var(--bg-color);
-webkit-transform: translateY(0);
}
}
@@ -131,6 +135,7 @@
}
100% {
opacity: 1;
+ background-color: var(--bg-color);
-moz-transform: translateY(0);
}
}
@@ -141,6 +146,7 @@
}
100% {
opacity: 1;
+ background-color: var(--bg-color);
-o-transform: translateY(0);
}
}
@@ -151,6 +157,7 @@
}
100% {
opacity: 1;
+ background-color: var(--bg-color);
transform: translateY(0);
}
}
diff --git a/assets/js/anatole-header.js b/assets/js/anatole-header.js
new file mode 100644
index 0000000..4ac9946
--- /dev/null
+++ b/assets/js/anatole-header.js
@@ -0,0 +1,54 @@
+// initialize default value
+function getTheme(){
+ return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+}
+
+function setTheme(style){
+ document.documentElement.setAttribute('data-theme', style);
+ localStorage.setItem('theme', style);
+}
+
+function init(){
+ // initialize default value
+ var theme = getTheme();
+
+ // check if a prefered color theme is set for users that have never been to our site
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ if (theme === null) {
+ if(userPrefersDark){
+ setTheme('dark');
+ }
+ else{
+ setTheme('light');
+ }
+ }
+ else {
+ console.log(theme);
+ // load a stored theme
+ if (theme == 'light') {
+ document.documentElement.setAttribute('data-theme', 'light');
+ }
+ else {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ }
+ }
+}
+
+
+// switch themes
+function switchTheme(e) {
+ var theme = getTheme();
+ if (theme == 'light') {
+ setTheme('dark');
+ }
+ else {
+ setTheme('light');
+ }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ themeSwitcher = document.querySelector('.theme-switch');
+ themeSwitcher.addEventListener('click', switchTheme, false);
+}, false);
+
+init();
diff --git a/assets/js/anatole.js b/assets/js/anatole.js
deleted file mode 100644
index e7859fd..0000000
--- a/assets/js/anatole.js
+++ /dev/null
@@ -1,48 +0,0 @@
-const themeSwitcher = document.querySelector('.theme-switch');
-
-function getTheme(){
- return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-}
-
-function setTheme(style){
- document.documentElement.setAttribute('data-theme', style);
- localStorage.setItem('theme', style);
-}
-
-// switch themes
-function switchTheme(e) {
- var theme = getTheme();
- if (theme == 'light') {
- setTheme('dark');
- }
- else {
- setTheme('light');
- }
-}
-
-// initialize default value
-var theme = getTheme();
-
-// check if a prefered color theme is set for users that have never been to our site
-const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-if (theme === null) {
- if(userPrefersDark){
- setTheme('dark');
- }
- else{
- setTheme('light');
- }
-}
-else {
- // load a stored theme
- if (theme == 'light') {
- document.documentElement.setAttribute('data-theme', 'light');
- }
- else {
- document.documentElement.setAttribute('data-theme', 'dark');
- }
-}
-
-
-themeSwitcher.addEventListener('click', switchTheme, false);
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 36b2a41..7e996f5 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,8 +6,7 @@
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{ $migrate := resources.Get "js/jquery-migrate.js" }}
{{ $appear := resources.Get "js/jquery-appear.js" }}
-{{ $anatole := resources.Get "js/anatole.js" }}
-{{ $js := slice $migrate $appear $anatole | resources.Concat "js/bundle.js" }}
+{{ $js := slice $migrate $appear | resources.Concat "js/bundle.js" }}
{{ $secureJS := $js | resources.Minify | resources.Fingerprint }}
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
{{- partial "medium-zoom.html" . -}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e04cd6e..7ee5677 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -17,6 +17,8 @@
<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | absURL }}favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | absURL }}favicon-16x16.png">
-
<link rel="canonical" href="{{ .Permalink }}">
+ {{ $anatole := resources.Get "js/anatole-header.js" }}
+ {{ $secureJS := $anatole | resources.Minify | resources.Fingerprint }}
+ <script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
</head>
\ No newline at end of file
--
Gitblit v1.10.0