From e44057ac39b2a1c39aee5496478e62ce1ff6a020 Mon Sep 17 00:00:00 2001
From: Rafael Godinho <rafael.gslima@gmail.com>
Date: Sun, 16 May 2021 20:40:14 -0300
Subject: [PATCH 1/2] feat: create dark mode buttom and colors variables

---
 src/App.vue                     | 33 ++++++++++++++++++++++++++++++++-
 src/components/BurgerMenu.vue   |  2 +-
 src/components/InfoPanel.vue    |  3 ++-
 src/components/Menu.vue         |  7 ++++---
 src/components/TextRenderer.vue | 15 ++++++++++-----
 src/components/ToggleButton.vue |  2 +-
 src/store/AppStore.js           |  4 ++++
 7 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0d0ac98..144829f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="app">
+  <div id="app" >
+    <ToggleButton
+      :active="showDarkMode"
+      @on-click-toggle-button="setToggleDarkMode"
+    />
     <Menu />
     <TextRenderer />
   </div>
@@ -11,12 +15,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 +35,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 +53,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 +81,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 {
diff --git a/src/components/BurgerMenu.vue b/src/components/BurgerMenu.vue
index 4ed8520..8735ddc 100644
--- a/src/components/BurgerMenu.vue
+++ b/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;
diff --git a/src/components/InfoPanel.vue b/src/components/InfoPanel.vue
index 724bf85..ca8bbee 100644
--- a/src/components/InfoPanel.vue
+++ b/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 {
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 46e971c..1b307c0 100644
--- a/src/components/Menu.vue
+++ b/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;
     }
diff --git a/src/components/TextRenderer.vue b/src/components/TextRenderer.vue
index 9c882a4..32747e9 100644
--- a/src/components/TextRenderer.vue
+++ b/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 {
diff --git a/src/components/ToggleButton.vue b/src/components/ToggleButton.vue
index f2e67c4..95fd640 100644
--- a/src/components/ToggleButton.vue
+++ b/src/components/ToggleButton.vue
@@ -27,7 +27,7 @@ export default {
 
 <style lang="scss" scoped>
   .ToggleButton {
-    border: 1px solid;
+    border: 1px solid var(--line-default);
     border-radius: 5px;
   }
   .ToggleButton {
diff --git a/src/store/AppStore.js b/src/store/AppStore.js
index 2982467..0760ad8 100644
--- a/src/store/AppStore.js
+++ b/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;
+    },
   },
 })
\ No newline at end of file

From 837f21379925c5c526163e2453f80fa160664a8e Mon Sep 17 00:00:00 2001
From: Rafael Godinho <rafael.gslima@gmail.com>
Date: Sun, 16 May 2021 21:49:59 -0300
Subject: [PATCH 2/2] feat: Dark Mode - add icon and rules for show it

---
 src/App.vue                     |  3 ++-
 src/assets/moon-black.svg       |  3 +++
 src/assets/moon.svg             |  3 +++
 src/components/ToggleButton.vue | 17 ++++++++++++++++-
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/moon-black.svg
 create mode 100644 src/assets/moon.svg

diff --git a/src/App.vue b/src/App.vue
index 144829f..ad57c64 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,8 @@
 <template>
-  <div id="app" >
+  <div id="app">
     <ToggleButton
       :active="showDarkMode"
+      :bg="true"
       @on-click-toggle-button="setToggleDarkMode"
     />
     <Menu />
diff --git a/src/assets/moon-black.svg b/src/assets/moon-black.svg
new file mode 100644
index 0000000..8ebcbf5
--- /dev/null
+++ b/src/assets/moon-black.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.7066 0.00274765C7.50391 -0.0027381 7.31797 0.114737 7.23588 0.300147C7.15379 0.485558 7.19181 0.702186 7.33213 0.848565C8.36577 1.92686 9.00015 3.3888 9.00015 4.99996C9.00015 8.31366 6.31385 11 3.00015 11C2.5757 11 2.16207 10.956 1.76339 10.8725C1.56489 10.8309 1.36094 10.9133 1.2471 11.0812C1.13325 11.249 1.13207 11.469 1.2441 11.638C2.58602 13.663 4.88682 15 7.50012 15C11.6423 15 15.0001 11.6421 15.0001 7.49996C15.0001 3.42688 11.7534 0.112271 7.7066 0.00274765Z" fill="black"/>
+</svg>
diff --git a/src/assets/moon.svg b/src/assets/moon.svg
new file mode 100644
index 0000000..dc21c61
--- /dev/null
+++ b/src/assets/moon.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66077 11.3619C2.09296 11.4524 2.54093 11.5 3.00002 11.5C6.58987 11.5 9.50002 8.58987 9.50002 5.00002C9.50002 3.25482 8.81224 1.67027 7.69295 0.502625C11.4697 0.604839 14.5 3.69855 14.5 7.50002C14.5 11.366 11.366 14.5 7.49999 14.5C5.06138 14.5 2.91401 13.253 1.66077 11.3619Z" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/ToggleButton.vue b/src/components/ToggleButton.vue
index 95fd640..0800d96 100644
--- a/src/components/ToggleButton.vue
+++ b/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) {
@@ -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;