From 9a1970d3b19092fd725c2ac5f7117cc240c7172a Mon Sep 17 00:00:00 2001
From: maxpozdeev <maxpozdeev@gmail.com>
Date: Mon, 9 Oct 2023 11:07:34 +0300
Subject: [PATCH] * use link media instead of js for auto and compulsory dark
 mode

---
 src/content/mytinytodo.js  | 2 +-
 src/content/theme/dark.css | 5 ++---
 src/includes/theme.php     | 4 +++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js
index a7cdc35..7b7952a 100644
--- a/src/content/mytinytodo.js
+++ b/src/content/mytinytodo.js
@@ -718,7 +718,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
             window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
               document.documentElement.setAttribute('data-system-appearance', e.matches ? 'dark' : 'light');
             });
-          }
+        }
 
         // Counter
         if (this.options.newTaskCounter) {
diff --git a/src/content/theme/dark.css b/src/content/theme/dark.css
index 05c6e31..6ad528e 100644
--- a/src/content/theme/dark.css
+++ b/src/content/theme/dark.css
@@ -5,9 +5,8 @@
 
 /* Dark mode */
 
-/* prefers-color-scheme media query value detected in js part */
-html[data-appearance=dark],
-html[data-appearance=system][data-system-appearance=dark] {
+/* prefers-color-scheme media query is used in html link tag */
+:root {
 
     color-scheme: dark;
 
diff --git a/src/includes/theme.php b/src/includes/theme.php
index eb6c4db..ac21d24 100644
--- a/src/includes/theme.php
+++ b/src/includes/theme.php
@@ -12,7 +12,9 @@
   <link rel="icon" type="image/gif" href="<?php mttinfo('theme_url'); ?>images/logo.gif">
   <link rel="stylesheet" type="text/css" href="<?php mttinfo('theme_url'); ?>style.css?v=<?php filever('theme', 'style.css'); ?>" media="all">
   <link rel="stylesheet" type="text/css" href="<?php mttinfo('theme_url'); ?>markdown.css?v=<?php filever('theme', 'markdown.css'); ?>" media="all">
-  <?php if (in_array(get_mttinfo('appearance'), ['system','dark'])): ?>
+  <?php if (get_mttinfo('appearance') == 'system'): ?>
+  <link rel="stylesheet" type="text/css" href="<?php mttinfo('theme_url'); ?>dark.css?v=<?php filever('theme', 'dark.css'); ?>" media="screen and (prefers-color-scheme:dark)">
+  <?php elseif (get_mttinfo('appearance') == 'dark'): ?>
   <link rel="stylesheet" type="text/css" href="<?php mttinfo('theme_url'); ?>dark.css?v=<?php filever('theme', 'dark.css'); ?>" media="screen">
   <?php endif; ?>
   <link rel="stylesheet" type="text/css" href="<?php mttinfo('theme_url'); ?>print.css?v=<?php filever('theme', 'print.css'); ?>" media="print">