diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index 102e04d70..ccdf8b3c2 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -23,6 +23,14 @@ html,
   font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
 }
 
+select {
+  padding: 2px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  outline: none;
+  width: 120px;
+}
+
 .clear {
   clear: both
 }
diff --git a/src/static/css/pad/chat.css b/src/static/css/pad/chat.css
index b88f6fcb2..bc2f91ae1 100644
--- a/src/static/css/pad/chat.css
+++ b/src/static/css/pad/chat.css
@@ -83,7 +83,6 @@
   padding: 5px;
 }
 #chatinputbox #chatinput {
-  border: 1px solid #ccc;
   width: 100%;
 }
 
diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css
index 690a1eac1..87a1ea340 100644
--- a/src/static/css/pad/gritter.css
+++ b/src/static/css/pad/gritter.css
@@ -16,9 +16,11 @@
   top: auto;
   bottom: auto;
 }
+
 .gritter-item .popup-content {
   display: flex;
 }
+
 .gritter-item .gritter-content {
   flex: 1 auto;
   text-align: center;
diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css
index e69dcf5f1..c8bf9e849 100644
--- a/src/static/css/pad/popup.css
+++ b/src/static/css/pad/popup.css
@@ -60,15 +60,6 @@
 .popup p {
   margin: 5px 0;
 }
-.popup select {
-  background: #fff;
-  padding: 2px;
-  height: 24px;
-  border-radius: 3px;
-  border: 1px solid #ccc;
-  outline: none;
-  width: 120px;
-}
 
 /* Mobile devices */
 @media only screen and (max-width: 720px) {
diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css
index 753c2a05f..af85fc498 100644
--- a/src/static/css/pad/toolbar.css
+++ b/src/static/css/pad/toolbar.css
@@ -56,7 +56,7 @@
   background: #ddd;
 }
 .toolbar ul li a.selected {
-  background: #dadada !important;
+  background: #dadada;
 }
 
 .toolbar ul li a.grouped-left {
@@ -71,15 +71,6 @@
   border-left: 0;
 }
 
-.toolbar ul li select {
-  padding: 4px;
-  line-height: 22px;
-  height: 28px;
-  border-radius: 3px;
-  border: 1px solid #ccc;
-  outline: none;
-}
-
 .toolbar ul li[data-key=showusers] > a {
   min-width: 35px;
 }
diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
index 577dac2a5..406a08220 100644
--- a/src/static/skins/colibris/pad.css
+++ b/src/static/skins/colibris/pad.css
@@ -19,67 +19,46 @@
 @import url("src/plugins/tables2.css");
 @import url("src/plugins/author_hover.css");
 
+html {
+  font-size: 15px;
+}
+
 /* -----------------------------------------------------------------
  * COLORS
  * If you want to change main colors, please replace following rules
  * -----------------------------------------------------------------
  */
 
-/* NEUTRAL COLOR */
-body,
-.btn-default,
-.color\:black,
-[data-color=black]
-{ color: #41484e !important; }
+:root {
+  --dark-color: #374256;
+  --dark-soft-color: #576273;
+  --primary-color: #64d29b;
+  --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
+  --light-soft-color: #f2f3f4; /*#f9f9f9;*/
+  --light-color: white;
 
-/* MENUS ICONS */
-#edit_title:before,
-#tbl-menu:before
-{ color: #767676 !important; }
-/* MENU BUTTONS */
-.timeslider #editbar .buttontext
-{ background-color: #767676 !important; }
+  --text-color: var(--dark-color);
+  --text-soft-color: var(--dark-soft-color);
+  --border-color: var(--middle-color);
+  --bg-soft-color: var(--light-soft-color);
+  --bg-color: var(--light-color);
 
-/* PRIMARY BUTTONS */
-.btn-primary
-{
-  background-color: #64d29b;
-  color: white;
+  --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+
+body {
+  color: var(--text-color);
+  font-family: var(--main-font-family);
+}
+
+
 /* PRIMARY COLOR */
-h1,
-#slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a,
-.toolbar .show-more-icon-btn
-{ color: #64d29b; }
-#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) .popup-content{
-  background-color: #64d29b;
-}
-#slider-btn-container button {
-  border-color: #64d29b;
-}
-
-h2 {
-  opacity: .9 !important; /* make it a bit less agressive */
-}
-/* PRIMARY-COLOR VARIANT */
-.toolbar ul li a.selected,
-.toolbar ul li a.pressed,
-.toolbar ul li select:active {
-  background-color: #f0faf6 !important; /* primary light */
-}
-.toolbar ul li a.selected .buttonicon,
-.toolbar ul li a.pressed .buttonicon,
-.toolbar ul li select:active {
-  color: #5abb89; /* primary a bit darker */
+h1 {
+  color: var(--primary-color);
 }
 
 /* BACKGROUND COLOR */
 #editorcontainerbox {
-  background-color: #f9f9f9 !important;
-}
-
-/* FONT */
-body,
-#sidedivinner > div:before
-{ font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }
+  background-color: var(--bg-soft-color);
+}
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/components/buttons.css b/src/static/skins/colibris/src/components/buttons.css
index b13257cd6..176b15817 100644
--- a/src/static/skins/colibris/src/components/buttons.css
+++ b/src/static/skins/colibris/src/components/buttons.css
@@ -1,10 +1,10 @@
-button, .btn, #yui-picker-panel .button-group .yui-button button
+button, .btn
 {
   padding: 5px 20px;
   border-radius: 4px;
   line-height: 1.5;
   width: auto;
-  border: none !important;
+  border: none;
   font-weight: bold;
   text-transform: uppercase;
   position: relative;
@@ -12,10 +12,13 @@ button, .btn, #yui-picker-panel .button-group .yui-button button
   cursor: pointer;
 }
 
-button, select {
-  font-family: inherit;
-  font-size: inherit;
-  cursor: pointer;
+.btn-primary
+{
+  background-color: var(--primary-color);
+  color: var(--bg-color);
+}
+.btn-default {
+  color: var(--text-color);
 }
 
 
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
index 12efd9ee4..6202f3689 100644
--- a/src/static/skins/colibris/src/components/chat.css
+++ b/src/static/skins/colibris/src/components/chat.css
@@ -6,7 +6,7 @@
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
   width: 400px;
   height: 300px;
-  background-color: #f9f9f9 !important;
+  background-color: var(--bg-soft-color);
 }
 
 #chatbox.stickyChat {
@@ -23,7 +23,7 @@
   height: 44px;
   padding: 0 7px;
   z-index: 20000;
-  border-bottom: 1px solid #d2d2d2;
+  border-bottom: 1px solid var(--border-color);
 }
 
 #titlelabel, #chatlabel {
@@ -35,8 +35,7 @@
 #chatlabel { margin-right: 15px; }
 
 #chattext {
-  border-bottom: 1px solid #cccccc;
-  background-color: #fcfcfc;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .plugin-ep_author_neat #chattext {
diff --git a/src/static/skins/colibris/src/components/form.css b/src/static/skins/colibris/src/components/form.css
index 98a018eb0..2ea585e82 100644
--- a/src/static/skins/colibris/src/components/form.css
+++ b/src/static/skins/colibris/src/components/form.css
@@ -1,11 +1,19 @@
-input[type="text"], #input_title, #chatinput, .hyperlink-dialog>.hyperlink-url, select {
-  border: none !important;
+input[type="text"], select {
   border-radius: 3px;
+  box-shadow: none;
+  border: none;
+}
+
+input[type="text"] {
   padding: 8px 10px;
-  height: 28px;
-  background: none !important;
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  box-shadow: none !important;
+  background-color: var(--bg-color);
+  border: 1px solid var(--border-color);
+}
+select {
+  background-color: var(--bg-soft-color);
+  border: none;
+  padding: 4px 10px;
+  font-weight: bold;
 }
 
 
@@ -33,42 +41,38 @@ input[type="text"], #input_title, #chatinput, .hyperlink-dialog>.hyperlink-url,
 [type="checkbox"] + label:after {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
   margin-top: 4px;
-  border-radius: 1rem;
   transition: all .2s ease-in-out;
 }
 
 /* BEFORE, the container*/
 [type="checkbox"] + label:before {
-  width: 1.8rem;
-  height: 1rem;
-  border: 2px solid #999ea9;
-  background-color: transparent;
-}
-[type="checkbox"]:not(:checked) + label:before {
-
+  width: 24px;
+  height: 14px;
+  top: 0;
+  left: 0;
+  border-radius: 6px;
+  border: 2px solid var(--text-soft-color);
+  background-color: var(--bg-soft-color);
+  opacity: .7;
 }
 [type="checkbox"]:checked + label:before {
-  background-color: #808894;
-  border-color: white;
+  background-color: transparent;
+  border-color: var(--primary-color);
 }
 
 /* AFTER, the circle moving */
 [type="checkbox"] + label:after {
-  width: calc(1rem - 4px);
-  height: calc(1rem - 4px);
-  background-color: #999ea9;
-  top: 2px;
-  left: 2px;
-}
-[type="checkbox"]:not(:checked) + label:after {
-
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--text-soft-color);
+  top: -1px;
+  left: -3px;
 }
 [type="checkbox"]:checked + label:after {
-  background-color: white;
-  transform: translateX(.9rem);
+  background-color: var(--primary-color);;
+  transform: translateX(14px);
 }
 
 [type="checkbox"]:checked:disabled + label,
diff --git a/src/static/skins/colibris/src/components/gritter.css b/src/static/skins/colibris/src/components/gritter.css
index f77a7244d..3e16d837e 100644
--- a/src/static/skins/colibris/src/components/gritter.css
+++ b/src/static/skins/colibris/src/components/gritter.css
@@ -2,8 +2,11 @@
   top: 20px;
   bottom: auto;
 }
+.gritter-item:not(.error) .popup-content{
+  background-color: var(--primary-color);
+  color: var(--bg-color);
+}
 .gritter-item .popup-content {
-  color: white;
   margin-bottom: 10px;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
 }
@@ -18,13 +21,7 @@
   margin-right: -5px;
 }
 .gritter-item:not(.error) .gritter-close .buttonicon {
-  color: white;
-}
-@media (max-width: 720px) {
-  .gritter-item {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
+  color: var(--bg-color);
 }
 
 .gritter-item.popup > .popup-content {
diff --git a/src/static/skins/colibris/src/components/import-export.css b/src/static/skins/colibris/src/components/import-export.css
index 292941d65..e0ba4c5f3 100644
--- a/src/static/skins/colibris/src/components/import-export.css
+++ b/src/static/skins/colibris/src/components/import-export.css
@@ -1,9 +1,11 @@
 #importmessageabiword {
   font-style: italic;
+  color: var(--primary-color);
 }
 #importmessageabiword > a {
   font-weight: bold;
   text-decoration: underline;
+  color: var(--primary-color);
 }
 
 #importmessagefail {
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index a3db08525..626365ce9 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/src/static/skins/colibris/src/components/popup.css
@@ -2,7 +2,8 @@
   border-radius: 5px;
   padding: 25px;
   background: none;
-  background-color: white;
+  background-color: var(--bg-color);
+  color: var(--text-soft-color);
   border: none;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
 }
@@ -19,6 +20,7 @@
 .popup h2 {
   margin-bottom: 15px;
   margin-top: 20px;
+  color: var(--text-color);
 }
 
 .popup p {
diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css
index 0cfbaa012..f28d3dbff 100644
--- a/src/static/skins/colibris/src/components/scrollbars.css
+++ b/src/static/skins/colibris/src/components/scrollbars.css
@@ -1,8 +1,8 @@
 @media (min-width: 721px) {
   ::-webkit-scrollbar-track {
-    background-color: var(--middle-color);
+    background-color: var(--scrollbar-track);
     border-radius: 10px;
-    border: 7px solid var(--light-soft-color);
+    border: 7px solid var(--scrollbar-bg);
   }
 
   ::-webkit-scrollbar {
@@ -11,15 +11,15 @@
 
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: var(--dark-soft-color);
-    border: 7px solid var(--light-soft-color);
+    background-color: var(--scrollbar-thumb);
+    border: 7px solid var(--scrollbar-bg);
   }
 }
 
 .thin-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--light-soft-color);
+  background-color: var(--bg-soft-color);
   border-radius: 10px;
-  border: 5px solid var(--light-color);
+  border: 5px solid var(--bg-color);
 }
 
 .thin-scrollbar::-webkit-scrollbar {
@@ -28,6 +28,6 @@
 
 .thin-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 7px;
-  background-color: var(--middle-color);
-  border: 5px solid var(--light-color);
+  background-color: var(--border-color);
+  border: 5px solid var(--bg-color);
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/src/components/sidediv.css b/src/static/skins/colibris/src/components/sidediv.css
index 698975772..994926bfe 100644
--- a/src/static/skins/colibris/src/components/sidediv.css
+++ b/src/static/skins/colibris/src/components/sidediv.css
@@ -1,12 +1,14 @@
 #sidediv {
   background-color: transparent;
   border: none;
+  opacity: .8;
 }
 
 #sidedivinner>div:before {
+  font-family: var(--main-font-family); /* the parent div have font-family monospace (line number) */
+  color: var(--text-color);
   font-size: 13px;
   padding-right: 18px !important;
-  color: #818188;
   text-transform: uppercase;
   font-size: 11px !important;
   font-weight: bold;
@@ -22,7 +24,7 @@
 #sidedivinner>div {
   line-height: 24px;
   font-size: 10px !important;
-  color: #b2aaaa;
+  color: var(--text-soft-color);
 }
 
 #sidedivinner.authorColors>div, #sidedivinner.authorColors>div.primary-none, #sidedivinner>div {
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index e26638cff..9b052864a 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -1,8 +1,9 @@
 .toolbar {
-  background-color: white;
-  border-bottom: 1px solid #d2d2d2;
+  border-bottom: none;
   padding: 0;
-  color: #5f6368;
+  background-color: var(--bg-color);
+  color: var(--text-soft-color);
+  border-bottom: 1px solid var(--border-color);
 }
 
 .toolbar ul {
@@ -16,6 +17,7 @@
 .toolbar ul li {
   margin: 7px 1px;
 }
+
 .toolbar ul li a, .toolbar .buttonicon {
   color: inherit;
 }
@@ -41,10 +43,10 @@
 .toolbar ul li.separator:after {
   content: "";
   position: absolute;
-  top: -20px;
-  height: 40px;
+  top: -25px;
+  height: 50px;
   width: 1px;
-  background-color: rgba(78, 85, 92, 0.22);
+  background-color: var(--border-color);
 }
 
 .toolbar.condensed ul li {
@@ -60,26 +62,30 @@
   background: none;
   border: none;
   border-radius: 3px !important;
+  transition: background-color .1s;
 }
 
 .toolbar ul li a:hover, .toolbar ul li select:hover  {
-  background-color: #f1f3f3;
+  background-color: var(--bg-soft-color);
+  color: var(--text-color);
+}
+.toolbar ul li a.selected {
+  background-color: var(--bg-soft-color);
+}
+.toolbar ul li a.pressed,
+.toolbar ul li select:active {
+  color: var(--primary-color);
 }
 
 .toolbar ul li select:active option {
-  background-color: white !important;
-  color: #44464a;
+  background-color: var(--bg-color);
+  color: var(--text-soft-color);
   padding: 5px;
 }
 
-.toolbar ul li select {
-  cursor: pointer;
-  border: none;
-  background-color: inherit;
-  border-radius: 3px;
-  width: auto;
-  font-weight: bold;
-  font-size: 14px;
+.toolbar .menu_right li a.selected {
+  background-color: var(--text-soft-color);
+  color: var(--bg-color);
 }
 
 .toolbar ul li[data-key=showusers] {
@@ -87,6 +93,8 @@
   margin-left: 10px;
   width: 45px;
   height: 100%;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 .toolbar ul li[data-key=showusers] > a {
   width: 100%;
@@ -98,8 +106,7 @@
   display: none;
 }
 .toolbar .menu_right li {
-  margin-left: 8px;
-  opacity: .9;
+  margin-left: 10px;
 }
 
 .toolbar.cropped .menu_left {
@@ -110,6 +117,7 @@
   width: 35px;
   line-height: 35px;
   font-size: 1.8rem;
+  color: var(--primary-color);
 }
 
 @media (max-width: 1000px) {
@@ -122,9 +130,13 @@
 
 @media (max-width: 720px) {
 
+  .toolbar ul li {
+    margin: 5px 1px;
+  }
+
   .toolbar .menu_right {
-    border-top: 1px solid #d2d2d2;
-    background-color: white;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--bg-color);
     padding: 0;
   }
 
diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css
index 35d77a95a..1a63613ce 100644
--- a/src/static/skins/colibris/src/components/users.css
+++ b/src/static/skins/colibris/src/components/users.css
@@ -8,17 +8,10 @@ table#otheruserstable {
   border-left: none;
   transition: none;
 }
-.popup#users.chatAndUsers .popup-content {
-  background-color: white;
-  color: #374256;
-}
 .popup#users.chatAndUsers #mycolorpicker.popup {
   right: calc(100% + 30px);
   top: 15px;
 }
-.popup#users.chatAndUsers #mycolorpicker.popup .btn-default {
-  color: #374256;
-}
 
 #otheruserstable .swatch {
   border: none !important;
@@ -38,7 +31,7 @@ input#myusernameedit {
   min-width: 110px;
   border: none !important;
   background-color: transparent !important;
-  border-bottom: 1px solid #ddd !important;
+  border-bottom: 1px solid var(--border-color) !important;
   border-radius: 0;
   padding-bottom: 5px;
 }
diff --git a/src/static/skins/colibris/src/plugins/font_color.css b/src/static/skins/colibris/src/plugins/font_color.css
index cd05db176..777117a44 100644
--- a/src/static/skins/colibris/src/plugins/font_color.css
+++ b/src/static/skins/colibris/src/plugins/font_color.css
@@ -6,27 +6,32 @@
   display: list-item !important;
 }
 
+.color\:black,
+[data-color=black] {
+  color: var(--text-color);
+}
+
 .color\:red,
 [data-color=red] {
-    color: #F44336;
+  color: #F44336;
 }
 
 .color\:green,
 [data-color=green] {
-    color: #66d29c;
+  color: #66d29c;
 }
 
 .color\:blue,
 [data-color=blue] {
-    color: #2196f3;
+  color: #2196f3;
 }
 
 .color\:yellow,
 [data-color=yellow] {
-    color: #e0d776;
+  color: #ffeb3b;
 }
 
 .color\:orange,
 [data-color=orange] {
-    color: #d2a564;
+  color: #FF9800;
 }
\ No newline at end of file
diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css
index 45aa4302d..60c64796a 100644
--- a/src/static/skins/colibris/timeslider.css
+++ b/src/static/skins/colibris/timeslider.css
@@ -2,24 +2,26 @@
   border-radius: 3px;
   width: 12px;
   height: 28px;
+  background-color: var(--primary-color);
 }
 
 #timeslider-slider #ui-slider-bar {
   border-radius: 3px;
-  background-color: #e4e4e4;
+  background-color: var(--border-color);
 }
 #slider-btn-container {
   margin: -18px 15px 0 20px;
 }
 #slider-btn-container #playpause_button_icon {
-  color: white;
+  color: var(--bg-color);
+  background-color: var(--primary-color);
+  border: none;
   margin-right: 5px;
   padding-top: 3px;
   width: 45px;
   height: 45px;
 }
 #slider-btn-container #playpause_button_icon:not(.pause) {
-
   padding-left: 4px;
 }
 #slider-btn-container .stepper {
@@ -29,13 +31,16 @@
   line-height: 28px;
   margin-left: 5px;
   font-size: 13px;
+  color: var(--primary-color);
+  border-color: var(--primary-color);
 }
 #slider-btn-container .stepper.disabled {
   opacity: .5;
 }
 
 .timeslider #editbar .buttontext {
-  color: white;
+  background-color: var(--text-soft-color);
+  color: var(--bg-color);
   margin: 0;
 }