Implementing support of the Dark Mode

[rineshpatil]

🎯 Objective
Add dark mode functionality to the Coderplex website to improve accessibility, reduce eye strain, and align with modern design trends.

📝 Problem Statement
Many users prefer dark mode for late-night coding sessions or low-light environments. Currently, the website lacks a dark theme, limiting user comfort and customization.

🛠 Suggested Implementation

1. CSS Variables for Theming

• Define color schemes using CSS custom properties (e.g., --primary-bg, --text-color) for easy light/dark switching.

2. Toggle Mechanism

• Add a theme toggle button (🌓/🌞) in the navigation bar or settings menu.

• Use JavaScript to switch themes and save user preference to localStorage.

3. System-Level Preference

• Detect OS-level dark mode preference via prefers-color-scheme: dark media query.

4. Component Styling

• Ensure all components (buttons, cards, code blocks, etc.) adapt to the dark theme.

• Adjust shadows, borders, and accent colors for readability in dark mode.

5. Design Tokens

• Consistent palette (e.g., Tailwind’s dark mode colors).