Comments (5)
Worth to note;
Manually including
<svelte:head>{@html '<script>(' + setInitialClassState.toString() + ')();</script>'}</svelte:head>
in +layout.svelte
solves the issue at the expense of having the JS included twice (once with weird script tag and once correctly here)
//EDIT: Scratch that, it's non-deterministic - sometimes it works sometimes it doesnt.
//EDIT2:
Placing (function Gn(){const e=document.documentElement.classList,t=localStorage.getItem("modeUserPrefers")==="false",n=!("modeUserPrefers"in localStorage),r=window.matchMedia("(prefers-color-scheme: dark)").matches;t||n&&r?e.add("dark"):e.remove("dark")})();
into the OnMount will actually solve it.
Seems like a race-condition somewhere?
from skeleton.
@f0o can you share a few more details about your project config. Specifically:
- What adapter are you using?
- How is the app being deployed? (static to AWS S3, via Vercel, etc)
- Are using using the
selector
(akaclass
) or media (aka "OS") strategy for your app?
For example, under normal circumstances when using the default auto-adapter you should not need to insert the extra script tag in the page header.
We also provide this note when using the Lightswitch with the class-based strategy approach:
...Please note the Lightswitch component must be present on page load in order to operate. For best results, insert this in a fixed element that appears on every page.
So if the ilghtswitch is not part of the normal DOM tree on page load, then it can cause behavior similar to what you're reporting. For the Skeleton documentation site for example, this is part of the header. Even though it is "hidden" within a popup menu, but that menu is just visibly hidden, not removed from the DOM.
from skeleton.
I can't speak for f0o but I'm experiencing the same issue. I'm using the adapter-static
package but experience the same issue with adapter-auto
. I'm running locally with pnpm run dev
, using the class
strategy.
I've copied the AppBar code straight from the Skeleton site so the LightSwitch should be in the DOM.
I can see the <script>
tag in the head
but it doesn't appear to be running - if I manually execute the code then it works as expected.
from skeleton.
I've had success removing the svelte:head
tags and moving the call to setInitialClassState()
into the onMount
block on line 66
from skeleton.
I've entirely forgotten about this bugreport; terribly sorry about it.
I'm also using adapter-static but without SSR and the class selector.
That being said; I've been running it with my OnMount workaround since I opened the bugreport and although hacky it seems to be stable across all browsers.
from skeleton.
Related Issues (20)
- Interactive Visualization of Style Props
- NEXT projects - dependency updates
- Update docs tabs with Skeleton-Next React Tabs HOT 1
- Svelte: popup is not defined on input element (Autocomplete) HOT 1
- v2 CLI: themes are dropped into the `/lib` directory instead of project root HOT 1
- Drawer Improvements HOT 2
- v2 doc feature deprecation warnings
- Multiple typos in the autocomplete component documentation
- Tailwind PurgeCSS Config - Highlight.js - Incorrectly Typed (Docs/Installation) HOT 3
- tw-plugin v0.4.0 removing tailwind class definitions HOT 15
- Issue with breadcrums with 3 entries or more HOT 1
- Button and Form Element Size Normalization
- Add view transitions when switching themes
- v2 Avatar Additions
- v2 Stackblitz dependency updates HOT 1
- Add style prop to TreeViewItem to allow control of content's width HOT 3
- Resolve a11y warnings in multiple components HOT 3
- Chore: Update LICENSE year
- Skeleton v2 migration to Svelte 5 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.