Dark mode shows a white footer on the pages that is too short from the browser window

[zavocc]

Describe the bug
When dark mode is set, there are instances where a white footer will show when the page content is too short to fit into the browser window size or in portrait orientation

Happens to both Chromium and Firefox.

To Reproduce
Steps to reproduce the behavior:

• Toggle dark mode

Simply zooming out of this page should be enough to reproduce this behavior once the page is beyond scrollable - https://hugo-profile.netlify.app/blogs/, and zooming in that would fit into the browser window size doesn't show the white footer regardless if I scrolled down at the bottom of the page

Or create a blog that is empty or doesn't have much content and present it on maximized or larger browser window size to maximum beyond the length of the page content, such as:

---
title: "Welcome to My First Post"
date: 2024-04-05T17:30:01+08:00
draft: false
author: geraldo
tags: ["blogs", "misc"]
#image:
description: My first blog for this site!
toc: false
socialShare: false
---
## Hello world!
This is my first blog written using [Hugo](https://gohugo.io) with [hugo-profile theme](https://themes.gohugo.io/themes/hugo-profile/)

Then display this page in portrait orientation or maximized with 100% zoom

Expected behavior
Regardless, it should not show a white footer of a page when it is set to dark mode when the length of the page is too short.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox, Microsoft Edge
• Version: [Firefox: 124.0.2, Edge: 123.0.2420.97]

Smartphone (please complete the following information):

• Device: OPPO A5 2020
• OS: Android 11
• Browser: Firefox
• Version: (same as desktop)

Additional context
NA