fix unnoticeable background color bug in dark mode

components/Layout/Layout.module.css

@@ -1,10 +1,12 @@
-.main {
+.flex {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.default {
   width: 100%;
   padding: 1.5em;
-  color: var(--text);
-  background-color: var(--background-inner);
-  /* light-dark theme switch fading */
-  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }
 
 .container {
@@ -13,6 +15,11 @@
   display: block;
 }
 
+/* footer needs to fill the remaining vertical screen space. doing it here to keep flex stuff together. */
+.footer {
+  flex: 1;
+}
+
 @media screen and (max-width: 768px) {
   .main {
     padding: 1.25em;

components/Layout/Layout.tsx

@@ -4,16 +4,16 @@ import classNames from "classnames";
 import Header from "../Header/Header";
 import Footer from "../Footer/Footer";
 import { themeColors } from "../../lib/config";
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, HTMLAttributes } from "react";
 
 import styles from "./Layout.module.css";
 
-type Props = PropsWithChildren<{
-  noContainer?: boolean; // pass true to disable default `<main>` container styles with padding, etc.
-  className?: string;
-}>;
+type Props = HTMLAttributes<HTMLDivElement> &
+  PropsWithChildren<{
+    noContainer?: boolean; // pass true to disable default `<main>` container styles with padding, etc.
+  }>;
 
-const Layout = ({ noContainer, className, children }: Props) => {
+const Layout = ({ noContainer, className, children, ...rest }: Props) => {
   const { resolvedTheme } = useTheme();
 
   return (
@@ -24,17 +24,20 @@ const Layout = ({ noContainer, className, children }: Props) => {
         </Head>
       )}
 
-      <Header />
+      <div className={classNames(styles.flex, className)} {...rest}>
+        <Header />
 
-      {noContainer ? (
-        <main className={className}>{children}</main>
-      ) : (
-        <main className={classNames(styles.main, className)}>
-          <div className={styles.container}>{children}</div>
-        </main>
-      )}
+        {/* passing `noContainer={true}` to Layout allows 100% control of the content area on a per-page basis */}
+        {noContainer ? (
+          <>{children}</>
+        ) : (
+          <main className={styles.default}>
+            <div className={styles.container}>{children}</div>
+          </main>
+        )}
 
-      <Footer />
+        <Footer className={styles.footer} />
+      </div>
     </>
   );
 };