Fixes issues with flickering in dark mode

Alexander Bilz

21.43.2020 292a8afde384c8ce887f41cc80b94d77b3514879

Fixes issues with flickering in dark mode

closes #14

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

 assets/js/anatole-header.js

New file
@@ -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();

 assets/js/anatole.js

File was deleted

 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" . -}}

 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>