Fix dark mode styling on first load if dark mode is system preference (#2128)

## Changes

- Add missing CSS rules in front-page.scss and layout.scss for dark mode
styling in situations as described below

## Context

Previously, these three elements only checked for data-theme="dark",
which is not set if the page is first loaded and dark mode is the system
default.

## Before
<img width="980" height="905" alt="Screenshot_20260128_195213"
src="https://github.com/user-attachments/assets/db223208-61e7-4eba-b1c6-91d63d09b6ee"
/>

## After
<img width="980" height="905" alt="Screenshot_20260128_195207"
src="https://github.com/user-attachments/assets/b392c26e-5ceb-4e6b-988c-18d725ac0d99"
/>

Author: dscho

assets/sass/front-page.scss

@@ -53,6 +53,12 @@
         filter: invert(1);
         background-color: #9d9c9a;
       }
+      @media screen and (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) & {
+          filter: invert(1);
+          background-color: #9d9c9a;
+        }
+      }
     }
 
     h3 {
@@ -112,6 +118,12 @@
     :root[data-theme="dark"] & {
       outline-color: var(--orange);
     }
+    @media screen and (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) & {
+        outline-color: var(--orange);
+      }
+    }
+
     border-radius: 4px;
     position: relative;
 

assets/sass/layout.scss

@@ -113,6 +113,11 @@ aside {
       :root[data-theme="dark"] & {
         filter: invert(1);
       }
+      @media screen and (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) & {
+          filter: invert(1);
+        }
+      }
     }