Dark Mode para websites em Shell Script.
Este artigo foi atualizado em: 22 de setembro de 2021
Eu tinha uma grande necessidade de por o meu site em modo dark mode em determinado horários! Meu olhos doem muito a noite e ter um site todo branco a partir das 19 horas era impossivel de fazer a leitura. Eu sei, estou ficando velho.
Eu não curto javascript, nada contra mas apenas não gosto de utilizar, com exceção da área de aluno para meus cursos o resto do meu site é apenas html/css. Eu precisava então deste maldito dark mode mas como fazer o mesmo sem javascript?
Foi ai que me veio a ideia, vou utilizar o que tenho! Eu tenho um servidor na nuvem aonde tenho controle total do mesmo, então este script consiste em duas coisas! Fazer verificação com o cron às 19 horas e 6 horas da manhã e ter um script para lançar nestes horários especificos.
Criação do Script
A primeira parte é criar nosso script, normalmente as páginas tem uma chamada de css externo, como esse:
< link rel="stylesheet" href="/clean.css" >
Você vai precisar de dois css, um que seja o formato "limpo" do seu site e outro que é "dark", o css fica por sua conta produzir. aqui os css que tenho são simples e divididos em dois arquivos.
$ ls *.css nix.css clean.css
O que foi incrementado no nix.css, veja a diferença!
$ diff nix.css clean.css
< body{font-family:monospace,sans-serif; max-width:900px; margin: 0px auto; padding:0 10px; font-size: 16px;}
---
> body{background-color: black; color:#e9e9e9; font-family:monospace,sans-serif; max-width:900px; margin: 0px auto; padding:0 10px; font-size: 16px;}
11c11,13
< hr{border: 3px solid black; margin-top: 4%; margin-bottom: 4%;}
---
> hr{border: 3px solid #e9e9e9; margin-top: 4%; margin-bottom: 4%;}
> a{color: #d87900;}
O script vai rodar sob o find, vou fazer uma simples execução substituindo a chamada clean.css por nix.css em todas páginas com formato .html para exemplo. Altere os nomes para a sua necessidade.
$ find . -name "*.html" -exec sed 's/clean.css/nix.css/' {} \;
# RETORNO REDUZIDO
< link rel="stylesheet" href="/nix.css" >
Ok, funcionou. Então vamos começara a elaborar nosso script, precisamos primeiramente entrar no diretório aonde está hospedado nosso site, aqui localmente e no meu servidor fica em /var/www/html/ . Tbm vou me encarregar de fazer dois argumentos o daymode e darkmode.
#!/bin/sh
dirWWW=/var/www/html/
cd $dirWWW
if [ $1 = 'daymode' ]; then
find . -name "*.html" -exec sed -i 's/nix.css/clean.css/' {} \;
elif [ $1 = 'darkmode' ]; then
find . -name "*.html" -exec sed -i 's/clean.css/nix.css/' {} \;
fi
Este script ficará presente aonde você desejar, ele claro vai precisar estar em seu servidor. Como eu disponibilizo os scripts para as pessoas eu vou deixar no root do meu site. Não esqueça de dar permissão de execução.
O próximo passo é inserir na tabela do cron a chamada para o nosso script! Vamos fazer duas chamadas, um vai executar as 6 da manhã e outro as 19 horas da noite.
$ crontab -e
Insira as seguintes linhas no crontab:
# Executa as 6 horas da manhã 0 06 * * * /var/www/html/dark-theme.sh daymode # Executa as 19 horas 0 19 * * * /var/www/html/dark-theme.sh darkmode
A chamada /var/www/html/dark-theme.sh você deve alterar para aonde está localizado seu script. Divirta-se