feat: dark-mode variant for background images

[nish7x]

What

Adds a Dark Mode option to the Background control's + menu, so a block can have a separate background (image / color / gradient) for dark mode — mirroring the dark variant already available on Image elements (darkSrc).

How it works

• The dark background is stored as dark:background* styles (e.g. dark:backgroundImage), reusing the existing variant/state machinery — so the "+" menu, the variant row, and the popover editor all work with no new UI.
• On the published page it renders as @media (prefers-color-scheme: dark) plus [data-theme="dark"] / [data-prefers-color-scheme="dark"] selectors, matching how Builder already scopes dark mode (auto + manual toggle), instead of an invalid :dark pseudo-class.
• In the editor it previews live when the canvas dark-mode toggle is on (mirrors the image darkSrc swap).

Changes

• BackgroundHandler.vue — expose the dark variant on the Background control; skip the hover-style transition for it (dark mode is a theme switch, not an interaction state).
• builder_page.py — append_state_style renders the dark state via a dark-mode media query + toggle selectors (dark_mode_style helper).
• BuilderBlock.vue — apply dark: styles in the canvas when canvasDarkMode is on.
• builderBlockCopyPaste.ts — absolutize the dark:backgroundImage URL on copy, like darkSrc.

Testing

• Set a light + dark background on a block, published the page, and confirmed the background swaps between the light and dark values when the OS/browser color scheme flips.
• Verified the + menu lists Dark Mode alongside On Hover / On Active / On Focus, and that once set it appears as a variant row with its own background editor.

Screen.Recording.2026-07-30.at.11.44.04.mov

[greptile-apps]

Mixed backgrounds corrupt dark variants

When selected blocks have different base backgrounds, adding Dark Mode copies blockController.getStyle()'s mixed-value sentinel into every block, causing invalid or incorrect dark background CSS instead of preserving each block's own value.

Context Used: AGENTS.md (source)

Knowledge Base Used: Properties Panel: Editing Block Styles and Props

[greptile-apps]

Confidence Score: 3/5

The multi-selection dark-variant corruption should be fixed before merging.

Creating Dark Mode for blocks with differing backgrounds copies the aggregate mixed sentinel into every selected block instead of copying each block’s own styles.

Files Needing Attention: frontend/src/components/BackgroundHandler.vue

_{Reviews (1): Last reviewed commit: "feat: dark-mode variant for background i..." | Re-trigger Greptile}

[codecov]

Codecov Report

❌ Patch coverage is 92.85714% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 57.57%. Comparing base (c1a4b33) to head (1f64b38).
⚠️ Report is 110 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ilder/builder/doctype/builder_page/builder_page.py	92.85%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #701      +/-   ##
===========================================
+ Coverage    56.54%   57.57%   +1.03%     
===========================================
  Files           34       35       +1     
  Lines         4119     4278     +159     
===========================================
+ Hits          2329     2463     +134     
- Misses        1790     1815      +25     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.