Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soaressluiss/toggle-theme

🌒Toggle theme com React/TypeScript e Styled Components
https://github.com/soaressluiss/toggle-theme

react styled-components theme typescript

Last synced: 25 days ago
JSON representation

🌒Toggle theme com React/TypeScript e Styled Components

Host: GitHub
URL: https://github.com/soaressluiss/toggle-theme
Owner: Soaressluiss
License: mit
Created: 2023-05-04T19:19:08.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-05-05T19:39:42.000Z (almost 2 years ago)
Last Synced: 2024-11-19T21:37:48.754Z (3 months ago)
Topics: react, styled-components, theme, typescript
Language: TypeScript
Homepage: https://toggle-theme-soaressluiss.vercel.app
Size: 741 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


![header](./src/assets/readme%20files/banner.svg)





![Language](https://img.shields.io/github/languages/count/Soaressluiss/toggle-theme?style=for-the-badge&logo=appveyor&color=green)

![forks](https://img.shields.io/github/forks/soaressluiss/toggle-theme?style=for-the-badge&logo=appveyor)

![star user](https://img.shields.io/github/stars/soaressluiss/toggle-theme?style=for-the-badge&logo=appveyor&color=yellow)

![files](https://img.shields.io/github/directory-file-count/soaressluiss/toggle-theme?style=for-the-badge&logo=appveyor&color=blue)

![status](https://img.shields.io/static/v1?label=STATUS&message=concluido&color=GREEN&style=for-the-badge&logo=appveyor)

![licenca](https://img.shields.io/static/v1?label=License&message=MIT&color=green&style=for-the-badge&logo=appveyor)



## 🔢 Tópicos:

-   Descrição

-   Tecnologias utilizadas

-   Acesse ao projeto

-   Inicie localmente o Projeto

-   Gif demostrativo

-   Como contribuir

## 📃 Descrição:

Este projeto foi criado com o objetivo de desenvolver uma funcionalidade comum em muitos sites da web, um "Toggle Theme", que permite que o usuário escolha entre os modos escuro e claro.

Para implementar essa funcionalidade, foram utilizadas as tecnologias React, TypeScript e a biblioteca Styled Components para a estilização.

Foi um projeto em que pude praticar conceitos importantes, como o uso de interfaces, gerenciamento de estados e contextos com useContext, além de aprimorar a usabilidade do TypeScript no desenvolvimento de aplicações em React. Fiquei muito satisfeito com o meu aprendizado nesse processo e sinto-me mais preparado para enfrentar desafios futuros envolvendo essas tecnologias.

## 👨‍💻 Tecnologias utilizadas:

|      Tecnologias      |                                                             Ícones                                                              |

| :-------------------: | :-----------------------------------------------------------------------------------------------------------------------------: |

|       **HTML**        |       |

|       **REACT**       |                 |

| **Styled Components** |                     |

|                       |

|    **TypeScript**     |                 |

|      **ViteJs**       |  |

## 🌐 Acesse o projeto online:

> [Toggle Theme](https://toggle-theme-rho.vercel.app/)

## 💻 Inicie localmente:

clone o projeto através do comando:

```

git clone https://github.com/Soaressluiss/toggle-theme.git

```

Vá para o diretório da pasta

```

cd toggle-theme

```

Instale todas as dependências do projeto:

```

npm install

```

Inicie o projeto com o comando:

```

npm run dev

```

## 📽 Gif demostrativo:

![animation](./src/assets/readme%20files/ToggleThemeGif.gif)

## ♻️ Como contribuir:

-   Faça um Fork desse repositório.

-   Crie uma branch com a sua feature:

    `git checkout -b my-feature`

-   Commit suas mudanças: ` git commit -m 'feat: My new feature'`

-   Push a sua branch: `git push origin my-feature`

---

Esse projeto está sob a licença MIT. Veja o arquivo [License](License) para mais detalhes.

---



#### Feito com ❤ por [Luís Soares](https://github.com/Soaressluiss) ©2023

#### Gostou do projeto? Me mande uma mensagem!😄