Com esse projeto pudemos aprender como manipular variáveis do CSS e também a DOM.
20 | Com isso conseguimos construir uma aplicação que pode mudar o thema de Light(Claro)
21 | para Dark(Escuro).
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | font-family: 'Montserrat';
4 |
5 | display: grid;
6 | align-items: center;
7 | justify-items: center;
8 |
9 | --bg: #FCFCFC;
10 | --bg-panel: #EBEBEB;
11 | --color-headings: #0077FF;
12 | --color-text: #333333;
13 | }
14 |
15 | body {
16 | background-color: var(--bg);
17 | }
18 |
19 | .container {
20 | background-color: var(--bg-panel);
21 |
22 | margin: 5em;
23 | padding: 5em;
24 |
25 | border-radius: 15px;
26 |
27 | display: grid;
28 | grid-template-columns: 80% auto;
29 | grid-template-rows: auto auto;
30 | grid-template-areas:
31 | "title switch"
32 | "content content"
33 | ;
34 | }
35 |
36 | h1 {
37 | margin: 0;
38 | color: var(--color-headings);
39 | }
40 |
41 | p {
42 | color: var(--color-text);
43 | grid-area: content;
44 | font-size: 1.1em;
45 | line-height: 1.8em;
46 | margin-top: 2em;
47 | }
48 |
49 | input[type=checkbox]{
50 | height: 0;
51 | width: 0;
52 | visibility: hidden;
53 | }
54 |
55 | label {
56 | cursor: pointer;
57 | text-indent: -9999px;
58 | width: 52px;
59 | height: 27px;
60 | background: grey;
61 | float: right;
62 | border-radius: 100px;
63 | position: relative;
64 | }
65 |
66 | label::after{
67 | content: '';
68 | position: absolute;
69 | top: 3px;
70 | left: 3px;
71 | width: 20px;
72 | height: 20px;
73 | background-color: white;
74 | border-radius: 90px;
75 | transition: 0.3s;
76 | }
77 |
78 | input:checked + label {
79 | background-color: var(--color-headings);
80 | }
81 |
82 | input:checked + label::after {
83 | left: calc(100% - 5px);
84 | transform: translateX(-100%);
85 | }
86 |
87 | label:active:after {
88 | width: 45px;
89 | }
--------------------------------------------------------------------------------
/scripts.js:
--------------------------------------------------------------------------------
1 | // Pega todo o html construido
2 | const html = document.querySelector("html");
3 | // pega o input
4 | const checkBox = document.querySelector("input[name=theme]");
5 |
6 | // Pega os estilos de forma dinâmica
7 | const getStyle = (element, style) =>
8 | window.getComputedStyle(element).getPropertyValue(style);
9 |
10 | // Inicializa os valores já presentes na página(light theme).
11 | const initialColors = {
12 | bg: getStyle(html, "--bg"),
13 | bgPanel: getStyle(html, "--bg-panel"),
14 | colorHeadings: getStyle(html, "--color-headings"),
15 | colorText: getStyle(html, "--color-text"),
16 | };
17 |
18 | // Constroi o darkMode
19 | const darkMode = {
20 | bg: "#333333",
21 | bgPanel: "#434343",
22 | colorHeadings: "#3664FF",
23 | colorText: "#B5B5B5"
24 | };
25 |
26 | // Aqui ele pega os elementos Contruidos acima e remonta eles no formato escrito no browser,
27 | // um colorHeadings equivale a --color-headings agora
28 | const transformKey = key =>
29 | "--" + key.replace(/([A-Z])/g, "-$1").toLowerCase()
30 |
31 | // Mapeia e percorre os elementos, setando as novas propriedades.
32 | const changeColors = (colors) => {
33 | Object.keys(colors).map(key =>
34 | html.style.setProperty(transformKey(key), colors[key])
35 | );
36 | };
37 |
38 | // Verifica se o input está com checked ou não e com isso retorna a nova cor da página
39 | checkBox.addEventListener("change", ({target}) => {
40 | target.checked ? changeColors(darkMode) : changeColors(initialColors)
41 | });
42 |
43 |
44 | /*Salvando no LocalStorage as informações*/
45 |
46 | // Pega o item caso ele exista
47 | const isExistLocalStorage = (key) => localStorage.getItem(key) != null;
48 | // Envia os novos dados para o local storage
49 | const createOrEditLocalStorage = (key, value) => localStorage.setItem(key, JSON.stringify(value));
50 | // Pega o valor do localStorage
51 | const getValeuLocalStorage = (key) => JSON.parse(localStorage.getItem(key));
52 |
53 | // Verifica as alterações do input e envia os dados modo e cor para o localStorage
54 | checkBox.addEventListener("change", ({target}) => {
55 | if(target.checked){
56 | changeColors(darkMode);
57 | createOrEditLocalStorage('modo','darkMode');
58 | }else{
59 | changeColors(initialColors)
60 | createOrEditLocalStorage('modo','initialColors')
61 | };
62 | });
63 |
64 | // Verifica se existe um modo criado no localStorage, caso não exista,ele inicializa um modo com a cor branca
65 | if(!isExistLocalStorage('modo')){
66 | createOrEditLocalStorage('modo', 'initialColors');
67 | };
68 |
69 | // Pega o valor que está no localStorage e retorna para a tela.
70 | if(getValeuLocalStorage('modo') === 'initialColors'){
71 | checkBox.removeAttribute('checked');
72 | changeColors(initialColors);
73 | } else {
74 | checkBox.setAttribute('checked', "");
75 | changeColors(darkMode);
76 | };
--------------------------------------------------------------------------------