Je suis un développeur web expérimenté et je dois rester assis longtemps devant l'ordinateur. Par conséquent, pour que mes yeux ne se fatiguent pas le soir, j'ai dû essayer toutes les façons possibles de réduire le fardeau de la vision - des écrans de protection, des lunettes spéciales et des exercices oculaires aux divers modes «économiseur d'œil» et autres manipulations avec les paramètres du moniteur.
À mon avis, l'une des méthodes les plus efficaces pour lutter pour votre santé est le choix de thèmes sombres ou «nuit» dans les paramètres du système d'exploitation. Cependant, je dois constamment basculer entre un éditeur de texte et un navigateur, et c'est là qu'un effet très désagréable se produit.
Comme vous le savez, le système d'exploitation ne vous permet pas de gérer le contenu du site Web. C'est au concepteur, et non à l'utilisateur, de décider du style d'une page Web, et la plupart des pages sont de couleur claire. Bien sûr, il existe des plugins comme "Dark Reader" qui tentent de résoudre ce problème. Mais, malheureusement, tous, d'une manière ou d'une autre, déforment le contenu des pages et, en plus, peuvent perturber le fonctionnement des scripts du site.
Et donc, tout en travaillant sur l'un des projets, notre rédacteur en chef m'a écrit et m'a demandé d'utiliser un thème sombre, faisant référence au fait que le clair lui fait mal aux yeux. Mais le projet publie, entre autres, du contenu pour enfants, il n'y avait donc aucun moyen de le faire.
C'était la goutte d'eau, et je me suis dit: "ça suffit"! Laissez le visiteur choisir dans quel mode afficher la page, en fonction de ses préférences personnelles.
Ensuite, tout était simple. La mise en œuvre technique de l'idée m'a pris au plus une demi-journée, y compris les tests et la réflexion sur où dans le code il serait préférable de placer le commutateur. J'ai simplement déplacé toutes les références à la couleur du fichier CSS principal vers le fichier light.css, puis je l'ai copié dans le fichier dark.css et j'ai changé certaines couleurs (pas toutes). Voici ce qui s'est passé à la fin:
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», . , , , -. (, , ), , : «» «» ( ).
Et en conclusion: chers collègues développeurs, respectons nous-mêmes et nos utilisateurs et commençons dès maintenant à implémenter de telles solutions dans nos projets! Ce n'est pas du tout difficile.
Nous créons des sites Web pour les gens, non?