From ca3da0eccdf6191d39ba6b90058b48b98cabd34d Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Mon, 20 Apr 2026 10:20:18 +0200
Subject: [PATCH] fix: system theme selection immediately applies OS preference
 instead of reverting to light

---
 CHANGELOG.md             | 5 +++++
 package-lock.json        | 4 ++--
 package.json             | 2 +-
 public/pages/settings.js | 3 ++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39d0183..c50a398 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.20.27] - 2026-04-20
+
+### Fixed
+- Selecting "System" theme in settings now immediately applies the OS dark/light preference instead of reverting to light mode until the next page reload
+
 ## [0.20.26] - 2026-04-20
 
 ### Added
diff --git a/package-lock.json b/package-lock.json
index f7bc815..9d28d66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "oikos",
-  "version": "0.20.26",
+  "version": "0.20.27",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "oikos",
-      "version": "0.20.26",
+      "version": "0.20.27",
       "license": "MIT",
       "dependencies": {
         "bcrypt": "^6.0.0",
diff --git a/package.json b/package.json
index 3d5cd32..fe246fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oikos",
-  "version": "0.20.26",
+  "version": "0.20.27",
   "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
   "main": "server/index.js",
   "type": "module",
diff --git a/public/pages/settings.js b/public/pages/settings.js
index 5d840e3..d561448 100644
--- a/public/pages/settings.js
+++ b/public/pages/settings.js
@@ -854,7 +854,8 @@ function applyTheme(value) {
   if (value === 'light' || value === 'dark') {
     document.documentElement.setAttribute('data-theme', value);
   } else {
-    document.documentElement.removeAttribute('data-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
   }
 }