fix: solve django 4.2 dark theme toggle problem (#105)

Author: EduardoJM

image_uploader_widget/static/admin/css/image-uploader-inline.css

@@ -1,4 +1,4 @@
-body {
+html[data-theme="light"], :root {
   --iuw-background: #FFF;
   --iuw-border-color: #CCC;
   --iuw-color: #333;
@@ -11,7 +11,7 @@ body {
   --iuw-add-image-color: #AAA;
 }
 @media (prefers-color-scheme: dark) {
-  body {
+  :root {
     --iuw-background: #121212;
     --iuw-border-color: #CCC;
     --iuw-color: #333;
@@ -24,6 +24,18 @@ body {
     --iuw-add-image-color: #CCC;
   }
 }
+html[data-theme="dark"] {
+  --iuw-background: #121212;
+  --iuw-border-color: #CCC;
+  --iuw-color: #333;
+  --iuw-placeholder-text-color: #AAA;
+  --iuw-placeholder-destak-color: #417690;
+  --iuw-dropzone-background: rgba(0, 0, 0, 0.8);
+  --iuw-image-preview-border: #333;
+  --iuw-image-preview-shadow: rgba(0, 0, 0, 0.3);
+  --iuw-add-image-background: #333;
+  --iuw-add-image-color: #CCC;
+}
 
 @keyframes arrow-flashing {
   from {

image_uploader_widget/static/admin/css/image-uploader-widget.css

@@ -1,4 +1,4 @@
-body {
+html[data-theme="light"], :root {
   --iuw-background: #FFF;
   --iuw-border-color: #CCC;
   --iuw-color: #333;
@@ -12,7 +12,7 @@ body {
 }
 
 @media (prefers-color-scheme: dark) {
-  body {
+  :root {
     --iuw-background: #121212;
     --iuw-border-color: #CCC;
     --iuw-color: #333;
@@ -26,6 +26,19 @@ body {
   }
 }
 
+html[data-theme="dark"] {
+  --iuw-background: #121212;
+  --iuw-border-color: #CCC;
+  --iuw-color: #333;
+  --iuw-placeholder-text-color: #AAA;
+  --iuw-placeholder-destak-color: #417690;
+  --iuw-dropzone-background: rgba(0, 0, 0, 0.8);
+  --iuw-image-preview-border: #333;
+  --iuw-image-preview-shadow: rgba(0, 0, 0, 0.3);
+  --iuw-add-image-background: #333;
+  --iuw-add-image-color: #CCC;
+}
+
 @keyframes arrow-flashing {
   from {
     opacity: 0;

tests/inlines/ui_regression/tests_ui.py

@@ -1,3 +1,4 @@
+import django
 from django.core.files import File
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support.wait import WebDriverWait
@@ -181,3 +182,67 @@ def test_hover_add_button(self):
         self.hover_and_wait(add_button, 0.4)
 
         self.assertMatchSnapshot(root, 'in_test_hover_add_button')
+
+    def test_ui_initialized_toggle_dark_theme(self):
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        inline = models.Inline.objects.create()
+        
+        item1 = models.InlineItem()
+        item1.parent = inline
+        with open(self.image1, 'rb') as f:
+            item1.image.save("image.png", File(f))
+        item1.save()
+        
+        item2 = models.InlineItem()
+        item2.parent = inline
+        with open(self.image2, 'rb') as f:
+            item2.image.save("image2.png", File(f))
+        item2.save()
+
+        self.selenium.get(self.get_edit_url(inline.id))
+
+        root = self.selenium.find_element(By.CSS_SELECTOR, '.iuw-inline-root')
+        self.assertMatchSnapshot(root, 'in_test_ui_initialized_toggle_dark_theme')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'in_test_ui_initialized_toggle_dark_theme2')
+
+    def test_ui_initialized_toggle_dark_theme_inverted(self):
+        self.dark_mode()
+
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        inline = models.Inline.objects.create()
+        
+        item1 = models.InlineItem()
+        item1.parent = inline
+        with open(self.image1, 'rb') as f:
+            item1.image.save("image.png", File(f))
+        item1.save()
+        
+        item2 = models.InlineItem()
+        item2.parent = inline
+        with open(self.image2, 'rb') as f:
+            item2.image.save("image2.png", File(f))
+        item2.save()
+
+        self.selenium.get(self.get_edit_url(inline.id))
+
+        root = self.selenium.find_element(By.CSS_SELECTOR, '.iuw-inline-root')
+        self.assertMatchSnapshot(root, 'in_test_ui_initialized_toggle_dark_theme_inverted')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'in_test_ui_initialized_toggle_dark_theme_inverted2')

tests/widget/ui_regression/tests_ui_optional.py

@@ -1,3 +1,4 @@
+import django
 from django.contrib.auth import get_user_model
 from django.core.files import File
 from selenium.webdriver.common.by import By
@@ -142,3 +143,41 @@ def test_ui_initialized_with_data_preview_dark(self):
 
         modal = self.get_preview_modal(black_overlay=True)
         self.assertMatchSnapshot(modal, 'wo_test_ui_initialized_with_data_preview_dark')
+
+    def test_ui_initialized_toggle_dark_theme(self):
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        item = self.init_item()
+        self.selenium.get(self.get_edit_url(item.id))
+
+        root = self.get_widget_root()
+        self.assertMatchSnapshot(root, 'wo_test_ui_initialized_toggle_dark_theme')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'wo_test_ui_initialized_toggle_dark_theme2')
+
+    def test_ui_initialized_toggle_dark_theme_inverted(self):
+        self.dark_mode()
+
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        item = self.init_item()
+        self.selenium.get(self.get_edit_url(item.id))
+
+        root = self.get_widget_root()
+        self.assertMatchSnapshot(root, 'wo_test_ui_initialized_toggle_dark_theme_inverted')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'wo_test_ui_initialized_toggle_dark_theme_inverted2')

tests/widget/ui_regression/tests_ui_required.py

@@ -1,3 +1,4 @@
+import django
 from django.contrib.auth import get_user_model
 from django.core.files import File
 from selenium.webdriver.common.by import By
@@ -121,3 +122,41 @@ def test_ui_initialized_with_data_preview_dark(self):
 
         modal = self.get_preview_modal(black_overlay=True)
         self.assertMatchSnapshot(modal, 'wr_test_ui_initialized_with_data_preview_dark')
+
+    def test_ui_initialized_toggle_dark_theme(self):
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        item = self.init_item()
+        self.selenium.get(self.get_edit_url(item.id))
+
+        root = self.get_widget_root()
+        self.assertMatchSnapshot(root, 'wr_test_ui_initialized_toggle_dark_theme')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'wr_test_ui_initialized_toggle_dark_theme2')
+
+    def test_ui_initialized_toggle_dark_theme_inverted(self):
+        self.dark_mode()
+
+        major, minor, _, _, _ = django.VERSION
+        if major < 4 or minor < 2:
+            # Theme toggle is added in django 4.2
+            # https://docs.djangoproject.com/en/4.2/releases/4.2/#django-contrib-admin
+            return
+
+        item = self.init_item()
+        self.selenium.get(self.get_edit_url(item.id))
+
+        root = self.get_widget_root()
+        self.assertMatchSnapshot(root, 'wr_test_ui_initialized_toggle_dark_theme_inverted')
+
+        toggle = self.selenium.find_element(By.CSS_SELECTOR, '#header button.theme-toggle')
+        self.click_and_wait(toggle, 0.3)
+        
+        self.assertMatchSnapshot(root, 'wr_test_ui_initialized_toggle_dark_theme_inverted2')