📿 👷🏻 🛌🏾 白天或黑夜在Internet上，或致Web开发人员的公开信 👨🏿‍🌾 🔦 🙋🏼

我是一位经验丰富的Web开发人员，必须坐在计算机上很长时间。因此，为了使我的眼睛在晚上不会疲劳，我不得不尝试所有可能的方法来减轻视力负担-从保护屏幕，专用眼镜和眼部锻炼到各种“护眼器”模式以及其他带有显示器设置的操作。

我认为，为您的健康而战的最有效方法之一是在操作系统设置中选择深色或“夜间”主题。但是，我经常需要在文本编辑器和浏览器之间切换，这是非常不愉快的结果。

如您所知，操作系统不允许您管理网站的内容。由设计师（而不是用户）来决定如何设置网页样式，并且大多数页面是浅色的。当然，有一些插件可以解决此问题，例如“ Dark Reader”。但是，不幸的是，它们全部以一种或另一种方式扭曲了页面的内容，此外，还可能破坏站点脚本的操作。

因此，当我们在其中一个项目上工作时，我们的总编辑写信给我，并请我使用深色主题，指的是光线伤害了他的眼睛。但是该项目发布了儿童内容等内容，因此没有办法。

这是最后一根稻草，我对自己说：“足够了”！让访问者根据个人喜好选择显示页面的方式。

然后，一切都很简单。这个想法的技术实施最多花了我半天的时间，包括测试和思考在代码中的哪个位置放置开关会更好。我只是将所有对颜色的引用从主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();
    });

如您所见，仅将“ Night mode”按钮放置在显眼的地方就足够了，该按钮可以选择所需的配色方案文件。事实证明这很方便，而且很快就感谢了。

现在，让我们梦想一下如果它是一个Web标准会是什么样子。假设在OS设置中，第一个项目是“外观”，它可以在深色和浅色主题之间进行选择。操作系统将此设置传输到浏览器，然后浏览器将其发送到网页。收到了此类说明的自适应站点（或者，如果您愿意，还可以使用具有个性化界面的资源），应通过切换配色方案并对其进行响应，并为访问者提供选择：使用当前方案或将“白天”切换为“夜晚”（反之亦然）。

最后，总结：亲爱的开发人员，让我们尊重自己和我们的用户，并立即在我们的项目中实施此类解决方案！一点也不难。

我们为人们打造网站，对吗？

白天或黑夜在Internet上，或致Web开发人员的公开信

More articles: