diff options
| author | lomion0815 <lomion@aon.at> | 2020-11-20 15:19:47 +0300 |
|---|---|---|
| committer | lomion0815 <lomion@aon.at> | 2020-11-20 15:19:47 +0300 |
| commit | 60c83a33f7cb0b1e314d4b9e639d1842d8421103 (patch) | |
| tree | e64e39bf4692e945bfab7bce5b27f78024bede63 /layouts | |
| parent | 944ec499586db5c716a923c8696249b40abb6e97 (diff) | |
By default the dark theme was rendered. After the complete page was loaded the theme was switched according the stored value. This cause a flicker (background was first black for a second (until the page was completely loaded) and then turned white.
This commit moves the loading of the theme mode to the beginning (into the <head> section).
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/partials/head.html | 12 |
1 files changed, 11 insertions, 1 deletions
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 746961a..04677d5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -11,11 +11,21 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}index.xml" title="{{ .Site.Title }}"> <!-- Stylesheets --> -<link id="dark-mode-theme" rel="stylesheet" href="{{ .Site.BaseURL }}css/dark.css" /> <link rel="stylesheet" href="{{ .Site.BaseURL }}fontawesome/css/all.min.css" /> {{ range .Site.Params.customCSS }} <link rel="stylesheet" href="{{ . | absURL }}" /> {{ end }} +<link id="dark-mode-theme" rel="stylesheet" href="{{ .Site.BaseURL }}css/dark.css" /> +<!-- Load theme mode from browser cache --> +<script> + var darkTheme = document.getElementById("dark-mode-theme"); + var storedTheme = localStorage.getItem("dark-mode-storage"); + if ( storedTheme === "dark") { + darkTheme.disabled = false; + } else if (storedTheme === "light") { + darkTheme.disabled = true; + } +</script> <!-- script --> <script src="{{ .Site.BaseURL }}js/bundle.js"></script> <script src="{{ .Site.BaseURL }}js/instantpage.min.js" type="module" defer></script> |