├── README.md
├── index.html
├── style.css
├── LICENSE
└── main.js
/README.md:
--------------------------------------------------------------------------------
1 | # --__--DIA-e-NOITE--__--
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
Professor-rafael
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --white: #fff;
3 | --black: #000;
4 | --purple1: #7d1ad4;
5 | --purple2: #6e17b9;
6 | }
7 |
8 | [data-theme="dark"]{
9 | --white: #000;
10 | --black: #fff;
11 | }
12 |
13 | *{
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | body{
19 | min-height: 100vh;
20 | display: flex;
21 | justify-content: center;
22 | align-items: center;
23 | background-color: var(--white);
24 | }
25 |
26 | div{
27 | display: flex;
28 | flex-direction: column;
29 | gap: 2rem;
30 | align-items: center;
31 | background-color: var(--black);
32 | color: var(--white);
33 | padding: 2rem;
34 | border-radius: 10px;
35 | }
36 |
37 | button{
38 | background-color: var(--purple1);
39 | padding: .4rem;
40 | border: none;
41 | border-radius: 50%;
42 | width: 80px;
43 | height: 80px;
44 | cursor: pointer;
45 | }
46 |
47 | button:hover{
48 | background-color: var(--purple2);
49 | transition: .8s;
50 | }
51 |
52 | svg{
53 | color: var(--white);
54 | width: 24px;
55 | height: 24px;
56 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Rafael Assis Santos
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const btnDarkModeToggle = document.getElementById('btn-dark-mode-toggle')
2 | const themeSystem = localStorage.getItem('themeSystem') || 'light'
3 |
4 | btnDarkModeToggle.addEventListener('click', () => {
5 | let oldTheme = localStorage.getItem('themeSystem') || 'light'
6 | let newTheme = oldTheme == "light" ? "dark" : "light"
7 | localStorage.setItem('themeSystem',newTheme)
8 | defineCurrentTheme(newTheme)
9 | })
10 |
11 | function defineCurrentTheme(theme){
12 | const darkSvg = ""
13 | const lightSvg = ""
14 | document.documentElement.setAttribute("data-theme", theme)
15 | if(theme == "light")
16 | {
17 | btnDarkModeToggle.innerHTML = darkSvg
18 | return
19 | }
20 | btnDarkModeToggle.innerHTML = lightSvg
21 | }
22 |
23 | defineCurrentTheme(themeSystem)
24 |
--------------------------------------------------------------------------------