From 4f44eb67c303054d2102c41ef3b84eddbb613759 Mon Sep 17 00:00:00 2001 From: Wilmer Arambula <42547589+terabytesoftw@users.noreply.github.com> Date: Sun, 26 Nov 2023 11:38:02 -0300 Subject: [PATCH] Update DateTimePicker configuration based on theme. (#4) --- .github/workflows/compatibility.yml | 1 - README.md | 25 ++- src/DateTimePicker.php | 26 ++- tests/DateTimePickerTest.php | 312 ++++++++++++++++++++++++++-- 4 files changed, 349 insertions(+), 15 deletions(-) diff --git a/.github/workflows/compatibility.yml b/.github/workflows/compatibility.yml index 438ac54..ff6ec8b 100644 --- a/.github/workflows/compatibility.yml +++ b/.github/workflows/compatibility.yml @@ -27,7 +27,6 @@ jobs: with: composer-command: | composer require yiisoft/yii2:^2.0.49 --prefer-dist --no-progress --no-interaction --no-scripts --ansi - extensions: intl os: >- ['ubuntu-latest', 'windows-latest'] php: >- diff --git a/README.md b/README.md index 9454d5c..fa7b837 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,29 @@ echo $form ) ``` +### Dynamic Theme Configuration for tempusDominus Widget Library + +This library provides functionality to dynamically configure the tempusDominus widget's theme based on user preferences or predefined settings. + +#### Functionality Overview + +The library introduces a feature to automatically set up the tempusDominus widget with a theme determined by the user's preference or specified configurations. + +##### Automatic Theme Configuration + +Upon initialization, the library checks for theme configuration settings. +If the user has specified a theme in the library's configuration, it takes precedence. + +##### Browser-Based Theme Detection + +If no specific theme is set or the attribute data-bs-theme is absent: +The library uses the prefers-color-scheme media query to detect the user's system preference for `light` or `dark` mode. + +##### Applying Theme Configuration to tempusDominus Widget + +The library sets the theme configuration `(theme: 'dark' or theme: 'light')` based on the detected or specified theme. +This configuration is then applied to the tempusDominus widget using the library's internal functionalities. + ### Properties of the widget | Property | Type | Description | Default | @@ -111,7 +134,7 @@ echo $form ### Translation support The extension supports translation. You can translate the extension into your language, -for default the extension supports the following languages: +for default the extension supports the following languages. - Chinese - English diff --git a/src/DateTimePicker.php b/src/DateTimePicker.php index 7093809..8f5369d 100644 --- a/src/DateTimePicker.php +++ b/src/DateTimePicker.php @@ -91,7 +91,31 @@ private function getScript(): string $config = json_encode($this->config); return <<id").tempusDominus({$config}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('$config'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#$this->id").tempusDominus(config); JS; } diff --git a/tests/DateTimePickerTest.php b/tests/DateTimePickerTest.php index 8fc6288..b1562f2 100644 --- a/tests/DateTimePickerTest.php +++ b/tests/DateTimePickerTest.php @@ -47,7 +47,31 @@ public function testContainerClass(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -80,7 +104,31 @@ public function testFloatingLabel(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -112,7 +160,31 @@ public function testFormatMonth(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"short","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"short","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -144,7 +216,31 @@ public function testFormatYear(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"2-digit"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"2-digit"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -176,7 +272,31 @@ public function testIcon(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -208,7 +328,31 @@ public function testId(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker2").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker2").tempusDominus(config); }); JS, $render, @@ -240,7 +384,31 @@ public function testLabelClass(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -272,7 +440,31 @@ public function testLabelContent(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -303,7 +495,31 @@ public function testName(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -335,7 +551,31 @@ public function testSpanClass(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -367,7 +607,31 @@ public function testStarOfTheWeek(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":0}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":0}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render, @@ -398,7 +662,31 @@ public function testRender(): void $this->assertStringContainsString( <<jQuery(function ($) { - $("#datetimepicker1").tempusDominus({"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}); + const htmlElement = document.querySelector('html'); + let theme = htmlElement.getAttribute('data-bs-theme'); + + const config = JSON.parse('{"localization":{"today":"Go to today","clear":"Clear selection","close":"Close picker","selectMonth":"Select month","previousMonth":"Previous month","nextMonth":"Next month","selectYear":"Select year","previousYear":"Previous year","nextYear":"Next year","selectDecade":"Select decade","previousDecade":"Previous decade","nextDecade":"Next decade","previousCentury":"Previous century","nextCentury":"Next century","pickHour":"Pick hour","incrementHour":"Increment hour","decrementHour":"Decrement hour","pickMinute":"Pick minute","incrementMinute":"Increment minute","decrementMinute":"Decrement minute","pickSecond":"Pick second","incrementSecond":"Increment second","decrementSecond":"Decrement second","toggleMeridiem":"Toggle meridiem","selectTime":"Select time","selectDate":"Select date","dayViewHeaderFormat":{"month":"long","year":"numeric"},"locale":"en-US","startOfTheWeek":1}}'); + + if (config.display && config.display.theme) { + theme = config.display.theme; + } else if (!theme) { + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + theme = prefersDark ? 'dark' : 'light'; + } + + if (theme === 'dark' || theme === 'auto') { + config.display = { + theme: 'dark', + }; + } + + if (theme === 'light') { + config.display = { + theme: 'light', + }; + } + + $("#datetimepicker1").tempusDominus(config); }); JS, $render,