Update DateTimePicker configuration based on theme.

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                     |

src/DateTimePicker.php

@@ -91,7 +91,31 @@ private function getScript(): string
         $config = json_encode($this->config);
 
         return <<<JS
-            $("#$this->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;
     }