Enhance Overall Editor UI & Background Styling

[Suhani-ai-dev]

Hii @Debmallya-03
I would like to work on this issue under GSSoC'26.

📝 Description

The current HTML, CSS, and JavaScript editor sections have a basic appearance.
Improve the overall editor UI by enhancing the background styling, editor colors, section appearance, and overall visual consistency to create a cleaner and more modern coding experience.

---

🎯 Requirements

Enhance the UI design of the editor panels with improvements such as:

• Improve background colors for editor sections

• Add better contrast between:

  • HTML editor
  • CSS editor
  • JavaScript editor

• Improve code area appearance

• Add modern shadows/borders

• Improve spacing and padding

• Enhance typography and labels

• Add smooth hover/transition effects

• Ensure dark/light theme compatibility

• Maintain responsive design

---

💡 Suggested UI Improvements

Possible enhancements include:

• HTML section → warm/red accent
• CSS section → blue accent
• JavaScript section → yellow accent
• Rounded editor containers
• Gradient or glassmorphism-style backgrounds
• Better panel separation
• Subtle animations and transitions

Optional:

• Add colored top borders
• Add glowing active editor effect
• Improve Monaco editor theme integration

---

✅ Expected Outcome

Users should experience:

• A cleaner and more modern editor interface
• Better visual distinction between editors
• Improved readability and aesthetics
• A more professional IDE-like feel

I'd love to contribute to this enhancement.
Kindly assign this issue to me.
Thank you!