search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.92k stars 1.53k forks source link

[BUG] - Navbar component doesn't hold dark mode after refresh #2221

Open tayloraucoin opened 10 months ago

tayloraucoin commented 10 months ago

NextUI Version

2.2.9

Describe the bug

After refreshing the dark mode state is not recognized by the Navbar component. I tried a few methods to resolve this but ultimately it is not initializing internally.

Setting as className manually does not affect change. However, that method does work fine for the Links/Buttons children.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. Render Navbar component with the theme feature applied.
  2. Set to dark mode and refresh.

I tried using your requested stackblitz, but for some reason the styles are not applying. The logic is there and ready though. https://stackblitz.com/edit/stackblitz-starters-tfk48e?file=tailwind.config.ts

Expected behavior

The dark mode style for Navbar should persist through the refresh.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/10913613/94e937d4-9bc3-43ff-b23a-e3

Screen Shot 2024-01-09 at 2 21 02 PM

5abf242664

Screen Shot 2024-01-09 at 2 16 27 PM Screen Shot 2024-01-09 at 2 16 43 PM Screen Shot 2024-01-09 at 2 16 50 PM

Operating System Version

macOS

Browser

Chrome

kght6123 commented 9 months ago

@tayloraucoin When I try to open the stackblitz.com link and check it, I get the error below.

~/projects/stackblitz-starters-tfk48e 25s
❯ yarn install && npx next dev
yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock. json.
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.18s.
[callSiteLocation@
depd@
880@
__nccwpck_require__@
701@
__nccwpck_require__@
@
@
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:14872
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:15558
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13457
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:10539
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13780
@
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:14872
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:15558
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13457
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:10539
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13780
@
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:14872
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:15558
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13457
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:10539
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13780
@
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:14872
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:15558
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:13457
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:54:10539
executeUserEntryPoint@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:125:736
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:318:173
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:318:186
_0x3b80be@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:350:55449
_0x54c274@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:352:101240
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:352:615020
@https://stackblitzstarterstfk48e-r0is.w-corp.staticblitz.com/blitz.babcaeac.js:371:1323]

If possible, could you share it in another way, such as GitHub's Public Repository?

Also, the video URL is cut off in the middle, and the correct URL is as follows. https://github.com/nextui-org/nextui/assets/10913613/94e937d4-9bc3-43ff-b23a-e35abf242664