diff --git a/frontend/html/layout.html b/frontend/html/layout.html
index 53f49fc89..08399e5e0 100644
--- a/frontend/html/layout.html
+++ b/frontend/html/layout.html
@@ -9,12 +9,6 @@
     {% block meta %}
         {% include "common/meta.html" %}
     {% endblock %}
-    <script>
-        const theme = localStorage.getItem('theme');
-        if (theme !== null) {
-            document.documentElement.setAttribute('theme', theme);
-        }
-    </script>
 
     {% block feeds %}
     <link rel="alternate" type="application/rss+xml"
@@ -62,10 +56,7 @@
             CC BY-SA
         </div>
         <div class="footer-right">
-            <label class="theme-switcher" for="checkbox">
-                <input type="checkbox" id="checkbox" />
-                <span class="slider round"></span>
-            </label>
+            <theme-switcher></theme-switcher>
 
             {% if me %}
                 <form method="POST" action="{% url "logout" %}">
diff --git a/frontend/static/js/App.js b/frontend/static/js/App.js
index aca9589be..5b2533a6f 100644
--- a/frontend/static/js/App.js
+++ b/frontend/static/js/App.js
@@ -7,7 +7,7 @@ import {
     createFileInput,
     createMarkdownEditor,
     handleFormSubmissionShortcuts,
-    imageUploadOptions
+    imageUploadOptions,
 } from "./common/markdown-editor";
 import { getCollapsedCommentThreadsSet } from "./common/comments";
 
@@ -38,40 +38,17 @@ const App = {
     initializeEmojiForPoorPeople() {
         const isApple = /iPad|iPhone|iPod|OS X/.test(navigator.userAgent) && !window.MSStream;
         if (!isApple) {
-            document.body = twemoji.parse(
-                document.body,
-                { base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/" }
-            );
+            document.body = twemoji.parse(document.body, {
+                base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/",
+            });
         }
     },
     initializeThemeSwitcher() {
-        const themeSwitch = document.querySelector('.theme-switcher input[type="checkbox"]');
         const mediaQueryList = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
 
-        themeSwitch.addEventListener(
-            "change",
-            function (e) {
-                let theme = "light";
-                if (e.target.checked) {
-                    theme = "dark";
-                }
-                document.documentElement.setAttribute("theme", theme);
-                localStorage.setItem("theme", theme);
-            },
-            false
-        );
-
-        const theme = localStorage.getItem("theme");
-        themeSwitch.checked = theme ? theme === "dark" : mediaQueryList.matches;
-
         const setFaviconHref = (e) => {
             const svgFavicon = document.querySelector('link[type="image/svg+xml"]');
             const isDark = e.matches;
-
-            if (!theme) {
-                themeSwitch.checked = isDark;
-            }
-
             svgFavicon.href = isDark ? "/static/images/favicon/favicon-dark.svg" : "/static/images/favicon/favicon.svg";
         };
 
@@ -91,7 +68,7 @@ const App = {
 
         const fullMarkdownEditors = [...document.querySelectorAll(".markdown-editor-full")].reduce(
             (editors, element) => {
-                const fileInputEl = createFileInput({ allowedTypes: imageUploadOptions.allowedTypes })
+                const fileInputEl = createFileInput({ allowedTypes: imageUploadOptions.allowedTypes });
                 const editor = createMarkdownEditor(element, {
                     autosave: {
                         enabled: false,
@@ -145,7 +122,7 @@ const App = {
                         {
                             name: "upload-file",
                             action: () => {
-                                fileInputEl.click()
+                                fileInputEl.click();
                             },
                             className: "fa fa-paperclip",
                             text: "Upload image",
diff --git a/frontend/static/js/components/ThemeSwitcher.vue b/frontend/static/js/components/ThemeSwitcher.vue
new file mode 100644
index 000000000..1422b63e1
--- /dev/null
+++ b/frontend/static/js/components/ThemeSwitcher.vue
@@ -0,0 +1,58 @@
+<template>
+    <label style="width: 6.25em">
+        <span class="sr-only">Выберите тему</span>
+        <select :value="theme" width="6.25em" @input="setTheme" ref="themeSelect">
+            <option value="dark">Темная тема</option>
+            <option value="light">Светлая тема</option>
+            <option value="auto">Системная тема</option>
+        </select>
+    </label>
+</template>
+
+<script>
+const storageKey = "theme";
+
+const parseTheme = (theme) => (theme === "auto" || theme === "dark" || theme === "light" ? theme : "auto");
+
+const loadTheme = () => parseTheme(typeof localStorage !== "undefined" && localStorage.getItem(storageKey));
+
+function storeTheme(theme) {
+    if (typeof localStorage !== "undefined") {
+        localStorage.setItem(storageKey, theme === "light" || theme === "dark" ? theme : "");
+    }
+}
+
+const getPreferredColorScheme = () => (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
+
+function onThemeChange(theme) {
+    document.documentElement.setAttribute("theme", theme === "auto" ? getPreferredColorScheme() : theme);
+    storeTheme(theme);
+}
+
+export default {
+    name: "ThemeSwitcher",
+    props: {},
+    mounted() {
+        matchMedia(`(prefers-color-scheme: light)`).addEventListener("change", () => {
+            if (loadTheme() === "auto") onThemeChange("auto");
+        });
+    },
+    data() {
+        const theme = loadTheme();
+        onThemeChange(theme);
+        return { theme };
+    },
+    methods: {
+        setTheme(event) {
+            if (!event.currentTarget) {
+                return;
+            }
+
+            const theme = parseTheme(event.currentTarget.value);
+
+            onThemeChange(theme);
+            this.theme = theme;
+        },
+    },
+};
+</script>
diff --git a/frontend/static/js/main.js b/frontend/static/js/main.js
index f573a01c5..2f91affd7 100644
--- a/frontend/static/js/main.js
+++ b/frontend/static/js/main.js
@@ -28,6 +28,7 @@ Vue.component("v-select", vSelect);
 Vue.component("tag-select", () => import("./components/TagSelect.vue"));
 Vue.component("simple-select", () => import("./components/SimpleSelect.vue"));
 Vue.component("reply-form", () => import("./components/ReplyForm.vue"));
+Vue.component("theme-switcher", () => import("./components/ThemeSwitcher.vue"));
 
 // Since our pages have user-generated content, any fool can insert "{{" on the page and break it.
 // We have no other choice but to completely turn off template matching and leave it on only for components.
@@ -77,7 +78,12 @@ new Vue({
             }
         },
         showReplyForm(commentId, username, draftKey) {
-            this.replyTo = { commentId, username, draftKey }
+            this.replyTo = { commentId, username, draftKey };
         },
     },
 });
+
+// Отдельный инстанс для футера
+new Vue({
+    el: "#footer",
+});