Adjust the HTML element's background color based on whether Svelte is in Tailwind dark mode

Visit my personal website at . If you scroll to the bottom of the page, you'll notice that the margin remains white even in dark mode. To fix this issue, I needed to change the background color of the html tag. However, the html tag is only accessible in src/app.html and doesn't know if my site is in dark mode or not. I had to find a way to update the background color of the html tag through src/routes/index.svelte or src/app.ts. For more details, view the code on GitHub: https://github.com/CloudyWhale/personal-website

The issue has been resolved, but here's an illustration of what was happening:

⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛
⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
(at one point, there was a margin causing a white background at the bottom)
htmlcsstailwind-csssveltesveltekit

Answer №1

To eliminate the need for margin, consider exploring various alternatives.

  • Replace margin with padding on #fw-container.
  • Avoid margin collapse by adding a 1px padding-bottom to the main element.

An alternative approach is to utilize a global style and modify the color in that manner.

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

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

Refer to this question for information on utilizing tailwind colors in CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

htmlcss

"Troubleshooting problems with jQuery click function during real-time search execution

In my code, I have an empty result div that dynamically fills up with item elements as search queries are entered (using jQuery ajax). If I use the following code: $(".result").click(function(){ alrert("click on whole result class captured") }); I r ...

jqueryhtml

What would cause this to result in a blank array?

I have a main component that contains multiple sub-components, which I navigate between by clicking on different elements. These sub-components are all Vue files. What I am trying to achieve is to dynamically highlight the active component when it is bein ...

javascripthtmlcssvue.js

Struggles with conflicting versions of Jquery within asp.net

Here is a snippet of my jQuery function: $(window).scroll(function () { if ($(window).scrollTop() > offset.top) { $("#sidebar").css("marginTop", $(window).scrollTop.length - offset.top); $("#sidebar").css({ o ...

jqueryasp.nethtml

I am looking for a way to display or conceal text depending on the presence of an image

Could you please help me with this? I am looking for a solution where text is displayed only when there is content in the src attribute of an img tag. Essentially, I need JavaScript code that can identify if an attribute has content and then make a paragra ...

javascriptjqueryhtml

Interactive iframe material using $_POST variables

Working with PHP has always posed a challenge for me. Typically, I navigate through by searching and trial and error, but this time I'm stuck. Currently, I'm developing a project that allows users to order services online. The ordering module is ...

phphtmlpostiframe

What is the best way to make a vertical line using the CSS code provided in the link?

Check out this cool horizontal line design I found on stackoverflow: Click here for CSS code to create the line I really like the look of the line. Here's how I implemented it on my website: hr.fancy-line { border: 0; height: 5px; } hr ...

javascriptjqueryhtmlcss

What is the method for manually setting the page_source in Python3 using Selenium?

Currently, I am developing an application utilizing selenium. My understanding is that the webdriver.Firefox's get method can be used to retrieve a webpage in the following manner: driver = webdriver.Firefox(executable_path=r'geckodriver&apo ...

pythonhtmlselenium

The Div element refuses to budge from its current position on the page's layout

$("#pg2_main_display_div ").css({ top: -$("#pg2_main_display_div").offset().top }); The value generated by -$("#pg2_main_display_div").offset().top is currently -1033. Unfortunately, this code does not seem to be functioning properly as the content ...

javascriptjqueryhtml

Turning multiple .html files into a single csv using beautifulsoup

I am dealing with a situation where I have 13,000 html files stored in a folder and my goal is to consolidate all the data into a single csv file. Although I believe I have made progress in extracting the data, I am encountering challenges when it comes t ...

pythonhtmlcsvbeautifulsoup

Guide to using the DOM inspector tool with a RAW HTML document

Utilizing PHP Simple HTML DOM Parser, I periodically extract information from various websites. I rely on Chrome's DOM inspector to analyze how to retrieve the desired data. An issue arose when one website (specifically TPB) had improper HTML code th ...

phphtmlgoogle-chromedomweb-scraping

Placing HTML elements inside of the <code> tag is a common practice

After spending years working on backend technologies like PHP and C#, I am now diving back into front-end development. To enhance my understanding of Bootstrap, I am creating my own local reference page where I can easily access the widgets generated to di ...

html

Is there a way for me to retrieve the input text value and display it in my modal window?

When using jQuery, I want my text field to appear in my modal. The code seems to work fine when I check the checkbox, but nothing shows up when I try to use the text field. How can I resolve this issue? Body <body> <div id="hasildetail" clas ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Using jQuery to trigger a click event on an image and display a hidden div

Currently, I am working on creating an image slice show to showcase various product images. The idea is to have smaller thumbnails that when clicked, will display a larger image in a different section. The default view will be the big image of img1. In a ...

jqueryhtmlcssonclick

Is it feasible to integrate HTML (UIWebView) with Cocos2d-x?

As I dive into experimenting with cocos2d-x, I've successfully built and run the Javascript samples for Android within a browser. Now, as someone with a background in HTML, I'm eager to create my own game using HTML tags and CSS instead of relyi ...

androidhtmluiwebviewcocos2d-x

Can HTML text areas be designed to adjust their width automatically, as well as their height?

Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...

javascripthtmlcsstextarea

Ways to cycle through various selectors

I'm in the process of developing a form that allows users to assign properties to multiple files before importing them into my database. It's crucial for me to know the source and sport associated with each file before proceeding with the import. ...

javascripthtmlangularselector

What is the best way to add input fields to a dark-themed Rails 7 application using CSS?

I am currently using Rails 7 and have implemented a simple dark mode toggle feature with CSS by following this helpful guide: However, I am facing an issue where my input fields (such as text fields and text areas) do not change to a dark mode background, ...

htmlcssruby-on-rails

CSS - Issue with a blurred div nested inside another blurred div

I'm facing an issue where I can't have a blurred element inside another blurred element. Currently, I have a header with backdrop-filter: blur(3px); and a div within it with a more intense background blur of backdrop-filter: blur(50px);. However, ...

javascripthtmlcss

What is the best way to ensure that a block level element with a fixed or absolute position stays within the bounds of the page and automatically adjusts if the edges start to

In my current project, I am working on adding a new feature to the existing page. The challenge is to include an element that will be displayed above or below a button, which will serve as a toggle to open or close it. This element needs to be triggered by ...

javascriptjqueryhtmlcssdom