Soy un desarrollador web experimentado y tengo que sentarme frente a la computadora durante mucho tiempo. Por lo tanto, para que mis ojos no se cansen por la noche, tuve que probar todas las formas posibles de reducir la carga visual, desde pantallas protectoras, gafas especiales y ejercicios oculares hasta varios modos de "protección ocular" y otras manipulaciones con la configuración del monitor.
En mi opinión, uno de los métodos más efectivos para luchar por su salud es la elección de temas oscuros o "nocturnos" en la configuración del sistema operativo. Sin embargo, tengo que cambiar constantemente entre un editor de texto y un navegador, y aquí es donde ocurre un efecto muy desagradable.
Como sabes, el sistema operativo no te permite administrar el contenido del sitio web. Depende del diseñador, no del usuario, decidir cómo diseñar una página web, y la mayoría de las páginas son de color claro. Por supuesto que hay plugins como "Dark Reader" que intentan solucionar este problema. Pero, lamentablemente, todos ellos de una forma u otra distorsionan el contenido de las páginas y, además, pueden perturbar el funcionamiento de los scripts del sitio.
Y así, mientras trabajaba en uno de los proyectos, nuestro editor en jefe me escribió y me pidió que usara un tema oscuro, refiriéndose al hecho de que el claro lastima sus ojos. Pero el proyecto publica, entre otras cosas, contenido infantil, por lo que no había forma de hacerlo.
Esta fue la gota que colmó el vaso, y me dije: "¡ya es suficiente"! Deje que el visitante elija en qué modo mostrar la página, de acuerdo con sus preferencias personales.
Entonces todo fue sencillo. La implementación técnica de la idea me llevó como máximo medio día, incluidas las pruebas y pensar en qué parte del código sería mejor colocar el interruptor. Simplemente moví todas las referencias al color del archivo CSS principal al archivo light.css, luego lo copié al archivo dark.css y cambié algunos colores (ni siquiera todos). Esto es lo que sucedió al 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», . , , , -. (, , ), , : «» «» ( ).
Y en conclusión: queridos compañeros desarrolladores, ¡respetémonos a nosotros mismos y a nuestros usuarios y comencemos a implementar este tipo de soluciones en nuestros proyectos ahora mismo! No es nada dificil.
Hacemos sitios web para personas, ¿verdad?