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

[manishgounder71-prog]

Hey @maintainers! 👋 I'd love to take up this issue for GSSoC'26.

I've already investigated the codebase and built out the requested Interactive Lavender Theme with Dynamic Canvas Background locally to ensure I could nail the requirements.

My Proposed Approach:

1. Lavender Color System Initialization: I refactored app.css to transition the core design palette to the requested Lavender token metrics. I configured multi-mode variables targeting :root for the crisp light theme and [data-theme="dark"] for the cosmic dark mode.
2. Interactive Canvas Engine: I replaced the static background glow on the landing page (+page.svelte) with an active HTML5 layer positioned behind the layout wrappers, rendering a floating network of nodes.
3. Cursor Proximity & Particle Lines: I implemented the particle system to continually calculate distances, drawing dynamic connecting lines between adjacent nodes and actively tracking the user's mouse coordinates for an immersive, responsive glassmorphism effect.
4. Theme Controller Hookup: Following the prompt, I tied the theme toggle directly to native JavaScript addEventListener logic (while ensuring modern Svelte 5 $state reactivity), allowing a seamless recalculation of the constellation network colors and variables when toggling.

[kushald121]

Hi maintainers, I would like to work on this issue under GSSoC.

I have carefully gone through the requirements and I really like the idea of implementing a modern Lavender glassmorphism theme with dynamic light/dark modes and an interactive HTML5 Canvas particle networking background. I am comfortable working with responsive frontend layouts, CSS theme variable systems, canvas animations, and JavaScript event handling.

I can work on:

• Adaptive Lavender theme token setup using :root and dark mode variables
• Responsive glassmorphism navbar, content layout, and footer
• Interactive HTML5 Canvas particle networking system
• Smooth theme toggle transitions with JavaScript
• Mobile responsiveness testing and documentation updates

I would love to contribute to this enhancement. Please assign this issue to me. Thank you!

[Harxhit]

@hiya005 I have assigned this issue to you. Please join our Discord channel from the README section for better communication and project updates.