beginning of theming

src/css/AccountPage.styl

   width 30px
 
 .account
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__userinformation
     display flex
     justify-content center
     &__name
       font-size 22px
     &__email
-      color blue
+      color thirdColor
     &__company
       font-size 20px
-      color blue
+      color thirdColor
   &__delimiter
     position relative
     top 3px
           &:hover
             background-color lightGrey
           &.active
-            background-color blue
+            background-color thirdColor
             color white
     &__setting
       border-radius 10px
           &__txtinput
             display block
             width auto
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
           &__button
             vertical-align top
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
             padding 8px 25px
             cursor pointer
         &__timezone
           margin 15px 0 30px 0
           &__btn
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
             padding 10px 35px
-            color blue
+            color thirdColor
             background-color transparent
             &::after
               margin-left 10px
             &:hover, &:focus
-              background-color blue
+              background-color thirdColor
               color white
           &__submenu
             max-height 265px
             overflow-Y auto
             &__item
               &:hover, &:focus
-                background-color blue
+                background-color thirdColor
                 color white
       .notification
         &__text

src/css/Dashboard.styl

 
 btnNotification()
   margin 20px 0
-  border 1px solid blue
+  border 1px solid thirdColor
   padding 10px 15px
 
 hoverfocus()
-  background-color blue
+  background-color thirdColor
   color white
 
 bgandcolor()
   background-color transparent
-  color blue
+  color thirdColor
 
 label()
   font-weight 500
   font-size 18px
-  color blue
+  color thirdColor
 
 coloricon()
   .fa-gavel
 
 .dashboard
   margin-left 20px
+  .btn-primary
+    background-color thirdColor
+    color off-white
+    border-color secondColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color secondColor
+      background-color secondColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__header
     flexwrap()
     align-items center
       margin-bottom 20px
       font-size 40px
       font-weight 500
-      color darkBlue
+      color darkthirdColor
     &__detail
       margin-bottom 20px
       font-size 18px
       padding 15px
       cursor pointer
       &:hover
-        background-color folder-hover
+        background-color fourthColor
       &:nth-child(even)
         background-color grey-hover
         &:hover
-          background-color folder-hover
+          background-color fourthColor
       &__icon
         margin 0 25px
         font-size 25px
         border-bottom 1px solid grey
         padding 10px 15px
         &:hover
-          background-color folder-hover
+          background-color fourthColor
         &:nth-last-child(1)
           border-bottom 0
         &:nth-child(even)
           background-color grey-hover
           &:hover
-            background-color folder-hover
+            background-color fourthColor
         &__avatar
           margin-right 20px
           & > img
             font-size 18px
         &__delete
           font-size 20px
-          color blue
+          color thirdColor
           cursor pointer
     &__btnadd
       border-top 1px solid grey
             font-size 25px
         &__text
           font-size 18px
-          color blue
+          color thirdColor
           cursor pointer
     &__form
       padding 15px

src/css/ExtandedAction.styl

 .extandedaction
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__subdropdown
     margin 0
     padding 0

src/css/FileItem.styl

-iconrules()
-  display inline-block
-  margin-right 10px
-  font-size 20px
-
 .currentColor
   color currentColor
 
   border-bottom 0
   cursor pointer
   &:hover
-    background-color files-hover
+    background-color fourthColor
   &__type
     font-size 30px
     text-align center
     &__text
       margin-right 10px
       font-size 17px
-    &__icons
-      &__download
-        iconrules()
-        &:hover, &:focus
-          color blue
-      &__archive
-        iconrules()
-        &:hover, &:focus
-          color blue
-      &__delete
-        iconrules()
-        &:hover, &:focus
-          color blue
   &__status
     &__text
       font-size 20px

src/css/Folder.styl

 // -----------------------------------------------------
 // border management for Workspace container
-border-style = 1px solid darkBlue
+border-style = 1px solid secondColor
 .folder__header
   border border-style
 .folder + .file, .file + .file
 // @Info: the very last line of file or folder has it's border bottom added in js
 // -----------------------------------------------------
 
+.folder.active > .folder__content > .file, .folder.active > .folder__content > .extandedaction
+  padding-right 7px
+
 folderclose()
   height 0
   visibility hidden
     background-color lightGrey
     cursor pointer
     &:hover
-      background-color folder-hover
+      background-color fourthColor
       .folder__header__triangleborder__triangle
-        border-color folder-hover transparent transparent transparent
+        border-color fourthColor transparent transparent transparent
     &__triangleborder
       display none
       position absolute
       left -1px
       border-style solid
       border-width 25px 30px 0 30px
-      border-color darkBlue transparent transparent transparent
+      border-color secondColor transparent transparent transparent
       z-index 1
       &__triangle
         display none
       display flex
       &__icon
         font-size 25px
-        color darkBlue
+        color darkGrey
         text-align center
       &__text
         margin 0 15px 0 0
         overflow hidden
         width 400px
         font-size 17px
-        color darkBlue
+        color darkGrey
       &__button
         &__advancedbtn
           position relative
           .addbtn
             &__text
               font-size 17px
+              color thirdColor
+              border-color thirdColor
+              &:hover, &:focus, &:active
+                color off-white
+                border-color thirdColor
+                background-color thirdColor
+                box-shadow 0 0 1px 2px fifthColor
+                outline fifthColor
               &::after
                 margin-left 20px
             &__subdropdown

src/css/Generic.styl

   &__content
     height 100%
 
+.btn-outline-primary
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color thirdColor
+    background-color thirdColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.btn-outline-primary.dropdown-toggle
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color thirdColor
+    background-color thirdColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.btn-primary
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color secondColor
+    background-color secondColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.dropdown-item
+  &:hover, &:focus, &:active, &:visited
+    background-color fourthColor
+    color off-white
+
 .sidebarpagecontainer
   display flex
   padding-top 88px
 .subTitle
   font-size 20px
   font-weight 500
-  color blue
+  color thirdColor
 
 .btnaction
   display flex
   &__btn
     display flex
     margin-bottom 30px
-    border 1px solid blue
+    border 1px solid thirdColor
     border-radius 10px
     padding 15px 25px
-    color blue
+    color thirdColor
     cursor pointer
     &:hover, &:focus
-      background-color blue
+      background-color thirdColor
       color white
     &__icon
       margin-right 20px

src/css/Header.styl

   position fixed
   width 100%
   box-shadow shadow-bottom
-  background mainColor
   z-index 5
   &__logo
     &__img

src/css/Sidebar.styl

     border-bottom-right-radius 15px
     padding 8px 15px
     cursor pointer
-    background-color blue
+    background-color thirdColor
     color white
     transition all sidebar-animate-speed
   &__btnnewworkspace
         &__wrapper
           display flex
           align-items center
-          border-bottom 1px solid darkBlue
+          border-bottom 1px solid secondColor
           width 100%
           height 100%
-          background-color blue
+          background-color thirdColor
           cursor pointer
           &:hover
-            background-color darkenBlue
+            background-color fifthColor
         &__number
           leftside()
           padding 12px
           &__dropdown
             display flex
             align-items center
-            border-top 1px solid darkBlue
+            border-top 1px solid secondColor
             cursor pointer
             &:nth-last-child(1)
-              border-bottom 1px solid darkBlue
+              border-bottom 1px solid secondColor
             &:hover
-              background-color lightBlue
+              background-color thirdColor
             &__showdropdown
               display flex
               justify-content space-between

src/css/Variable.styl

 /*** COULEURS ****/
 
 mainColor = #fdfdfd // Bg header
-secondColor = #215e8e // bg sidebar
-thirdColor = #2571fe // bg workspace name
-fourthColor = #82b2cc // bg filter sidebar
+secondColor = #7d4e24 // #7d4e24 bg sidebar
+thirdColor = lighten(secondColor, 25%) // #2571fe bg workspace name
+fourthColor = lighten(secondColor, 55%) // #82b2cc bg filter sidebar
+fifthColor = lighten(secondColor, 10%)
 
 fontColor = #252525
 

src/css/btnSwtich.styl

   background-color blue
 
 input:focus + .slider
-  box-shadow 0 0 1px blue
+  box-shadow 0 0 1px thirdColor
 
 input:checked + .slider:before
   -webkit-transform translateX(26px)