diff --git a/client/components/App.vue b/client/components/App.vue
index 5d94642f..8f544b7e 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -53,6 +53,9 @@ class App {
                     '--bg-loader-color', '--bg-input-color', '--bg-btn-color1',
                     '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
                     '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color',
+                    '--text-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
+                    '--text-tb-active', '--bg-tb-active', '--bg-tb-active-hover',
+                    '--text-tb-disabled', '--bg-tb-disabled',
                 ];
 
                 let root = document.querySelector(':root');
@@ -235,6 +238,15 @@ export default vueComponent(App);
     --bg-menu-color2: #e0e0e0;
     --text-menu-color: #757575;
 
+    --text-tb-normal: #3e843e;
+    --bg-tb-normal: #e6edf4;
+    --bg-tb-hover: #fff;
+    --text-tb-active: #fff;
+    --bg-tb-active: #8ab45f;
+    --bg-tb-active-hover: #81c581;
+    --text-tb-disabled: #d3d3d3;
+    --bg-tb-disabled: #808080;
+
     /* light */
     --bg-app-color-light: #fff;
     --text-app-color-light: #000;
@@ -249,6 +261,15 @@ export default vueComponent(App);
     --bg-menu-color2-light: #e0e0e0;
     --text-menu-color-light: #757575;
 
+    --text-tb-normal-light: #3e843e;
+    --bg-tb-normal-light: #e6edf4;
+    --bg-tb-hover-light: #fff;
+    --text-tb-active-light: #fff;
+    --bg-tb-active-light: #8ab45f;
+    --bg-tb-active-hover-light: #81c581;
+    --text-tb-disabled-light: #d3d3d3;
+    --bg-tb-disabled-light: #808080;
+
     /* dark */
     --bg-app-color-dark: #222;
     --text-app-color-dark: #ccc;
@@ -263,6 +284,14 @@ export default vueComponent(App);
     --bg-menu-color2-dark: #424242;
     --text-menu-color-dark: #858585;
     
+    --text-tb-normal-dark: #3e843e;
+    --bg-tb-normal-dark: #c6cde4;
+    --bg-tb-hover-dark: #ddd;
+    --text-tb-active-dark: #ddd;
+    --bg-tb-active-dark: #7aa44f;
+    --bg-tb-active-hover-dark: #71b571;
+    --text-tb-disabled-dark: #d3d3d3;
+    --bg-tb-disabled-dark: #808080;
 }
 
 a {
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index f4403014..c8b69822 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -1704,8 +1704,8 @@ export default vueComponent(Reader);
 .tool-button {
     margin: 0px 2px 7px 2px;
     padding: 0;
-    color: #3E843E;
-    background-color: #E6EDF4;
+    color: var(--text-tb-normal);
+    background-color: var(--bg-tb-normal);
     min-height: 38px;
     min-width: 38px;
     height: 38px;
@@ -1717,34 +1717,33 @@ export default vueComponent(Reader);
 }
 
 .tool-button:hover {
-    background-color: white;
+    background-color: var(--bg-tb-hover);
     cursor: pointer;
 }
 
 .tool-button-active {
     box-shadow: 0 0 0;
-    color: white;
-    background-color: #8AB45F;
+    color: var(--text-tb-active);
+    background-color: var(--bg-tb-active);
     position: relative;
     top: 1px;
     left: 1px;
 }
 
 .tool-button-active:hover {
-    color: white;
-    background-color: #81C581;
+    background-color: var(--bg-tb-active-hover);
     cursor: pointer;
 }
 
 .tool-button-disabled {
-    color: lightgray;
-    background-color: gray;
+    color: var(--text-tb-disabled);
+    background-color: var(--bg-tb-disabled);
     cursor: default;
 }
 
 .tool-button-disabled:hover {
-    color: lightgray;
-    background-color: gray;
+    color: var(--text-tb-disabled);
+    background-color: var(--bg-tb-disabled);
     cursor: default;
 }