diff --git a/src/App.vue b/src/App.vue
index 0d0ac98..ad57c64 100644
--- a/src/App.vue
+++ b/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 {
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/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..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) {
@@ -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;
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