diff --git a/src/content/themes/default/dark.css b/src/content/themes/default/dark.css
new file mode 100644
index 0000000..83bb2e6
--- /dev/null
+++ b/src/content/themes/default/dark.css
@@ -0,0 +1,89 @@
+/*
+ This file is a part of myTinyTodo.
+*/
+
+
+/* Dark mode */
+
+@media (prefers-color-scheme: dark) {
+
+ :root {
+ color-scheme: dark;
+
+ --color-bg: #171717;
+ --color-text-default: #eee;
+ --color-text-reduced: #e0e0e0;
+ --color-text-reduced2: #999;
+ --color-text-reduced3: #666;
+ --color-link: #6495ED; /* CornflowerBlue */
+ --color-btn-reduced: #999;
+ --color-btn-reduced-hover: #ddd;
+ --color-btn-default: #fff;
+ --color-btn-hover: #444;
+ --color-submit: #444;
+ --color-row-underlinig: #333333;
+ --color-border-default: #555;
+ --color-border-focus: #5a8df0;
+ --color-error: #ff3333;
+ --color-info: #EFC300;
+
+ --color-toolbar: #3b3b3b;
+ --color-btn-toolbar-hover: #555;
+ --color-content-delimiter: #676767;
+ --color-footer: var(--color-bg);
+
+ /* Tabs */
+ --color-tab: #1b1b1b;
+ --color-tab-selected: var(--color-toolbar);
+ --color-tab-hover: #262626;
+ --color-tab-border: #676767;
+ --color-tab-text: #ddd;
+ --color-btn-tab: #ccc;
+ --color-btn-tab-hover: #fff;
+ --color-btn-tab-hover-bg: #5a5a5a;
+
+ /* Menu */
+ --color-menu: #2b2b2b;
+ --color-menu-border: #555;
+ --color-menu-hover: #5a8df0;
+ --color-menu-text: #eaeaea;
+ --color-menu-text-hover: #ebf0f8;
+ --color-menu-text-disabled: #696969;
+ --color-popup-shadow: 1px 2px 6px 1px rgba(0,0,0,1);
+
+ /* Tasklist */
+ --color-tasklist-row: var(--color-bg);
+ --color-tasklist-row-border: var(--color-row-underlinig);
+ --color-tasklist-row-inter-border: var(--color-tasklist-row-border);
+ --color-tasklist-row-expanded-border: #555;
+ --color-tasklist-tag: var(--color-tab-text);
+ --color-tasklist-note-link: #999;
+ --color-tasklist-link-hover: var(--color-link);
+ --color-taglist-text-hover: var(--color-bg);
+ --color-taglist-text-hover-bg: var(--color-text-default);
+
+
+ /* Priority */
+ --color-priority-none: #676767;
+ --color-priority-text: var(--color-text-default);
+
+ /* DueDates */
+ --color-duedate-default: var(--color-tab-text);
+ --color-duedate-soon: #008000;
+ --color-duedate-today: #FF0000;
+ --color-duedate-past: #A52A2A;
+
+ /* Markdown */
+ --color-md-border: #333;
+ --color-md-bg-highlighted: #222;
+ --color-md-text-blockquote: #777;
+
+ /* Settings */
+ --color-settings-row: #222;
+
+ /* */
+ --color-placeholder: #444;
+ --color-placeholder-border: #555;
+
+ }
+}
diff --git a/src/content/themes/default/index.php b/src/content/themes/default/index.php
index 5435562..bf36eca 100644
--- a/src/content/themes/default/index.php
+++ b/src/content/themes/default/index.php
@@ -3,7 +3,7 @@
header("Content-type: text/html; charset=utf-8");
?>
-
+
@@ -11,6 +11,9 @@
+
+
+
diff --git a/src/includes/class.config.php b/src/includes/class.config.php
index 11a5739..c790747 100644
--- a/src/includes/class.config.php
+++ b/src/includes/class.config.php
@@ -84,6 +84,9 @@ class Config
# Use Markdown syntax for notes. Set to 'v1' to use old v1.6 syntax.
'markup' => array('default'=>'markdown', 'type'=>'s'),
+
+ # Appearance: system default or always light
+ 'appearance' => array('default'=>'system', 'type'=>'s', 'options'=>array('system','light')),
);
/** @var mixed[] */
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index 6a9ad04..50b7328 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -528,6 +528,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
});
$('#cmenu_note').hide();
$("#lists ul").sortable('disable');
+ $("#mtt_body").addClass("touch-device");
}
@@ -619,6 +620,15 @@ var mytinytodo = window.mytinytodo = _mtt = {
window.onpopstate = historyOnPopState;
}
+ // Appearance mode for CSS
+ if (window.matchMedia) {
+ document.documentElement.setAttribute('data-system-appearance', window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light');
+ // TODO: use MediaQueryList.onchange since Safari 14 (macos 10.14) is min target
+ window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
+ document.documentElement.setAttribute('data-system-appearance', e.matches ? 'dark' : 'light');
+ });
+ }
+
this.doAction( 'init' );
return this;
diff --git a/src/init.php b/src/init.php
index b449f51..8210aad 100644
--- a/src/init.php
+++ b/src/init.php
@@ -285,6 +285,9 @@ function get_unsafe_mttinfo($v)
$_mttinfo['version'] = mytinytodo\Version::VERSION;
}
return $_mttinfo['version'];
+ case 'appearance':
+ $_mttinfo['appearance'] = Config::get('appearance');
+ return $_mttinfo['appearance'];
}
}