Merge pull request #4 from bondarevpavel/dark-theme

Added dark theme switcher
avito-tech · Sep 30, 2022 · 413c6a0 · 413c6a0
2 parents 6b59ba9 + c3bfd19
commit 413c6a0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/css/lemon.min.css b/css/lemon.min.css
diff --git a/index.html b/index.html
@@ -30,7 +30,11 @@
         <div class="container">
             <div class="row">
                 <div class="column">
-                    <h1>Protocol</h1>
+                    <h1>
+                        Protocol
+                        <button v-if="!isDark" @click="toggleTheme">Dark theme</button>
+                        <button v-if="isDark" @click="toggleTheme">Bright theme</button>
+                    </h1>
                     <ul>
                         <li v-for="logItem in log" class="row">
                             <div class="colum">

diff --git a/js/main.js b/js/main.js
@@ -18,7 +18,11 @@ function newLogItem() {
 
 new Vue({
     el: '#app',
-    mounted() {},
+    mounted() {
+        if (this.isDark) {
+            document.body.classList.add("dark-theme")
+        }
+    },
     methods: {
         removeLine() {
             const text = event.target.parentNode.parentNode.querySelector('input').value || null;
@@ -55,6 +59,13 @@ new Vue({
         clear() {
             this.log = [newLogItem()];
             this.persist();
+        },
+        toggleTheme() {
+            this.isDark = !this.isDark
+            this.isDark
+                ? localStorage.setItem('dark-theme', '1')
+                : localStorage.removeItem('dark-theme')
+            document.body.classList.toggle("dark-theme")
         }
     },
     template: '#user',
@@ -63,7 +74,8 @@ new Vue({
             log: JSON.parse(localStorage.getItem('protocol-log')) || [
                 newLogItem()
             ],
-            timeOut: null
+            timeOut: null,
+            isDark:  localStorage.getItem('dark-theme') !== null
         };
     },
     computed: {}