From e832b633c0b447c79856cd900c3d02eb166a4174 Mon Sep 17 00:00:00 2001
From: circl <circl.lastname@gmail.com>
Date: Wed, 28 Jan 2026 19:54:10 +0100
Subject: [PATCH] Fix dark mode styling on first load if dark mode is system
 preference

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.
---
 assets/sass/front-page.scss | 12 ++++++++++++
 assets/sass/layout.scss     |  5 +++++
 2 files changed, 17 insertions(+)

diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss
index 78d3ba3eee..bc4225ca08 100644
--- a/assets/sass/front-page.scss
+++ b/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;
 
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index c6b8485463..1b1d38e279 100644
--- a/assets/sass/layout.scss
+++ b/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);
+        }
+      }
     }