Feat/dark mode

src/App.vue

@@ -1,5 +1,10 @@
 <template>
   <div id="app">
+    <ToggleButton
+      :active="showDarkMode"
+      :bg="true"
+      @on-click-toggle-button="setToggleDarkMode"
+    />
     <Menu />
     <TextRenderer />
   </div>
@@ -11,12 +16,14 @@ import { updateSelectedFont } from './helpers.js'
 
 import Menu from './components/Menu.vue'
 import TextRenderer from './components/TextRenderer'
+import ToggleButton from './components/ToggleButton.vue'
 
 export default {
   name: 'App',
   components: {
     Menu,
     TextRenderer,
+    ToggleButton
   },
   head: {
     link: [
@@ -29,12 +36,16 @@ export default {
     ...mapState([
       'selectedFont',
       'fonts',
+      'showDarkMode'
     ])
   },
   watch: {
     selectedFont(value) {
       updateSelectedFont(value)
     },
+    showDarkMode(value){
+      value ? document.body.classList.add("dark-mode") : document.body.classList.remove("dark-mode");
+    }
   },
   mounted() {
     if(!this.selectedFont) this.setSelectedFont(this.fonts[1])
@@ -43,12 +54,26 @@ export default {
   methods: {
     ...mapMutations([
       'setSelectedFont',
+      'toggleDarkMode'
     ]),
+    setToggleDarkMode(){
+      this.toggleDarkMode()
+    }
   },
 }
 </script>
 
 <style lang="scss">
+:root {
+    --text-default: #000;
+    --line-default: #000;
+    --bg-default: #fff;
+    --text-dark-mode: #33CB9A;
+    --line-dark-mode: #33CB9A;
+    --bg-dark-mode: #000;
+}
+
+
   * {
     margin: 0;
     padding: 0;
@@ -57,6 +82,13 @@ export default {
   body {
     font-size: 16px;
     padding-top: 15px;
+    background-color: var(--bg-default);
+
+    &.dark-mode{
+      --text-default: var(--text-dark-mode);
+      --line-default: var(--line-dark-mode);
+      --bg-default: var(--bg-dark-mode);
+    }
   }
 
   .apply {

src/components/BurgerMenu.vue

@@ -25,7 +25,7 @@
     .bar {
       height: 3px;
       width: 30px;
-      background-color: black;
+      background-color: var(--line-default);
       margin-bottom: 3px;
       &:last-child {
         margin-bottom: 0;

src/components/InfoPanel.vue

@@ -44,7 +44,8 @@ table {
   margin: 0 auto;
   text-align: center;
   border-collapse: separate;
-  border: 1px solid black;
+  border: 1px solid var(--line-default);
+  color: var(--text-default);
   border-radius: 3px;
   th,
   td {

src/components/Menu.vue

@@ -135,7 +135,7 @@ export default {
   }
   table {
     border-collapse: separate;
-    border: 1px solid black;
+    border: 1px solid var(--line-default);
     border-radius: 3px;
     tr {
       td {
@@ -170,11 +170,12 @@ export default {
     margin-right: 5px;
     border-radius: 3px;
     background-color: transparent;
-    border: 1px solid;
+    border: 1px solid var(--line-default);;
     vertical-align: middle;
     cursor: pointer;
+    color: var(--text-default);
     &:hover {
-      background-color: black;
+      background-color: var(--line-default);
       color: white;
       border-color: transparent;
     }

src/components/TextRenderer.vue

@@ -205,9 +205,10 @@ export default {
   }
 
   table, th, td {
-    border: 1px solid black;
+    border: 1px solid var(--line-default);
     border-collapse: collapse;
     font-size: 16px;
+    color: var(--text-default);
   }
 
   th, td {
@@ -249,6 +250,8 @@ export default {
   }
 
   .customText {
+    background-color: var(--bg-default);
+    color: var(--text-default);
     padding: 10px 15px;
     margin: 50px auto 15px auto;
     display: block;
@@ -261,6 +264,7 @@ export default {
     height: 20vh;
     opacity: 1;
     outline: none;
+    border-color: var(--line-default);
 
     &.disabled {
       height: 0;
@@ -270,7 +274,7 @@ export default {
   }
   .viewer {
     pointer-events: none;
-    color: black;
+    color: var(--text-default);
     position: relative;
     z-index: 1;
     padding: 10px;
@@ -321,8 +325,9 @@ export default {
   }
 
   .toogleTyping {
-    border: 1px solid black;
-    background: #fff;
+    border: 1px solid var(--text-default);
+    background: var(--bg-default);
+    color: var(--text-default);
     border-radius: 3px;
     padding: 5px 10px;
     margin: 0 auto;
@@ -333,7 +338,7 @@ export default {
     &:hover {
       background-color: black;
       color: white;
-      border-color: transparent;
+      border-color: white ;
     }
   }
   @keyframes blink {

src/components/ToggleButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="ToggleButton"
-    :class="activeClass"
+    :class="[{bg: bg}, activeClass]"
     @click="$emit('on-click-toggle-button')"
   >
     <div class="knob" />
@@ -17,6 +17,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    bg:{
+      type: Boolean,
+      default: false
+    }
   },
   emits: ['on-click-toggle-button'],
   setup(props) {
@@ -27,7 +31,7 @@ export default {
 
 <style lang="scss" scoped>
   .ToggleButton {
-    border: 1px solid;
+    border: 1px solid var(--line-default);
     border-radius: 5px;
   }
   .ToggleButton {
@@ -43,6 +47,17 @@ export default {
         opacity: 1;
       }
     }
+    &.bg{
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      background: url('../assets/moon-black.svg') 6px center/14px no-repeat;
+      &.active{
+        .knob{
+          background: url('../assets/moon.svg') 6px center/14px no-repeat #c3c3c3;
+        }
+      }
+    }
   }
   .knob {
     height: 20px;

src/store/AppStore.js

@@ -6,6 +6,7 @@ export default createStore({
     errorCount: 0,
     wordsCount: 0,
     showCapitalLetters: true,
+    showDarkMode: false,
     disableTyping: true,
     value: '',
     sentences: [],
@@ -53,5 +54,8 @@ export default createStore({
     toggleCapitalLetters(state) {
       state.showCapitalLetters = !state.showCapitalLetters;
     },
+    toggleDarkMode(state) {
+      state.showDarkMode = !state.showDarkMode;
+    },
   },
 })