👞 👨🏾‍🚀 🚵 インターネットでの昼と夜、またはWeb開発者への公開レター 🎈 👩🏽‍🍳 👨🏾‍✈️

私は経験豊富なWeb開発者であり、長い間コンピューターの前に座らなければなりません。そのため、夕方までに目が疲れないように、保護スクリーン、特殊メガネ、目のエクササイズから、さまざまな「アイセーバー」モードやモニター設定によるその他の操作まで、視力への負担を軽減するためのあらゆる方法を試す必要がありました。

私の意見では、あなたの健康のために戦う最も効果的な方法の1つは、オペレーティングシステムの設定で暗いテーマまたは「夜」のテーマを選択することです。しかし、私は常にテキストエディタとブラウザを切り替える必要があり、これは非常に不快な効果が発生する場所です。

ご存知のように、オペレーティングシステムではWebサイトのコンテンツを管理することはできません。Webページのスタイルを決定するのはユーザーではなく設計者の責任であり、ほとんどのページは明るい色です。もちろん、この問題を解決しようとする「DarkReader」のようなプラグインもあります。しかし、残念ながら、それらすべてが何らかの形でページのコンテンツを歪め、さらに、サイトスクリプトの操作を混乱させる可能性があります。

そのため、プロジェクトの1つに取り組んでいるときに、編集長から、明るいテーマが目を痛めるという事実に言及して、暗いテーマを使用するように依頼されました。しかし、このプロジェクトは、とりわけ子供向けのコンテンツを公開しているため、それを行う方法はありませんでした。

これが最後の藁でした、そして私は自分自身に言いました：「それで十分です」！訪問者に、個人的な好みに応じて、ページを表示するモードを選択させます。

その後、すべてが簡単でした。アイデアの技術的な実装には、テストや、コード内のどこにスイッチを配置する方がよいかを考えるなど、せいぜい半日かかりました。色へのすべての参照をメインCSSファイルからlight.cssファイルに移動し、それをdark.cssファイルにコピーして、一部（すべてではない）の色を変更しました。最終的に起こったことは次のとおりです。

実装の詳細（例としてaiohttpを使用）

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», . , , , -. (, , ), , : «» «» ( ).

そして結論として、親愛なる仲間の開発者、私たち自身と私たちのユーザーを尊重し、今すぐ私たちのプロジェクトにそのようなソリューションを実装し始めましょう！難しいことではありません。

私たちは人々のためのウェブサイトを作っていますよね？

インターネットでの昼と夜、またはWeb開発者への公開レター

More articles: