Search code examples
htmlcsstailwind-csssveltesveltekit

Change background color of HTML element if in Tailwind dark mode in Svelte

Here is my website: https://personal-website-1ss.pages.dev/ If you go to the bottom of the page you can see the margin at the bottom is still white even in dark mode. This can be changed when you change the background color of the html tag. The html tag is only available in src/app.html which does not know if my site is in dark mode or not and I need a way to change the background color of the html tag through src/routes/index.svelte or src/app.ts. Here is the github: https://github.com/CloudyWhale/personal-website

This issue has been fixed but here is a drawing of what was happening

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
(there was a margin here and it was causing a white background at the bottom)
Solution

  • You could just avoid the margin; there are multiple options.

    • Use a padding instead of margin on #fw-container.
    • Prevent margin collapse from happening by setting e.g. a 1px padding-bottom on the main element.

    You could also use a global style and just change the color that way.

    :root {
  --bg: theme(...);
}
:root.dark {
  --bg: theme(...);
}

html {
  background-color: var(--bg);
}

    See this question about accessing tailwind colors in CSS.