{"pageProps":{"title":"Alterando as cores do blog","description":"Vou ensinar como alterar as cores do blog para sua as cores de sua preferência","thumbnailUrl":"https://blogdomat.vercel.app/api/thumbnail.png?title=Alterando as cores do blog&icon=https://styled-components.com/logo.png","slug":"2-alterando-cores-do-blog","content":"<h2 id=\"mágica-do-styled-components\">Mágica do styled-components</h2>\n<p>Esse blog foi desenvolvido usando a mágica do styled-components (serio!!! sou fascinado), e com ele temos a facilidade de alterar as cores do blog editando apenas um arquivo que fica localizado na pasta <em>src/styles/theme.ts</em>.</p>\n<pre><code>const theme = {\n  colors: {\n    background: &#39;#080808&#39;,\n    text: &#39;#e3e3e3&#39;,\n    title: &#39;#c4c4c4&#39;,\n    primary: &#39;#81D6DB&#39;,\n    secondary: &#39;#c5c5c5&#39;,\n    selectBackground: &#39;#ffffff&#39;,\n    selectColor: &#39;#000000&#39;,\n    codeBackground: &#39;#111111&#39;\n  }\n}\n[...]</code></pre>\n<h2 id=\"o-que-cada-propriedade-altera\">O que cada propriedade altera?</h2>\n<p>Vou explicar com detalhes o que cada propriedade altera no layout:</p>\n<pre><code>const theme = {\n  colors: {\n    # essa é cor de fundo do blog\n    background: &#39;#080808&#39;,\n\n    # essa é a cor de todo o texto do blog\n    text: &#39;#e3e3e3&#39;,\n\n    # essa é a cor de todos os titúlos do blog, ex: h1, h2 [...]\n    title: &#39;#c4c4c4&#39;,\n\n    # essa é a cor primária do site, usada para: links,\n    # itálicos, negritos [...]\n    primary: &#39;#81D6DB&#39;,\n\n    # essa é a cor secundária, usada principalmente\n    # para o hover dos links\n    secondary: &#39;#c5c5c5&#39;,\n\n    # cor de fundo do texto selecionado no blog\n    selectBackground: &#39;#ffffff&#39;,\n\n    # cor do texto selecionado no blog\n    selectColor: &#39;#000000&#39;,\n\n    # cor de fundo do bloco de código\n    codeBackground: &#39;#111111&#39;\n  }\n}\n[...]</code></pre>\n<p><em>Viu como é fácil??</em></p>\n<p>Testa essa configuração para usar o blog sem o tema dark:</p>\n<pre><code>const theme = {\n  colors: {\n    background: &#39;#eaeaea&#39;,\n    text: &#39;#141415&#39;,\n    title: &#39;#222222&#39;,\n    primary: &#39;#81D6DB&#39;,\n    secondary: &#39;#c5c5c5&#39;,\n    selectBackground: &#39;#000000&#39;,\n    selectColor: &#39;#fafafa&#39;,\n    codeBackground: &#39;#e1e1e1&#39;\n  }\n}\n[...]</code></pre>\n<h2 id=\"considerações-finais\">Considerações finais</h2>\n<p>Viu como é fácil deixar o blog com sua cara? Até mais!!</p>\n"},"__N_SSG":true}