skeleton
skeleton copied to clipboard
skeletonlabs
Move `data-theme` from `body` tag to `html` tag
Describe the feature in detail (code, mocks, or screenshots encouraged)
Let's say I want to build a static website (no server) for my blog and I'd like the users to be able to swtich theme.
Skeleton currently has it's theme defined through a data attr on the body tag. This means we can simply swap out the data-theme attribute and see a theme switch. All goes well and it works perfectly.
Now I want to persist the theme change in localStorage.
Ofcourse because we don't want a flash of unstyled/wrongly styled content we need to load the theme before the body element loads. So we do localStorage.getItem('theme'); we get the theme and then we need to set it on the body element.
Uh oh, the body element hasn't loaded yet! We now need to wait for the body element to load with the wrong theme, and then change it to the theme.
current:
<html>
<head>
<script>
const theme = localStorage.getItem('theme');
document.body <-- undefined
</script>
</head>
<body data-theme="...">...</body>
</html>
proposed:
<html data-theme="...">
<head>
<script>
const theme = localStorage.getItem('theme');
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body>...</body>
</html>
You can see in the body version it's impossible to set the theme beforehand, however, when moving the data-attribute to html we can determine and set the theme before the body is loaded.
What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
No response
