Clever Geek Handbook

Day and night on the Internet, or an open letter to web developers

I am an experienced web developer, and I have to sit at the computer for a long time. Therefore, so that my eyes would not get tired by the evening, I had to try all possible ways to reduce the burden on vision - from protective screens, special glasses and eye exercises to various “eye saver” modes and other manipulations with monitor settings.



In my opinion, one of the most effective methods of fighting for your health is the choice of dark, or "night" themes in the operating system settings. However, I constantly have to switch between the text editor and the browser, and this is where a very unpleasant effect occurs.



As you know, the operating system does not allow you to manage the content of the website. It is up to the designer, not the user, to decide how to style a web page, and most pages are light-colored. Of course, there are plugins like "Dark Reader" that try to solve this problem. But, unfortunately, all of them in one way or another distort the content of the pages and, in addition, can disrupt the operation of site scripts.



And so, while working on one of the projects, our editor-in-chief wrote to me and asked me to use a dark theme, referring to the fact that the light one hurts his eyes. But the project publishes, among other things, children's content, so there was no way to do it.



This was the last straw, and I said to myself: "that's enough"! Let the visitor choose in which mode to display the page, in accordance with their personal preferences.



Then everything was simple. The technical implementation of the idea took me at most half a day, including tests and thinking about where in the code it would be better to place the switch. I just moved all references to color from the main CSS file to light.css file, then copied it to dark.css file and changed some (not even all) colors. Here's what happened in the end:



image



Implementation details (using aiohttp as an example) 
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», . , , , -. (, , ), , : «» «» ( ).



And in conclusion: dear fellow developers, let's respect ourselves and our users and start implementing such solutions in our projects right now! It's not difficult at all.



We make websites for people, right?



More articles:


All Articles