add-feature-dark

[ibrahimabidi]

Dark Mode Feature: I added a dark mode feature to the project. This includes:

A Dark Mode Toggle Button that allows users to switch between light and dark modes.
The toggle button updates both its icon (switching between a sun and a moon) and text (displaying either "Light Mode" or "Dark Mode").
The dark mode setting is stored in localStorage, so the user's preference persists across page reloads.
JavaScript: The dark mode logic was implemented in a separate JavaScript file that contains:

Functions for applying and removing dark mode.
Event listeners to handle the toggle button click and apply the correct mode based on localStorage data.
CSS Styling: I made significant changes to the dark mode styling:

Defined custom CSS variables for dark mode colors, such as --dark-bg, --dark-text, and others to manage background, text, and container styles consistently.
Applied dark mode styles to various elements such as the page background, text, containers, and tiles.
Styled the toggle button with a hover effect to enhance user experience.
Reason for Using main.css: Although SCSS was initially considered for styling (due to its better code management with variables and nesting), I encountered issues where my SCSS changes were not rendering on the screen after compilation. As a workaround, I decided to directly edit the main.css file to apply the necessary styles for dark mode. This ensured that the styles rendered properly and provided a seamless dark mode experience for users.