* use link media instead of js for auto and compulsory dark mode

This commit is contained in:
maxpozdeev 2023-10-09 11:07:34 +03:00
parent 9489e51574
commit 9a1970d3b1
3 changed files with 6 additions and 5 deletions

View file

@ -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) {

View file

@ -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;

View file

@ -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">