syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #140 from Mitrichius/remove-flash-dark-theme/#139

Browse Source 
Remove flash for dark theme on loading
This commit is contained in:
Dmitry Kolosov 2022-02-18 14:44:32 +03:00 committed by GitHub
commit ed55969059
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
layouts/partials/head.html
View File

@ -16,6 +16,23 @@
{{ end -}}
{{ partial "favicons.html" . }}
<style>
body {
visibility: hidden;
opacity: 0;
}
</style>
<noscript>
<style>
body {
visibility: visible;
opacity: 1;
}
</style>
</noscript>
{{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/main.css") }}
{{ if .Site.Params.copyCodeButton | default true }}

114
layouts/partials/theme-switcher.html
View File

@ -7,67 +7,79 @@
<button class="theme-switcher">
{{ i18n "darkTheme" }}
</button>
{{ end }}
<script>
const STORAGE_KEY = 'user-color-scheme'
const defaultTheme = {{ $style }}
<script>
const STORAGE_KEY = 'user-color-scheme'
const defaultTheme = {{ $style }}
let currentTheme
let switchButton
let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
let currentTheme
let switchButton
let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
changeButtonText()
const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme)
changeButtonText()
}
document.addEventListener('DOMContentLoaded', function() {
switchButton = document.querySelector('.theme-switcher')
currentTheme = detectCurrentScheme()
if (currentTheme == 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
}
if (currentTheme == 'auto') {
autoChangeScheme(autoDefinedScheme);
autoDefinedScheme.addListener(autoChangeScheme);
}
document.addEventListener('DOMContentLoaded', function() {
switchButton = document.querySelector('.theme-switcher')
currentTheme = detectCurrentScheme()
if (currentTheme == 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
}
if (currentTheme == 'auto') {
autoChangeScheme(autoDefinedScheme);
autoDefinedScheme.addListener(autoChangeScheme);
}
if (switchButton) {
changeButtonText()
switchButton.addEventListener('click', switchTheme, false)
})
function detectCurrentScheme() {
if (localStorage.getItem(STORAGE_KEY)) {
return localStorage.getItem(STORAGE_KEY)
}
if (defaultTheme) {
return defaultTheme
}
if (!window.matchMedia) {
return 'light'
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'
}
return 'light'
}
showContent()
})
function changeButtonText()
{
function detectCurrentScheme() {
if (localStorage.getItem(STORAGE_KEY)) {
return localStorage.getItem(STORAGE_KEY)
}
if (defaultTheme) {
return defaultTheme
}
if (!window.matchMedia) {
return 'light'
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'
}
return 'light'
}
function changeButtonText(switchButton)
{
if (switchButton) {
switchButton.textContent = currentTheme == 'dark' ? {{ i18n "lightTheme" }} : {{ i18n "darkTheme" }}
}
}
function switchTheme(e) {
if (currentTheme == 'dark') {
localStorage.setItem(STORAGE_KEY, 'light')
document.documentElement.setAttribute('data-theme', 'light')
currentTheme = 'light'
} else {
localStorage.setItem(STORAGE_KEY, 'dark')
document.documentElement.setAttribute('data-theme', 'dark')
currentTheme = 'dark'
}
changeButtonText()
function switchTheme(e) {
if (currentTheme == 'dark') {
localStorage.setItem(STORAGE_KEY, 'light')
document.documentElement.setAttribute('data-theme', 'light')
currentTheme = 'light'
} else {
localStorage.setItem(STORAGE_KEY, 'dark')
document.documentElement.setAttribute('data-theme', 'dark')
currentTheme = 'dark'
}
</script>
{{ end }}
changeButtonText()
}
function showContent() {
document.body.style.visibility = 'visible';
document.body.style.opacity = 1;
}
</script>