Implement Interactive Lavender Theme with Dynamic Canvas Background

[hiya005]

Summary

Add a highly requested, modern Lavender visual theme profile supporting seamless light/dark sub-modes alongside an active HTML5 Canvas particle networking system background to enhance platform branding and user immersion.

Contexts

The landing page requires a premium presentation upgrade. Moving away from standard flat color matrices, this feature introduces an adaptive Lavender glassmorphism design. When toggled, the ecosystem dynamically recalculates styling tokens while animating a network of nodes and connecting lines beneath the UI layout, keeping user alignment clean and responsive across all screens.

Tasks

• Task 1: Initialize multi-mode global color variables (:root and [data-theme="dark"]) matching the Lavender palette token metrics.
• Task 2: Build and position the responsive frosted glass navigation header bar, center layout content grid, and horizontal edge-to-edge footer.
• Task 3: Inject the HTML5 Canvas context layer behind layout wrappers to render interactive floating network lines that track cursor proximity coordinates.
• Task 4: Hook up the interactive theme switch controller logic using native JavaScript addEventListener transitions.

Acceptance Criteria

• Behavior X works: Clicking the theme capsule icon smoothly transitions the canvas layers and background variables between dark cosmic lavender and crisp light lavender state models.
• Tests added: Checked layout positioning behavior against both desktop viewports and compact mobile screens.
• docs updated (if needed): Included color utility class names and context setup configurations inside the main project engineering documentation files.

Area

web

Difficulty

hard due to canva implementation

After :

20260517-1909-32.1573882.mp4

[hiya005]

/assign GSSOC2026

[tech-dipesh]

/assign gssoc