This project implements a simple web page with a Dark/Light mode toggle feature. Users can switch between Dark and Light modes to change the appearance of the page.
- Dark Mode: In Dark Mode, the navigation bar and text box have a semi-transparent black background, and the icons and images are updated to suit the dark theme.
- Light Mode: In Light Mode, the navigation bar and text box have a semi-transparent white background, and the icons and images are updated to suit the light theme.
- Toggle Switch: The Dark/Light mode switch is implemented using a checkbox. When the checkbox is checked, Dark Mode is activated, and when it's unchecked, Light Mode is activated.
- HTML: Markup for the web page structure.
- CSS: Styling the page elements and implementing Dark/Light mode styles.
- JavaScript: Implementing the functionality for the Dark/Light mode toggle.
- Clone the repository to your local machine using:
git clone <repository-url>
- Open the
index.html
file in your web browser. - Use the toggle switch to switch between Dark and Light modes.
index.html
: The main HTML file for the web page.css/style.css
: Contains the CSS styles for the page elements.js/main.js
: Contains the JavaScript code for the Dark/Light mode functionality.img/
: Contains images used for Dark and Light modes.
The inspiration for this project came from [20 projects for javascripts by zero to mastery].