Tema escuro

Aprenda a deixar o site amplifi.casa escuro usando Stylus

Stylus é uma extensão para diversos navegadores, que permite que pessoas adicionem o CSS que quiserem a cada site.

Após adicionar a extensão, clique em seu ícone, e depois clique no domínio amplifi.casa, sob o texto "Write style for:".

Na caixa de texto que vai aparecer, cole o seguinte código:

body {
background: #222;
color: #f8f8f8;
}

.card {
background: #555; }

.card h3 a {
color: #fff;
}

a, a:visited {
color: #A795FF;
text-decoration: none;
}

.tabs a.selected {
color: #A795FF;
border-bottom: 1px solid #A795FF;
}

body > footer {
background: #333;
}

header {
background: #333; }

.card h3 a:hover {
color: #A795FF; }

main .article-meta .comments h2 {
color: #A795FF; }

main .article-meta .likes .action, main .article-meta .reshares .action {
color: #f8f8f8;
}

main .article-meta .reshares .action svg.feather {
color: #A795FF;
border: solid #A795FF thin;
}

main .article-meta .likes .action svg.feather {
color: #FF5F5F;
border: solid #FF5F5F thin; }

main .article-meta .reshares p, main .article-meta .reshares .action:hover {
color: #A795FF; }

main .article-meta .likes p, main .article-meta .likes .action:hover {
color: #FF5F5F; }

.button, input[type="submit"], button {
color: #A795FF;
border: 1px solid #A795FF; }

main .article-meta .tags li a {
color: #f8f8f8; }

main .article-meta .tags li {
background: #555; }

textarea, input, select {
background: #333;
color: #f8f8f8;
border: solid #555 thin; }

form.inline input[type="submit"]:not(.button) {
color: #A795FF; }

.left-icon {
background: #555; }

#plume-editor .placeholder {
color: #ccc; }

form.new-post input[type="submit"] {
background: #555;
color: #fff; }

small {
color: #ccc; }

form.new-post input[type="submit"]:hover {
background: #333; }

html ::selection, body ::selection {
background:#666 }

html ::-moz-selection, body ::-moz-selection {
background:#666 } 

main article pre {
background: #333; }

main .article-meta .comments .list {
background: #222; }

main .article-meta .comments .comment .author .display-name {
color: #f8f8f8; }

main .article-meta .comments a.button, main .article-meta .comments form.inline, main .article-meta .comments form.inline input {
color: #f8f8f8; }

main .article-meta .comments .comment .author .display-name:hover {
color: #A795FF; }

 main .article-meta .comments a.button:hover, main .article-meta .comments .comment .author:hover, main .article-meta .comments a.button:hover, main .article-meta .comments form.inline:hover, main .article-meta .comments form.inline input:hover {
color: #A795FF; }

main .article-meta .comments a.button::before, main .article-meta .comments form.inline::before, main .article-meta .comments form.inline input::before {
color: #A795FF; }

main .article-meta .comments .comment .author:hover .display-name {
color: #A795FF; }

main .article-meta .tags li:hover {
background: #333; }

Depois, certifique-se embaixo da caixa de texto que o código será aplicado em todas as páginas em amplifi.casa (não em todas as páginas, e nem em uma página específica em amplifi.casa. Mas você pode colocar outros endereços de instâncias de Plume que visita, se quiser).

Depois disso, você pode se quiser dar um nome personalizado na barra lateral (aonde deve estar escrito amplifi.casa), e clique para salvar.

Agora todas as páginas em amplifi.casa devem estar com texto claro em fundos escuros!

Revisão feita em 12/07 corrige os estilos de tags, comentários e caixas de código. Agradecimentos a @ardydo pelo toque.