mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
+ add dark mode css, enabled if system appearance is dark
This commit is contained in:
Max Pozdeev
parent
1c2cac9676
commit
4a41ad0467
5 changed files with 109 additions and 1 deletions
89
src/content/themes/default/dark.css
Normal file
89
src/content/themes/default/dark.css
Normal file
|
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
header("Content-type: text/html; charset=utf-8");
|
||||
?>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html data-appearance="<?php mttinfo('appearance'); ?>">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="<?php mttinfo('template_url'); ?>style.css?v=<?php mttinfo('version'); ?>" media="all" />
|
||||
<link rel="stylesheet" type="text/css" href="<?php mttinfo('template_url'); ?>markdown.css?v=<?php mttinfo('version'); ?>" media="all" />
|
||||
<?php if (get_mttinfo('appearance') == 'system'): ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php mttinfo('template_url'); ?>dark.css?v=<?php mttinfo('version'); ?>" media="screen" />
|
||||
<?php endif; ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php mttinfo('template_url'); ?>print.css?v=<?php mttinfo('version'); ?>" media="print" />
|
||||
<?php if(Config::get('rtl')): ?>
|
||||
<link rel="stylesheet" type="text/css" href="<?php mttinfo('template_url'); ?>style_rtl.css?v=<?php mttinfo('version'); ?>" media="all" />
|
||||
|
|
|
|||
|
|
@ -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[] */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue