feat: add dark mode support, accordion UI, and current combination display

- Update Theme Studio sidebar to use DaisyUI theme-aware classes for dark mode
- Convert Customise accordion to native details/summary elements for proper interaction
- Add "Current combination" card showing active theme settings
- Add SVG recolorer for logo color customization
- Add image controller for serving uploaded images
- Implement header background image controls (zoom, position)
- Add toggle_customise event handler to preserve accordion state across re-renders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

test/simpleshop_theme/media/svg_recolorer_test.exs

@@ -0,0 +1,144 @@
+defmodule SimpleshopTheme.Media.SVGRecolorerTest do
+  use ExUnit.Case, async: true
+
+  alias SimpleshopTheme.Media.SVGRecolorer
+
+  describe "recolor/2" do
+    test "replaces fill attributes" do
+      svg = ~s(<svg><path fill="#000000" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(fill="#ff6600")
+      refute result =~ "#000000"
+    end
+
+    test "replaces stroke attributes" do
+      svg = ~s(<svg><path stroke="#000000" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(stroke="#ff6600")
+      refute result =~ "#000000"
+    end
+
+    test "preserves fill=none" do
+      svg = ~s(<svg><path fill="none" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(fill="none")
+    end
+
+    test "preserves stroke=none" do
+      svg = ~s(<svg><path stroke="none" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(stroke="none")
+    end
+
+    test "replaces currentColor" do
+      svg = ~s(<svg><path fill="currentColor" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "#ff6600"
+      refute result =~ "currentColor"
+    end
+
+    test "handles multiple elements" do
+      svg = ~s(<svg><circle fill="#000" r="10"/><rect fill="#fff" width="20"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(fill="#ff6600")
+      refute result =~ "#000"
+      refute result =~ "#fff"
+    end
+
+    test "handles RGB color names" do
+      svg = ~s(<svg><path fill="black" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ ~s(fill="#ff6600")
+      refute result =~ "black"
+    end
+
+    test "handles inline styles with fill" do
+      svg = ~s(<svg><path style="fill: #000000; opacity: 1" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "fill:#ff6600"
+      refute result =~ "#000000"
+    end
+
+    test "handles both fill and stroke in same element" do
+      svg = ~s(<svg><path fill="#000" stroke="#fff" d="M0 0"/></svg>)
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert String.contains?(result, ~s(fill="#ff6600"))
+      assert String.contains?(result, ~s(stroke="#ff6600"))
+    end
+
+    test "handles CSS style blocks with fill" do
+      svg = """
+      <svg><style>.st0{fill:#FFFFFF;}.st1{fill:#EF1D1D;stroke:#000000;}</style><path class="st0"/></svg>
+      """
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "fill:#ff6600"
+      refute result =~ "#FFFFFF"
+      refute result =~ "#EF1D1D"
+    end
+
+    test "handles CSS style blocks with stroke" do
+      svg = """
+      <svg><style>.st1{stroke:#000000;stroke-miterlimit:10;}</style><path class="st1"/></svg>
+      """
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "stroke:#ff6600"
+      refute result =~ "#000000"
+    end
+
+    test "preserves fill:none in CSS" do
+      svg = """
+      <svg><style>.st0{fill:none;stroke:#000;}</style><path class="st0"/></svg>
+      """
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "fill:none"
+      assert result =~ "stroke:#ff6600"
+    end
+
+    test "handles CSS with color names" do
+      svg = """
+      <svg><style>.icon{fill:black;stroke:white;}</style><path class="icon"/></svg>
+      """
+      result = SVGRecolorer.recolor(svg, "#ff6600")
+      assert result =~ "fill:#ff6600"
+      assert result =~ "stroke:#ff6600"
+      refute result =~ "black"
+      refute result =~ "white"
+    end
+  end
+
+  describe "valid_hex_color?/1" do
+    test "accepts 6-digit hex colors" do
+      assert SVGRecolorer.valid_hex_color?("#ff6600")
+      assert SVGRecolorer.valid_hex_color?("#FFFFFF")
+      assert SVGRecolorer.valid_hex_color?("#000000")
+    end
+
+    test "accepts 3-digit hex colors" do
+      assert SVGRecolorer.valid_hex_color?("#f60")
+      assert SVGRecolorer.valid_hex_color?("#FFF")
+      assert SVGRecolorer.valid_hex_color?("#000")
+    end
+
+    test "rejects invalid colors" do
+      refute SVGRecolorer.valid_hex_color?("ff6600")
+      refute SVGRecolorer.valid_hex_color?("#gg0000")
+      refute SVGRecolorer.valid_hex_color?("#ff")
+      refute SVGRecolorer.valid_hex_color?("red")
+      refute SVGRecolorer.valid_hex_color?(nil)
+      refute SVGRecolorer.valid_hex_color?(123)
+    end
+  end
+
+  describe "normalize_hex_color/1" do
+    test "expands 3-digit hex to 6-digit" do
+      assert SVGRecolorer.normalize_hex_color("#f60") == "#ff6600"
+      assert SVGRecolorer.normalize_hex_color("#FFF") == "#FFFFFF"
+      assert SVGRecolorer.normalize_hex_color("#000") == "#000000"
+    end
+
+    test "leaves 6-digit hex unchanged" do
+      assert SVGRecolorer.normalize_hex_color("#ff6600") == "#ff6600"
+      assert SVGRecolorer.normalize_hex_color("#FFFFFF") == "#FFFFFF"
+    end
+  end
+end