novacbn / kahi-ui

Straight-forward Svelte UI for the Web
https://kahi-ui.nbn.dev
MIT License
187 stars 5 forks source link

Darkmode store works (and stop working) unexpectedly #120

Closed demetrius-mp closed 2 years ago

demetrius-mp commented 2 years ago

Describe the Bug

I was trying out the components, and when i tried the darkmode store, it was very weird. When i first open the page that is importing darkmode, it returns a 505, with the message readable is not defined. Sometimes after a refresh it worked, but it is not always. Also, if i clicked on an anchor tag with href="#", it worked properly. I noticed as well that if i import the darkmode and use its store while the server is running in dev mode, it works just fine, but as soon as i refresh, it returns the same 505 message.

Reproduction

i actually created a branch on my repo that reproduces the problem: here. You can check the last commit to see what i added to the code that caused the problem. To see the issue, start the development server, and open localhost:3000, it should have a 505 message, but if you click on the Svelte Blogger heading on the navbar, it should work properly. Notice this is a sveltekit project.

System Info

System:
    OS: Linux 5.15 Pop!_OS 21.10
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 8.83 GB / 15.54 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 96.0

Additional Context

No response

novacbn commented 2 years ago

Fixed with 0.5.6, please upgrade w/ npm install @kahi-ui/framework@0.5.6.

Since you can't edit DOM or detect user preferences on server, darkmode shortcuts to readable(false) during SSR. Hence why it only worked some of the time for you.

demetrius-mp commented 2 years ago

Works fine now! Thanks.