From 4ef690556431c2c3c95187953e598a82f7877e6b Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 11 Jul 2024 13:33:51 -0600 Subject: [PATCH] Kdots: Darkmode --- kdots/assets/styles/framework.css | 7 +++++++ kdots/assets/styles/framework_dark.less | 7 +++++++ kdots/head.tpl | 2 +- kdots/inc/class.kdots_framework.inc.php | 4 ++++ kdots/js/EgwDarkmodeToggle.ts | 2 +- 5 files changed, 20 insertions(+), 2 deletions(-) diff --git a/kdots/assets/styles/framework.css b/kdots/assets/styles/framework.css index 1c2170cc7f..20bb933f11 100644 --- a/kdots/assets/styles/framework.css +++ b/kdots/assets/styles/framework.css @@ -20,6 +20,13 @@ html[data-darkmode="1"] body #egw_fw_topmenu_info_items #topmenu_info_timer:befo html[data-darkmode="1"] body egw-app { --application-header-text-color: var(--sl-color-neutral-700); } +html[data-darkmode="1"] body .et2_container { + background-color: initial; +} +html[data-darkmode="1"] body .dialogFooterToolbar et2-button::part(base):not(:hover), +html[data-darkmode="1"] body et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) { + background-color: var(--sl-input-background-color); +} html[data-darkmode="1"] body .nextmatch_sortheader { color: #96bcd9; } diff --git a/kdots/assets/styles/framework_dark.less b/kdots/assets/styles/framework_dark.less index cad29ec6d9..d4dc031707 100644 --- a/kdots/assets/styles/framework_dark.less +++ b/kdots/assets/styles/framework_dark.less @@ -20,6 +20,13 @@ html[data-darkmode="1"] body { /*** WIDGETS ***/ /* This should mostly go away with webcomponents */ + .et2_container { + background-color: initial; + } + + .dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) { + background-color: var(--sl-input-background-color); + } .nextmatch_sortheader { color: #96bcd9; } diff --git a/kdots/head.tpl b/kdots/head.tpl index 9ad8222ba8..38fef8896e 100644 --- a/kdots/head.tpl +++ b/kdots/head.tpl @@ -1,6 +1,6 @@ - + {website_title} diff --git a/kdots/inc/class.kdots_framework.inc.php b/kdots/inc/class.kdots_framework.inc.php index 9e879162b3..7896c0ed37 100644 --- a/kdots/inc/class.kdots_framework.inc.php +++ b/kdots/inc/class.kdots_framework.inc.php @@ -35,6 +35,10 @@ class kdots_framework extends Api\Framework\Ajax return []; } $data = parent::_get_header($extra); + + $data['theme'] .= $data['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : ''; + unset($data['darkmode']); + if($extra['navbar-apps']) { // Fix wrong icon type diff --git a/kdots/js/EgwDarkmodeToggle.ts b/kdots/js/EgwDarkmodeToggle.ts index ae06388209..ebfba9aaaa 100644 --- a/kdots/js/EgwDarkmodeToggle.ts +++ b/kdots/js/EgwDarkmodeToggle.ts @@ -57,7 +57,7 @@ export class EgwDarkmodeToggle extends LitElement { if(force == null) { - force = !(document.documentElement.getAttribute("data-darkmode") == "true"); + force = !(document.documentElement.getAttribute("data-darkmode") == "1"); } this.darkmode = force; if(force)