Skip to main content
CARISMA.NEWS

follow us

V3 | V8

Adicionando Modo noturno no blogger Com Cookie

Alterar a cor de fundo para mais escura ajuda a ler sob pouca luz. Isso pode ser conseguido facilmente com o JS.  Veja como fazer isso.

1. Faça o login no seu blog / site.
2.Clique em Tema> Editar HTML
3. Adicione o CSS modo escuro abaixo, salve o código acima


<style type="text/css">
/* Dark Mode */
.dark-mode body{background:#121212;color:#fff}
.dark-mode #header-wrapper{background:#232323;color:#fff}
.dark-mode #tag-div{background:#232323;color:#fff}
.dark-mode .tag-div{background:#232323;color:#fff}
</style>


Por favor, altere o código de cor que marquei a cor vermelha com a cor escura que você gosta. Lá eu uso cores escuras do youtube (Dark Mode Youtube). Você pode mudar cores como o Twitter (Dark Mode Twitter). E também altere sua tag div, que marquei com a cor Aqua , de acordo com a tag div no seu blog. * Tag div de cada blog são geralmente diferentes.

4. Adicione o botão / botão CSS para o modo noturno, como neste blog.


<style type='text/css'>
/* Dark Mode Button */
.mydark{background:#f80538;float:right;color:#fff;display:inline-block;height:30px;line-height:30px;padding:0 10px;border-radius:3px;font-size:13px;font-weight:700;animation:anim 2s ease-in infinite}
.mydark:hover{background:#444;color:#fff}
#dark-myar{width:95%;position:absolute;top:0;left:0;margin:12px 0}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
</style>


As configurações do botão CSS dependem do modelo do blog, portanto, se o botão não for apropriado, você poderá alterar / ajustar o CSS. porque o botão usual que eu uso não é adequado ou adequado para ser aplicado ao seu blog / template.

5. Em seguida, adicione este JavaScript, coloque-o acima do <body> ... </body>


<script type='text/javascript'>//<![CDATA[
var _0x2f0e=['innerHTML','addEventListener','click','preventDefault','classList','toggle','dark-mode','setItem','removeItem','localStorage','getItem','myDarkMode','documentElement','\x20dark-mode','querySelector','#dark-myar'];(function(_0x1b79a7,_0x3a0621){var _0x966a12=function(_0x3e79fd){while(--_0x3e79fd){_0x1b79a7['push'](_0x1b79a7['shift']());}};_0x966a12(++_0x3a0621);}(_0x2f0e,0xa9));var _0x2b5b=function(_0x462a3a,_0x3e5e7f){_0x462a3a=_0x462a3a-0x0;var _0x26f27e=_0x2f0e[_0x462a3a];return _0x26f27e;};;(function(_0x512a50,_0x163dc1,_0x16c793){if(!(_0x2b5b('0x0')in _0x512a50))return;var _0x1d0913=localStorage[_0x2b5b('0x1')](_0x2b5b('0x2'));if(_0x1d0913){_0x163dc1[_0x2b5b('0x3')]['className']+=_0x2b5b('0x4');}}(window,document));;(function(_0x78db9c,_0x2d7dec,_0x44c5fe){if(!('localStorage'in _0x78db9c))return;var _0x41c733=_0x2d7dec[_0x2b5b('0x5')](_0x2b5b('0x6'));if(!_0x41c733)return;_0x41c733[_0x2b5b('0x7')]+='<li\x20id=\x22dark-mode\x22><a\x20class=\x22mydark\x22\x20role=\x22button\x22\x20href=\x22#\x22><i\x20class=\x22fas\x20fa-moon\x22></i>\x20Dark\x20Mode</a></li>';var _0x42910d=_0x2d7dec[_0x2b5b('0x5')]('#dark-mode');if(!_0x42910d)return;_0x42910d[_0x2b5b('0x8')](_0x2b5b('0x9'),function(_0x186dc3){_0x186dc3[_0x2b5b('0xa')]();_0x2d7dec[_0x2b5b('0x3')][_0x2b5b('0xb')][_0x2b5b('0xc')](_0x2b5b('0xd'));if(_0x2d7dec['documentElement'][_0x2b5b('0xb')]['contains'](_0x2b5b('0xd'))){localStorage[_0x2b5b('0xe')](_0x2b5b('0x2'),!![]);return;}localStorage[_0x2b5b('0xf')](_0x2b5b('0x2'));},![]);}(window,document));
//]]></script>




6. E adicione o menu HTML / <ul id='dark-myar'/>

tag de botão Salve-o no seu blog ou salve-o no widget html / javascript.
depende de você, gosto de onde. E olhe para o seu blog.