js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #291 from shoelace-style/konnorrogers/set-a-default-theme

Browse Source 
Fix FOUC for default theme
This commit is contained in:
Cory LaViska
2024-12-10 11:15:54 -05:00
committed by GitHub
parent 5393a86e2b b1c459c226
commit c88a2c788d
1 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_includes/base.njk
View File

@@ -31,7 +31,7 @@
{# Web Awesome #}
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
<link rel="stylesheet" id="theme-stylesheet" />
<link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
<link rel="stylesheet" href="/dist/themes/applied.css" />
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
@@ -58,10 +58,24 @@
return colorScheme === 'dark';
}
const stylesheet = document.getElementById("theme-stylesheet")
let preset = getPresetTheme()
const oldStylesheet = document.querySelector("#theme-stylesheet")
stylesheet.href = `/dist/themes/${preset}.css`
const newStylesheet = document.createElement("link")
let preset = getPresetTheme()
newStylesheet.href = `/dist/themes/${preset}.css`
newStylesheet.rel = "preload"
newStylesheet.as = "style"
document.head.append(newStylesheet)
function updateStylesheet () {
newStylesheet.rel = "stylesheet"
newStylesheet.id = "theme-stylesheet"
requestAnimationFrame(() => oldStylesheet.remove())
}
newStylesheet.addEventListener("load", updateStylesheet)
document.documentElement.classList.toggle(
`wa-theme-${preset}-dark`,