Skip to content

Conversation

@adamab48
Copy link
Contributor

Move Custom CSS to End of <body> for Correct Load Order

Problem
Custom CSS variables ({{ .htmlVars.customCSS }} and {{ .htmlVars.userSelectedTheme }}) were loaded in the <head>. As a result, they could be overridden by bundled CSS loaded later via Vite’s module script.

Solution
The custom CSS <style> block was moved to the end of the <body>, after the Vite script tag. This guarantees that custom styles load last and take precedence without relying on !important.

Changes

  • Removed custom CSS variables from the <head> style block
  • Added a new <style> block at the end of <body> containing the custom CSS variables

Benefits

  • Custom user styles reliably override bundled styles
  • Eliminates the need for !important in custom CSS
  • Results in a cleaner and more predictable CSS cascade

Thanks for taking the time to review the PR !

@gtsteffaniak gtsteffaniak merged commit cb2d4dc into gtsteffaniak:main Dec 20, 2025
27 of 28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants