Como Colocar Modo Dark no Blogger

Modo Dark é um recurso que visa tornar a tela escura. Esse recurso geralmente é encontrado em dispositivos móveis que incorporam a função Modo noturno ou Modo escuro, que tem o benefício de economizar o uso da bateria.

Aqui Seu Blogger compartilhará dicas sobre Como Colocar Modo Dark no Blogger. Aqui, adiciono o recurso Cookie para que, quando atualizamos a página que foi ativada com Modo Dark não retornará ao modo inicial, mesmo que meu amigo tenha mudado de página. Como, interessante não é? Para quem estiver interessado em instalar o recurso Modo noturno, siga as etapas abaixo.

Como Colocar Modo Dark no Blogger - Mode Noturno 

Primeiro abra a página Blogger > Clique no menu Tema e clique no botão Edit HTML > Adicione este código antes do código </body>

<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

Depois adicione o código CSS isso é antes do código </head>

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Observe o código que está marcado; o código é um exemplo de código que você pode editar alterando amigo .class-baru com classe ou ID em uma determinada parte do seu modelo. Por favor adicione .nightmode antes da classe ou ID da parte do modelo que você deseja alterar no momento Modo Dark ativo. Por exemplo, assim:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Edite também este código CSS para determinar a posição do botão Modo Dark

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Quando terminar de editar tudo o que precisa, clique no botão Salvar tema e veja os resultados no seu blog.

Clique no botão abaixo para ver um exemplo de implementação do recurso Modo Dark no Blogger. Clique no botão Modo noturno cuja posição está no canto superior direito.

• Resultado Final

Lunar Responsive Blogger Template

Bem, para meus amigos que estão interessados ​​nos modelos usados ​​no experimento Modo Dark acima. Após isso Lunar Responsive Blogger Template você pode baixá-lo aqui:

• Download

Para recursos no modelo Lunar, como você vê na página Resultado. Portanto, não há necessidade de perguntar coisas que não existem, por exemplo "Como é que não há barra lateral? Como é que isso é, como é que é ..." Ok!

Isso é tudo da Arlina Design para este post sobre Como colocar modo dark no blogger - modo noturno. Espero que seja útil e respeitoso.

Fonte: arlinadzgn