{"id":25205138,"url":"https://github.com/md-emon-hasan/dark-mode-with-toggle-button","last_synced_at":"2025-04-05T01:10:07.124Z","repository":{"id":272627266,"uuid":"917228847","full_name":"Md-Emon-Hasan/Dark-Mode-with-Toggle-Button","owner":"Md-Emon-Hasan","description":"🌙 Dark and light mode toggle feature with smooth transitions and persistent theme preferences using localStorage.  Adapting to different lighting condition","archived":false,"fork":false,"pushed_at":"2025-01-15T15:52:26.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T09:19:04.481Z","etag":null,"topics":["dark-mode","dark-theme","light-theme","theme-switcher","theme-ui","toggle-buttons","toggle-switches"],"latest_commit_sha":null,"homepage":"https://md-emon-hasan.github.io/Dark-Mode-with-Toggle-Button/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Md-Emon-Hasan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-15T15:45:11.000Z","updated_at":"2025-01-15T16:03:52.000Z","dependencies_parsed_at":"2025-01-15T18:22:29.995Z","dependency_job_id":"3d1970d8-6abd-4704-9617-e7d1cbc091a8","html_url":"https://github.com/Md-Emon-Hasan/Dark-Mode-with-Toggle-Button","commit_stats":null,"previous_names":["md-emon-hasan/md-emon-hasan-dark-mode-with-toggle-button"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Emon-Hasan%2FDark-Mode-with-Toggle-Button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Emon-Hasan%2FDark-Mode-with-Toggle-Button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Emon-Hasan%2FDark-Mode-with-Toggle-Button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Md-Emon-Hasan%2FDark-Mode-with-Toggle-Button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Md-Emon-Hasan","download_url":"https://codeload.github.com/Md-Emon-Hasan/Dark-Mode-with-Toggle-Button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271529,"owners_count":20911587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","dark-theme","light-theme","theme-switcher","theme-ui","toggle-buttons","toggle-switches"],"created_at":"2025-02-10T09:19:09.263Z","updated_at":"2025-04-05T01:10:07.103Z","avatar_url":"https://github.com/Md-Emon-Hasan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Screenshot 2025-01-15 at 21-48-24 Dark and Light Mode](https://github.com/user-attachments/assets/75d7f1ce-bf17-463e-8e31-8026193d0f35)\n# Dark \u0026 Light Mode\n\nThis is a simple web project that demonstrates a dark and light mode theme toggle functionality. The project is built with HTML, CSS, and JavaScript. It allows users to toggle between a light and dark theme, which is saved in their browser preferences.\n\n## Features\n- Light and Dark mode toggle.\n- Persistent theme preferences using `localStorage`.\n- Smooth transitions for a better user experience.\n- Responsive design for different screen sizes (Desktop, Tablet, Mobile).\n\n## Project Structure\nThe project is divided into three main files:\n\n- `index.html`: The main HTML structure of the page.\n- `styles.css`: The stylesheet that includes the styling for light and dark modes.\n- `script.js`: The JavaScript file responsible for the theme toggle functionality and saving preferences.\n\n## Installation\n\n1. **Clone or download the repository:**\n   You can either clone this repository or download the files directly.\n\n   ```bash\n   git clone \u003crepository_url\u003e\n   ```\n\n2. **File Structure:**\n   After cloning or downloading, the project will have the following structure:\n   ```\n   /Techy-Dark-Light-Mode\n   ├── index.html\n   ├── css/styles.css\n   ├── js/script.js\n   └── README.md\n   ```\n\n3. **Run the Project:**\n   Open the `index.html` file in any web browser (e.g., Chrome, Firefox, Safari). You should see the page with the light mode enabled by default.\n\n## Usage\n\n- The page will load in **light mode** initially.\n- There is a toggle button (a switch) in the top-right corner of the page. \n- Clicking the toggle will switch between **light** and **dark** modes.\n- The selected theme is saved in `localStorage`, so when the page is reloaded or revisited, the theme preference is maintained.\n\n### Dark Mode Example\nIn dark mode, the background color of the page changes to a darker shade, and the text color changes to white, improving readability in low-light environments.\n\n### Light Mode Example\nIn light mode, the page has a light background and dark text, which is typically more suitable for well-lit environments.\n\n## Technologies Used\n\n- **HTML**: Used to create the structure of the page.\n- **CSS**: Used for styling the page and creating responsive designs.\n- **JavaScript**: Handles the dark/light mode toggle functionality and stores user preferences.\n\n## Code Explanation\n\n### `index.html`\nThis file contains the structure of the page, including:\n- A header section with the title and the toggle button.\n- A main content area with a brief description of the project.\n- A footer with the author's information and a link to their LinkedIn profile.\n\n### `styles.css`\nThis stylesheet:\n- Defines the global styles, including background and text colors.\n- Uses CSS variables to manage light and dark mode colors.\n- Styles the toggle button to make it look like a switch.\n- Implements responsive design to make the website look good on mobile devices.\n\n### `script.js`\nThe JavaScript file:\n- Handles the theme toggle functionality. When the toggle button is clicked, it toggles between light and dark modes.\n- Saves the selected theme in the browser's `localStorage` so the theme preference persists across page reloads.\n- Loads the saved theme preference on page load.\n\n## License\nThis project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT).\n\n## Contact\n\nFor any questions or suggestions, feel free to reach out to [Md Emon Hasan](https://www.linkedin.com/in/md-emon-hasan-695483237/).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmd-emon-hasan%2Fdark-mode-with-toggle-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmd-emon-hasan%2Fdark-mode-with-toggle-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmd-emon-hasan%2Fdark-mode-with-toggle-button/lists"}