Saya adalah pengembang web yang berpengalaman, dan saya harus duduk di depan komputer untuk waktu yang lama. Oleh karena itu, agar mata saya tidak lelah di malam hari, saya harus mencoba semua cara yang mungkin untuk mengurangi beban penglihatan - dari layar pelindung, kacamata khusus dan latihan mata hingga berbagai mode "penghemat mata" dan manipulasi lainnya dengan pengaturan monitor.
Menurut pendapat saya, salah satu metode yang paling efektif untuk memperjuangkan kesehatan Anda adalah pilihan tema gelap, atau "malam" dalam pengaturan sistem operasi. Namun, saya terus-menerus harus beralih antara editor teks dan browser, dan di sinilah efek yang sangat tidak menyenangkan terjadi.
Seperti yang Anda ketahui, sistem operasi tidak mengizinkan Anda untuk mengelola konten situs web. Terserah perancang, bukan pengguna, untuk memutuskan bagaimana menata halaman web, dan sebagian besar halaman berwarna terang. Tentu saja ada plugin seperti "Pembaca Gelap" yang mencoba menyelesaikan masalah ini. Namun, sayangnya, semuanya dengan satu atau lain cara mendistorsi konten halaman dan, sebagai tambahan, dapat mengganggu pengoperasian skrip situs.
Jadi, saat mengerjakan salah satu proyek, editor-in-chief kami menulis kepada saya dan meminta saya untuk menggunakan tema gelap, mengacu pada fakta bahwa cahaya melukai matanya. Tetapi proyek tersebut menerbitkan, antara lain, konten anak-anak, jadi tidak ada cara untuk melakukannya.
Ini adalah pukulan terakhir, dan saya berkata pada diri saya sendiri: "itu cukup"! Biarkan pengunjung memilih mode mana untuk menampilkan halaman, sesuai dengan preferensi pribadi mereka.
Kemudian semuanya sederhana. Implementasi teknis dari ide tersebut membutuhkan waktu paling lama setengah hari, termasuk tes dan memikirkan di mana dalam kode akan lebih baik untuk menempatkan sakelar. Saya baru saja memindahkan semua referensi ke color dari file CSS utama ke file light.css, lalu menyalinnya ke file dark.css dan mengubah beberapa (bahkan tidak semua) warna. Inilah yang terjadi pada akhirnya:
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», . , , , -. (, , ), , : «» «» ( ).
Dan sebagai kesimpulan: rekan pengembang yang terhormat, mari hormati diri kita sendiri dan pengguna kita dan mulai menerapkan solusi seperti itu dalam proyek kita sekarang! Tidak sulit sama sekali.
Kami membuat situs web untuk orang-orang, bukan?