feat: Add custom css dark theme customization (#12794)

* Add custom css dark theme customization

- The custom.css consumes the custom theme colors and use them.
- Added a custom split filter for spliting the passed in 2 hex colors string.
- Added tests.

(depends on PR #12613)

* Fix test fails of custom.css theme settings

This commit fixes the  test fails previously appeared. Mainly due to incorrect logic and use of incorrect color variables in the template.

Changes:
- Refactored custom.css and  made CustomCssView  handle custom theme settings instead of the css template.
- also removed the no longer used custom_filters.py and test_custom_filters.py

Dependes on PR: #12613

* Add tests to split_colors

Fixes #9372

weblate/configuration/tests.py

@@ -33,3 +33,11 @@ def test_cache(self) -> None:
         CustomCSSView.drop_cache()
         response = self.client.get(reverse("css-custom"))
         self.assertEqual(response.content.decode().strip(), "")
+
+    def test_split_colors(self):
+        self.assertEqual([None, None], CustomCSSView.split_colors(""))
+        self.assertEqual([None, None], CustomCSSView.split_colors(None))
+        self.assertEqual(["#ffffff"], CustomCSSView.split_colors("#ffffff"))
+        self.assertEqual(
+            ["#ffffff", "#000000"], CustomCSSView.split_colors("#ffffff,#000000")
+        )

weblate/configuration/views.py

@@ -26,6 +26,12 @@ class CustomCSSView(TemplateView):
     template_name = "configuration/custom.css"
     cache_key = "css:custom"
 
+    @classmethod
+    def split_colors(cls, hex_color_string):
+        if hex_color_string:
+            return hex_color_string.split(",")
+        return [None, None]
+
     @classmethod
     def get_css(cls, request: AuthenticatedHttpRequest):
         # Request level caching
@@ -35,10 +41,30 @@ def get_css(cls, request: AuthenticatedHttpRequest):
         # Site level caching
         css = cache.get(cls.cache_key)
         if css is None:
-            css = render_to_string(
-                "configuration/custom.css",
-                Setting.objects.get_settings_dict(SettingCategory.UI),
-            ).strip()
+            settings = Setting.objects.get_settings_dict(SettingCategory.UI)
+            split_colors = cls.split_colors
+            # fmt: off
+            custom_theme_settings = {
+                "header_color_light": split_colors(settings.get("header_color"))[0],
+                "header_color_dark": split_colors(settings.get("header_color"))[1],
+                "header_text_color_light": split_colors(settings.get("header_text_color"))[0],
+                "header_text_color_dark": split_colors(settings.get("header_text_color"))[1],
+                "navi_color_light": split_colors(settings.get("navi_color"))[0],
+                "navi_color_dark": split_colors(settings.get("navi_color"))[1],
+                "navi_text_color_light": split_colors(settings.get("navi_text_color"))[0],
+                "navi_text_color_dark": split_colors(settings.get("navi_text_color"))[1],
+                "focus_color_light": split_colors(settings.get("focus_color"))[0],
+                "focus_color_dark": split_colors(settings.get("focus_color"))[1],
+                "hover_color_light": split_colors(settings.get("hover_color"))[0],
+                "hover_color_dark": split_colors(settings.get("hover_color"))[1],
+                "hide_footer": settings.get("hide_footer"),
+                "page_font": settings.get("page_font"),
+                "brand_font": settings.get("brand_font"),
+                "enforce_hamburger": settings.get("enforce_hamburger"),
+            }
+            # fmt: on
+
+            css = render_to_string(cls.template_name, custom_theme_settings).strip()
             cache.set(cls.cache_key, css, 24 * 3600)
         request.weblate_custom_css = css
         return css