https://github.com/carterlasalle/daynightchallenge
https://github.com/carterlasalle/daynightchallenge
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/carterlasalle/daynightchallenge
- Owner: carterlasalle
- Created: 2025-03-06T18:57:36.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-06T19:38:26.000Z (3 months ago)
- Last Synced: 2025-03-06T20:25:48.141Z (3 months ago)
- Language: JavaScript
- Size: 229 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Day/Night Toggle React Component
A beautiful and interactive day/night toggle component built with React and Tailwind CSS. This component provides a visually appealing way to switch between light and dark modes in your application.
## Features
- Smooth transitions between day and night modes
- Beautiful visual effects including stars, clouds, sun, and moon
- Accessible design with appropriate ARIA attributes
- Built with React and Tailwind CSS
- Fully responsive
## Getting Started
### Prerequisites
- Node.js (v14.0.0 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/daynight-toggle.git
cd daynight-toggle
```
2. Install dependencies:
```bash
npm install
# or
yarn
```
3. Start the development server:
```bash
npm run dev
# or
yarn dev
```
4. Open your browser and navigate to `http://localhost:5173`
## Usage
```jsx
import DayNightToggle from './components/DayNightToggle';
function App() {
return (
Day/Night Toggle
);
}
```
## Customization
You can customize the component by modifying the CSS classes and styles in the `DayNightToggle.jsx` file.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- Design inspired by modern UI/UX principles
- Built with [React](https://reactjs.org/) and [Tailwind CSS](https://tailwindcss.com/)