├── README.md ├── assets ├── loogle.png └── search.svg ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | ![loogle](https://user-images.githubusercontent.com/52254578/92855018-3071e200-f3c8-11ea-9fca-6bbae9907383.png) 2 | 3 | Esse repositório tem como inteção a demonstração do princípio de se criar um dark mode utilizando apenas uma linha de CSS. 4 | Para se conseguir essa façanha, foi utilizado da propriedade _filter_ do CSS como se mostra no snippet abaixo. 5 | 6 | ![dark-mode](https://user-images.githubusercontent.com/52254578/92855247-76c74100-f3c8-11ea-8187-30e52d336a4a.png) 7 | 8 | A aplicação pode ser acessada pelo [link](http://dark-mode.s3-website-us-east-1.amazonaws.com/ "Loogle") 9 | -------------------------------------------------------------------------------- /assets/loogle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbrazl/loogle/fa7ed19952ae7dcd48cdae56cadfa3dfacaab499/assets/loogle.png -------------------------------------------------------------------------------- /assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loogle 7 | 8 | 9 | 10 |
11 |
12 |

dark

13 |
14 |
15 |
16 |
17 | 18 | loogle logo 19 |
20 |
21 | 22 | icone de busca 27 |
28 |
29 | 30 | 37 |
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const toggle = document.querySelector(".toggle"); 2 | const toggle_label = document.querySelector(".toggle-label"); 3 | const body = document.querySelector("body"); 4 | const inverts = document.querySelectorAll(".invert"); 5 | 6 | toggle.addEventListener("click", () => { 7 | body.classList.toggle("dark-mode"); 8 | toggle.classList.toggle("toggle-switch"); 9 | toggle_label.innerHTML = toggle_label.innerHTML === "dark" ? "light" : "dark"; 10 | inverts.forEach((node) => node.classList.toggle("dark-mode")); 11 | }); 12 | 13 | const input = document.querySelector(".search-input"); 14 | const form = document.querySelector("form"); 15 | 16 | form.addEventListener("submit", (event) => { 17 | event.preventDefault(); 18 | }); 19 | 20 | input.addEventListener("change", (event) => { 21 | const search = event.target.value.replace(/[\s\d]/g, "+"); 22 | window.location.href = `https://www.google.com/search?q=${search}`; 23 | }); 24 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | 3 | * { 4 | outline: 0; 5 | margin: 0; 6 | padding: 0; 7 | border: 0; 8 | font-family: "Roboto"; 9 | } 10 | 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | header { 18 | width: 100%; 19 | height: 35px; 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | margin-top: 10px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: flex-end; 27 | } 28 | 29 | .toggle { 30 | width: 60px; 31 | height: 35px; 32 | border: 1px solid #000; 33 | border-radius: 22.5px; 34 | display: flex; 35 | justify-content: flex-start; 36 | align-items: center; 37 | padding: 0 3px; 38 | margin-right: 20px; 39 | cursor: pointer; 40 | } 41 | 42 | .switch { 43 | width: 30px; 44 | height: 30px; 45 | border-radius: 50%; 46 | background: #424242; 47 | } 48 | 49 | .toggle-label { 50 | margin-right: 10px; 51 | font-size: 18px; 52 | color: #000; 53 | } 54 | 55 | .dark-mode { 56 | filter: invert(1) hue-rotate(180deg); 57 | } 58 | 59 | .toggle-switch { 60 | justify-content: flex-end; 61 | } 62 | 63 | .wrapper { 64 | width: 100%; 65 | height: 100%; 66 | background-color: #fff; 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | flex-direction: column; 71 | } 72 | 73 | img { 74 | width: 272px; 75 | object-fit: contain; 76 | } 77 | 78 | form { 79 | padding: 20px; 80 | } 81 | 82 | .search-input { 83 | display: flex; 84 | align-items: center; 85 | padding-left: 20px; 86 | border: 1px solid #808080; 87 | border-radius: 10px; 88 | } 89 | 90 | input { 91 | width: 100%; 92 | height: 45px; 93 | font-size: 18px; 94 | color: #000; 95 | } 96 | 97 | input::placeholder { 98 | color: #808080; 99 | } 100 | 101 | @media (min-width: 540px) { 102 | input { 103 | width: 500px; 104 | } 105 | } 106 | 107 | .search-icon { 108 | width: 25px; 109 | height: 25px; 110 | object-fit: contain; 111 | margin-right: 10px; 112 | } 113 | 114 | footer { 115 | width: 100%; 116 | height: 50px; 117 | background-color: #4285f4; 118 | display: flex; 119 | align-items: center; 120 | justify-content: center; 121 | position: absolute; 122 | left: 0; 123 | bottom: 0; 124 | } 125 | 126 | .footer-label { 127 | color: #fff; 128 | font-size: 18px; 129 | cursor: pointer; 130 | text-decoration: none; 131 | } 132 | 133 | .footer-label:active, 134 | .footer-label:visited { 135 | text-decoration: none; 136 | } 137 | --------------------------------------------------------------------------------