Tailwind 4 + DaisyUI 5 upgrade + light/dark theme switcher#8
Merged
Conversation
Toolchain: - tailwindcss 3 -> 4 (CSS-first config; no more tailwind.config.cjs) - daisyui 4 -> 5 - @astrojs/tailwind dropped in favour of @tailwindcss/vite (the integration is the deprecated path on Astro 5) - @tailwindcss/typography stays, registered via @plugin in CSS Theme config (src/styles/global.css): - Replaces the JS tailwind.config + daisyui plugin block. Tailwind + DaisyUI are configured purely in CSS via @import "tailwindcss"; @plugin "daisyui" {...} - Restricts themes to lofi + dark (was 'all themes'); cuts ~70 KB of unused theme CSS from the bundle - @custom-variant dark (...) exposes dark: utilities reactive to the daisyUI theme (not OS prefers-color-scheme) so any future dark: overrides match the user's actual choice Theme switcher: - BaseHead now ships an inline bootstrap script that runs before first paint: reads localStorage 'theme' (falls back to prefers-color-scheme), applies data-theme to <html>. No flash of wrong theme. - Exposes window.__toggleTheme() globally so a button anywhere on the page can flip themes. - Sidebar footer gets a sun/moon icon button next to the social icons. Click flips theme + persists to localStorage. CSS variants ([[data-theme='lofi']_&]:block, [[data-theme='dark']_&]:block) decide which icon shows, no JS needed for icon swapping. - BaseLayout keeps data-theme='lofi' as a no-JS fallback; the bootstrap script overrides before paint. astro:after-swap listener re-applies prefers-color-scheme only when the user has never picked a theme explicitly; otherwise data-theme survives the page swap since <html> isn't replaced by ClientRouter. Build + astro check both green.
✅ Deploy Preview for grand-croquembouche-1d568d ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 41d78e4d2f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Netlify default is Node 18.20.8, which ships an npm version with bug npm/cli#4828: optional dependencies sometimes don't resolve cross-platform when the lockfile was generated on a different OS, leaving the build unable to find @tailwindcss/oxide-linux-x64-gnu. Fix: - .nvmrc: 22 (matches GH Actions CI Node version) - netlify.toml: NODE_VERSION=22, NPM_CONFIG_INCLUDE_OPTIONAL=true, explicit 'npm install --include=optional' before build (instead of relying on Netlify's default npm ci, which is strict to the lockfile and won't fetch missing platform binaries).
Codex review (P2) caught that the original bootstrap wrote
localStorage.theme during every initial apply(resolve()), even when
the visitor had not chosen a theme. That froze the very first
OS-derived value into storage, defeating the intended auto-follow
behaviour and making the astro:after-swap re-evaluation dead code.
Refactor splits apply (DOM only) from persist (localStorage). Only
the toggle-button click path persists, so visitors who never click
keep following their OS forever, including across OS theme changes.
Also drops the astro:after-swap branch in favour of a
matchMedia('(prefers-color-scheme)').addEventListener('change')
listener that fires whenever the OS theme actually flips. Cleaner
and reacts in real time rather than only on navigation.
Theme toggle: - New ThemeToggle.astro: fixed top-4 right-4, z-50, size-12 (48px) btn-circle with translucent bg-base-100/70 + backdrop-blur + border + shadow so it floats clearly over content without dominating - Mounted in BaseLayout (outside the drawer container) so it appears on every page; removed from SideBarFooter - Bigger icon (size-6, was 24px) plus larger button hit-area DaisyUI 5 menu fix: - Sidebar nav items (Home, CV, Travel, Contact) rendered narrower than the sidebar after the v5 upgrade because v5 menu items size to content by default. Added w-full to the ul, every li, and every a so the nav items fill the sidebar width as they did under v4.
…e survives navigation Bug: with ClientRouter, navigating from one page to another caused the theme to flash back to lofi even when the user had loaded the site in dark mode. Reason: every page ships with <html data-theme="lofi"> as the no-JS fallback, and Astro's View Transitions overwrite live <html> attributes with the incoming document's attributes during a swap. The bootstrap script that initially picked dark only runs on first load, so the live data-theme="dark" got clobbered. Fix: a single astro:before-swap listener mutates the incoming document before it's swapped in, so the new page already has the right data-theme by the time the user sees it. No flash, no visible state change on click.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes the modernization story. Two coupled major bumps (Tailwind 3 to 4, DaisyUI 4 to 5, since DaisyUI 5 requires Tailwind 4) plus a light/dark theme toggle in the sidebar.
Toolchain
tailwindcssdaisyui@astrojs/tailwind(deprecated on Astro 5)@tailwindcss/vitetailwind.config.cjs(JS)src/styles/global.css(@plugin)Tailwind 4's CSS-first config replaces the JS config file. DaisyUI 5 is configured via
@plugin "daisyui" {...}inside the same CSS file.Theme set narrowed from 'all daisyUI themes' to just
lofianddark; that alone cuts ~70 KB of unused theme CSS from the bundle.Theme switcher
BaseHeadruns before first paint. ReadslocalStorage.themeif set, otherwiseprefers-color-scheme. Appliesdata-themeto<html>immediately.window.__toggleTheme()(exposed by the bootstrap) which flips betweenlofianddarkand persists the choice.[[data-theme='lofi']_&]:block/[[data-theme='dark']_&]:blockshow the correct icon for the active theme.<html>is preserved across page swaps sodata-themesurvives navigation. Theastro:after-swaplistener only re-evaluates if the user has never explicitly chosen a theme (in case their OS theme flipped mid-session).<html data-theme="lofi">is still hardcoded so the site renders in light mode even with JS disabled.Verified
npm run build-> 8 pages, sitemap, FAQ schema still in /cvnpx astro check-> 0 errorsWhat's likely to need eyeballing
DaisyUI 5 occasionally tweaks component visuals subtly (button padding, badge border-radius, etc). I didn't see anything obvious in the build but a click-through is worth doing once it's live preview.