Sou um desenvolvedor web com experiência e tenho que ficar muito tempo sentado diante do computador. Portanto, para que meus olhos não se cansassem à noite, tive que tentar todas as maneiras possíveis para reduzir o fardo sobre a visão - de telas de proteção, óculos especiais e exercícios para os olhos a vários modos de “proteção ocular” e outras manipulações com configurações de monitor.
Na minha opinião, um dos métodos mais eficazes de lutar pela saúde é a escolha de temas escuros ou "noturnos" nas configurações do sistema operacional. No entanto, tenho que alternar constantemente entre um editor de texto e um navegador, e é aqui que ocorre um efeito muito desagradável.
Como você sabe, o sistema operacional não permite que você gerencie o conteúdo do site. Cabe ao designer, não ao usuário, decidir como estilizar uma página da web, e a maioria das páginas tem cores claras. Claro que existem plugins como o "Dark Reader" que tentam resolver esse problema. Mas, infelizmente, todos eles de uma forma ou de outra distorcem o conteúdo das páginas e, além disso, podem atrapalhar o funcionamento dos scripts do site.
E assim, enquanto trabalhava em um dos projetos, nosso editor-chefe me escreveu pedindo para usar um tema sombrio, referindo-se ao fato de que o claro machuca seus olhos. Mas o projeto publica, entre outras coisas, conteúdo infantil, então não tinha como fazer.
Essa foi a gota d'água, e eu disse a mim mesmo: "chega!" Deixe o visitante escolher o modo de exibição da página, de acordo com suas preferências pessoais.
Então tudo era simples. A implementação técnica da ideia me levou no máximo meio dia, incluindo testes e pensando em onde no código seria melhor colocar a chave. Acabei de mover todas as referências a cores do arquivo CSS principal para o arquivo light.css, depois copiei para o arquivo dark.css e alterei algumas (não todas) cores. Aqui está o que aconteceu no final:
main.py:
async def create_app():
...
jinja_setup(
app,
context_processors=[BaseHandler().context_processor])
views.py:
class BaseHandler:
async def context_processor(self, request):
...
return {
'theme': 'dark'
if request.cookies.get('theme') == 'dark' else 'light'}
base.html:
<head>
...
<link rel="stylesheet"
href="{{ static_root_url }}/css/{{ theme }}.css">
</head>
<body>
...
<div class="nav-block nav-item nav-theme">
{% if theme == 'dark' %}
<a href="javascript:void(0)" class="js-theme"
data-theme="light">
</a>
{% else %}
<a href="javascript:void(0)" class="js-theme"
data-theme="dark">
</a>
{% endif %}
</div>
...
</body>
base.js:
...
$('.js-theme').on('click', function () {
$.setCookie('theme', $(this).data('theme'));
location.reload();
});, « », . , .
, , -. , - «Look and feel», . , , , -. (, , ), , : «» «» ( ).
E para concluir: caros colegas desenvolvedores, vamos nos respeitar e aos nossos usuários e começar a implementar essas soluções em nossos projetos agora mesmo! Não é nada difícil.
Fazemos sites para pessoas, certo?